这是我参与「第四届青训营 」笔记创作活动的第3天
1.关于CSS
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
HTML 用于定义内容的结构和语义,而 CSS 用于设置样式和布局。例如,我们可以使用 CSS 更改内容的字体、颜色、大小和间距,将其拆分为多列,或者添加动画和其他装饰功能。
2.CSS的特点
丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。
多页面应用
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠
简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。
页面压缩
将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。
3.CSS基础知识
标签选择器:
就是以标签名命名的选择器
类选择器:
(1)在所有的标签上都有class属性,class属性中的属性值称为类名
(2)类名只能是由数字,字母,下划线,中划线组成,但不能以数字或者中划线做开头
(3)一个标签可能用多个类名,需要空格隔开即可
(4)类名可以重复使用,一个类选择器可以同时选中多个标签
id选择器:
(1)所有标签上都有id属性
(2)id属性值类似与身份证号,在一个页面中是唯一的,不可重复的
(3)一个标签上只能有一个id属性
(4)一个id选择器只能选中一个标签(只能用一次,不能多个标签同时使用)
块级元素:
1.独占一行(一行只能显示一个)
2.宽度默认是父元素宽度(父元素宽度的100%),高默认由内容撑开
3.可以设置宽高
行内元素:
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高(写了也不生效)
行内块元素:
1.一行可以显示多个
2.可以设置宽高