一,何为CSS
- CSS指的是层叠样式表(Cascading Style Sheets)
- CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
- CSS节省了大量工作。它可以同时控制多张网页布局。
二,CSS的基础选择器
1,ID选择器
-
结构:#id属性值 { css属性名: 属性值; }
-
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式 注意点:
-
所有标签上都有id属性
-
id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的
-
一个标签上只能有一个id属性值
-
一个id选择器只能选中一个标签
2,类选择器
-
结构:.class { css属性名: 属性值; }
-
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式 注意点:
-
所有标签上都有class属性,class属性的属性值成为类名
-
类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头
-
一个标签可以同时有多个类名,类名之前以空格隔开
-
类名可以重复,一个类选择器可以同时选中多个标签
3,通配符选择器
- 结构:* { css属性名: 属性值; }
- 作用:找到页面中所有的标签,设置样式
- 注意点:默认去除浏览器自带属性margin和padding
4,标签选择器
-
结构:标签名 { css属性名: 属性值; }
-
作用:通过标签名,找到页面中所有这类标签,设置样式 注意点:
-
标签选择器选择的是一类标签,而不是单独某一个
-
标签选择器无论嵌套关系有多深,都能找到对应的标签
三,CSS三大特性
1,继承性
-
特点:子元素有默认继承父元素样式的特点(子承父业)
-
继承属性:color font-style、font-weight、font-size、font-family text-indent、text-align line-height
-
应用场景:
-
可以直接给ul设置list-style:none属性,从而去除列表默认的小圆点样式
-
直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
-
继承失效情况:被浏览器默认样式给覆盖了
2,层叠性
-
特性:
-
给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
-
给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
-
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断
3,优先级
四,个人总结与建议
CSS的语法标准是相对准确的,它的存在为网页提供了约束,使得我们可以自由的编辑各类边框图案。对于刚刚学习CSS的我们,感觉了解基本的一些用法,同时对盒子模型(如何约束边框以达到简单明了条目清晰、简单的目的)需要进行一些了解与应用。