前端基础(2):CSS

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/H_Targaryen/article/details/82694645

(一)CSS

(1)基本用法

  • CSS(Cascading Style Sheets)层叠样式表
    • 作用:渲染页面;使页面的内容和表现分离
  • 基本格式
    • 选择器{属性1:值1;属性2:值2;} (某些值不能加上引号)
    • 比如#id{样式}
  • CSS和HTML的整合方式
    • 内联样式表:通过HTML标签的style属性
    • 内部样式表:通过head标签的style子标签导入
    • 外部样式表: 有独立的CSS文件(通过link标签< link rel=”stylesheet” href=”” type=”text/css” >),通过head标签内的link子标签导入

(2)选择器

  • 选择器
    • id选择器:HTML元素需要有id属性并且有值——“#id1{样式}”
    • class选择器:HTML元素需要有class属性并且有值——“.class1{样式}”
    • 元素选择器 :直接使用标签(需要是HTML固有的标签)——p{样式}
    • 属性选择器: 看成元素选择器的变种,首先筛选元素, 然后是特定的标签(可以使用自定义的标签)——标签[属性名称=”值”]{样式}
    • 后代选择器:选择E元素后代的所有F元素—— 标签E 标签F{样式}
    • 锚伪类选择器(了解):改变鼠标移动到链接、打开链接时的颜色
  • 对于Cascading层叠的理解
    • 多个样式作用于一个元素时:不同的样式会叠加;相同的样式时会依照就近原则(选择离元素最近的样式)

(3)属性

  • 字体
    • font-family 设置字体
    • font-size
    • font-style
  • 文本
    • text-decoration(设置none让超链接不带下划线)
    • color
    • text-align 对齐方式
  • 列表
    • list-style-type
  • 浮动
    • float (可以让多个div放在同一行 :left、right属性)
    • clear (both属性:左右两边不能有元素)
  • 尺寸
    • width
    • height
  • 分类
    • display(none会让元素不显示;block会让元素单独成块;inline会取消元素的换行)
  • 背景
    • background-color
    • background-image(使用url设置图像背景)
  • 元素框
    • padding 内边距(设置多个值时按照 上右下左顺时针赋值,如果缺省则按照对称方向)
    • border 边框的厚度(border-width border-style(dashed|solid…) border-color)
    • margin 元素之间的距离

猜你喜欢

转载自blog.csdn.net/H_Targaryen/article/details/82694645
今日推荐