css

一、display属性，用于确定该元素的类型

div元素：默认display属性值为“block”，称为“块级”元素（block-level）

spa元素：默认display属性值为“inline”，称为“行内”元素

 

二、行内元素和块级元素

1.块级元素块级元素常用作容器，因为块级元素会自动占据一定矩形空间，独占一行，块级元素具有一定的宽度和高度，可以设置宽、高

块级元素可以容纳内联元素和其他块元素

基本块级元素：h1-h6、p、hr

常用于布局的块级元素：ol、ul、dl、dt、dd、table、form、div

 

2.行内元素没有独立空间，它是依附于其他级元素存在的，因此不能设置宽、高，行级标签也称为内联标签、行内标签

行内元素只能容纳文本或其他行内元素

常用标签符：img、span、br、input、textarea

 

3.行内块元素：inline-block，既可以写块级元素，也可以写行内元素

 

三、使用外部样式表：

<link rel = “stylesheet” href = “main.css”>

使用外部样式表的特点：

（1）实现了内容结构和表现形式代码分离，方便复用和维护

（2）使HTML代码更纯净，有利于程序员和搜索引擎的阅读

（3）是开发页面的常用做法

 

四、使用内部样式表：

将css代码写到HTML文档的style元素内容中

使用内部样式表的特点：

（1）没有了样式表文件，在某些时候可以提升效率

（2）多个页面难以共享样式，不利于代码复用

（3）HTML和css代码混杂，不利于程序员和搜索引荐阅读

（4）在某些对效率要求苛刻或测试的场景下使用

 

五、使用行内元素：

css代码写在元素的style属性中，行内样式不写选择器

使用行内元素的特点：

（1）没有了样式表文件，在某些时候可以提升效率

（2）多个元素难以共享样式，不利于代码复用

（3）HTML和css代码混杂，不利于程序员和搜索引荐阅读

（4）javascript操作的是行内样式

（5）在测试的场景下使用

 

六、引用css

外部：独立css文件中（link）

内部：在head中添加（style）

行内：写在开始标签上

 

七、css注释书写格式：/*注释内容*/（内部和外部通用）

css规则：h1{color：red；text-align：center；}

 

八、css选择器决定了样式规则适用于哪些元素：

元素选择器：书写格式：标记名{/*声明块*/}

                     所有与该标记名匹配的元素，都将应用声明块中的规则

类选择器：书写格式：. 类名{/*声明块*/}

                  所有class属性为指定类名的元素，都将应用声明块中的规则

ID选择器：书写格式：#（id名）{/*声明块*/}

                  属性id为指定值的元素，将应用声明块中的规则

                  在同一个HTML文档中，元素的 id值必须唯一    ID选择器只会选中一个元素