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选择器只会选中一个元素