CSS

层叠样式表(英语:Cascading Style Sheets,缩写:CSS;又称串样式列表、级联样式表、串接样式表、阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。当前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。

书写规范

  • 空格规范
/*  选择器 与 { 之间必须包含空格。 */
.selector {
  /* 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格 */
  font-size: 12px;
}
  • 选择器规范
/*  并集选择器,每个选择器声明必须独占一行 */
.post,
.page,
.comment {
    line-height: 1.5;
}

一般情况情况下,选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确

  • 属性规范
/* 属性定义必须另起一行。 */
.selector {
    margin: 0;
    padding: 0;
    /* 属性定义后必须以分号结尾。 */
}

使用方式

  • 内联
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
  • 内嵌
<head>
<style type="text/CSS">
    选择器(选择的标签) { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>
  • 外联
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
属性 作用
rel 定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
type 定义所链接文档的类型,在这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表。我们都可以省略
href 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
  • 比较
样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少)
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
外部样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多)

三大特性

层叠性

所谓层叠性是指多种CSS样式的叠加。

样式冲突,遵循的原则是 就近原则。 那个样式离着结构近,就执行那个样式。

继承性

子元素可以继承父元素的样式( text-,font-,line-这些元素开头的可以继承,以及color属性

优先级

标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素(标签选择器) 0,0,0,1
每个类,伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大
  • 权重叠加
    • div ul li ------> 0,0,0,3
    • .nav ul li ------> 0,0,1,2
    • a:hover -----—> 0,0,1,1
    • .nav a ------> 0,0,1,1

results matching " "

No results matching " "

results matching " "

No results matching " "