文章目录
- 1.元素
- 2.引入样式表
- 3.样式表
- 4.媒体查询
- 5.特性查询
1.元素
(1)置换元素和非置换元素
- 置换元素,指用来置换元素内容的部分不由文档内容直接表示。比如img标签。
- 非置换元素,元素的内容是由用户代理在元素自身生成的框中显示。大部分标签都是非置换元素,比如div,span。
(2)元素的显示方式
- 块级元素,默认生成一个填满父级元素内容区域的框,旁边不能有其他的元素,即块级元素独占一行。代表标签有div和p。
- 行内元素,在一行文本内生成元素框,不打断所在行。代表标签有span、a、img
ps.通常情况下,块级元素可以包含行内元素,但行内元素包含块级元素就不太符合规则了。除此之外可以通过display属性设置block和inline,这是可以的。
2.引入样式表
(1)link标签
<link rel="stylesheet" type="text/css" href="style.css">
ps.在rel属性中添加alternate,可以将样式表设置为候选样式表,即可切换样式表
(2)@import指令
必须放在样式文件开头
3.样式表
(1)标记
样式表中不允许有标记,但允许有HTML的注释标记
<!--h1 {font-size: 16px;}
-->
(2)规则的结构
(3)厂商前缀
(4)css注释
/* 注释内容 */css注释不能嵌套,比如下面的注释形式就是不支持的/* /**/
*/
4.媒体查询
- link元素的media属性
- style元素的media属性
- @import声明的媒体描述符部分
- @media声明的媒体描述符部分
5.特性查询
根据用户代理是否支持特定的CSS属性及其值来应用一段样式。
@support(color: black) {body {color: black;}
}
上述代码段的意思是,如果能够识别并处理color:black这个属性值组合,就应用该样式,否则跳过该样式。