CSS
复习
什么是Css？
层叠样式表 ： 层叠 样式只会被覆盖 而不会被替代
CSS 的使用方式
style属性 ---> <h1 style="css属性"></h1>
style标签 ----> head标签里面
link ---> <link rel="stylesheet" href="style.css">
基础选择器
html标签选择器
通过html标签名来选择元素
- 所有的html标签都可以当做选择器
- 无论标签藏多深都会被选中
- 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。
id选择器
-
任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。
-
大小写敏感 ，id的名字中可以有数字字母下划线，但是要以字母开头。
-
驼峰命名 小驼峰命名 大驼峰命名
testHeader 小驼峰 TestHeader 大驼峰
test-header test_header -
但是id名不能够重复
class选择器
- 任何的标签都可以使用class属性(class属性也是一个全局属性)
- class属性名可以重复使用
- 一个class属性中，可以有多个class属性值。
综合选择器
- 后代选择器 div p
- 交集选择器 div.d1
- 并集选择器 div,p
- 子元素选择器 div>p
- 序列选择器 ul li:first-child ul:li:last-child
- 相邻兄弟选择器 div + p
- 普通兄弟选择器 div ~ p
继承和层叠
- 继承：父元素的某些css属性会被子元素无条件的继承过去。
关于文字的css属性都可以进行继承：
color text- line- font- - 层叠
层叠解决的是css冲突的问题。
比较权重来解决层叠问题。
!important 能够把"单独属性"的权重变为无限大。 尽量少用。
块级元素和行内元素
div 块级元素
span 行内元素
块级元素和行内元素的区别：
-
行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
-
块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
-
如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。
块级元素和行内元素之间的转换
display: inline block inlin-block