CSS知识点总结 | 青训营

56 阅读3分钟

一,何为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,优先级

image.png

四,个人总结与建议

CSS的语法标准是相对准确的,它的存在为网页提供了约束,使得我们可以自由的编辑各类边框图案。对于刚刚学习CSS的我们,感觉了解基本的一些用法,同时对盒子模型(如何约束边框以达到简单明了条目清晰、简单的目的)需要进行一些了解与应用。