CSS权威指南(一)CSS概述

文章目录

  • 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的注释标记


(2)规则的结构

CSS权威指南(一)CSS概述_第1张图片

(3)厂商前缀

CSS权威指南(一)CSS概述_第2张图片

(4)css注释

/* 注释内容 */

css注释不能嵌套,比如下面的注释形式就是不支持的

/* 
	/*
	*/
*/

4.媒体查询

  • link元素的media属性
  • style元素的media属性
  • @import声明的媒体描述符部分
  • @media声明的媒体描述符部分

5.特性查询

根据用户代理是否支持特定的CSS属性及其值来应用一段样式。

@support(color: black) {
    body {
        color: black;
    }
}

​ 上述代码段的意思是,如果能够识别并处理color:black这个属性值组合,就应用该样式,否则跳过该样式。

你可能感兴趣的:(读书笔记#CSS权威指南,css,前端,html,css3)