WinDocs

切换主题

返回顶部
导航栏

1. 简介

作者:winter wang
更新于:11 天前
字数统计:669 字
阅读时长:2 分钟
阅读量:

1.1 名字

CSS Cascading Style Sheets

CSS 参考 - CSS（层叠样式表） | MDN (mozilla.org)

CSS样式表 或 级联样式表

1.2 作用

设置HTML页面中的文本内容（字体、大小、对齐方式）、图片外观（宽高、边框样式、边距）以及版面布局和外观显示样式

1.3 价值

让HTML专注做结构呈现，样式交给CSS
结构、样式相分离

1.4 语法规范

CSS中的注释以/*开头，以*/结尾

属性(property): 值(value);

选择器 +

html
<head>
    <style>
    p {
        color: red;
        font-size: 12px;
    }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>

2. 引入方式：三种

  1. 行内样式表（行内式）
html
<span style="font-size: 32px; margin: 21px 0;">行内式</span>
  1. 内部样式表（嵌入式）
html
<style>
  span {
    font-size: 32px;
    margin: 21px 0;
  }
</style>
  1. 外部样式表（链接式）
  • 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
  • 在HTML页面中，使用<link>标签引入这个文件
html
<link rel="stylesheet" href="css文件路径">

使用@import可以在样式表中引入别的样式表 比如：@import 'styles2.css';

2.2 总结

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式分离没有彻底分离较多控制一个页面
外部样式表完全实现结构与样式相分离需要引入最多控制多个页面

3. 三大特性

3.1 层叠性

  • 相同的选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
  • 不冲突就不重叠

3.2 继承性

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

3.2.1 行高的继承

css
body {
    font:12px/1.5 'Microsoft YaHei' ;
}

3.3 选择器优先级

同一个元素指定多个选择器，就会有优先级的产生

  • 选择器相同：层叠性
  • 选择器不同：根据选择器权重执行
  • 复合选择器：权重叠加（不进位）
选择器权重
继承 或 *0,0,0,0
元素（标签）选择器0,0,0,1
类选择器/伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式 style=""1,0,0,0
!important无穷大

4. 书写顺序

4.1 布局定位属性

css
display/position/float/clear/visibility/overflow

4.2 自身属性

css
width/height/margin/padding/background

4.3 文本属性

css
color/font/text-decoration/text-align/vertical-align/white-space/break-word

4.4 其他属性（CSS3）

css
content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...

Contributors

winter wang