这是我参与「第五届青训营 」笔记创作活动的第2天
通过今天的[理解CSS]视频课,我学到了很多。
我把今天的知识进行了整理,内容如下:
1. 初识CSS
CSS是Cascading Style Sheets的缩写,它是用来定义页面元素的样式,比如设置字体和颜色,设置位置和大小,添加动画效果等等。
2.CSS主要语法以及工作原理和布局。
(1)页面中可以通过不同方法使用CSS样式。有外链式,嵌入式以及内联式。
各方法使用规则如下:
(2)CSS中可以通过选择器来设置指定元素或标签的样式。CSS中又有许多不同种类的选择器。
选择器主要基本语法为:Selector选择器{ Property选择器:Value属性值; }
CSS选择器常见类型主要为以下几种:
- 通配选择器(*),使用方式:
2.id选择器(#),使用方式:
3.类选择器(.),使用方式:
4.属性选择器([]),使用方式:
5.伪类选择器,伪类选择器中主要有四种:
- link,元素未被访问时的样式
- visited,元素被访问后的样式
- hover,当鼠标放在元素上时的样式
- active,元素触发及被点击后的样式
当然还有许多的组合选择器:
- 直接组合:AB ,相当于交集,要同时满足A和B
- 后代组合:A B ,当B是A的子元素时,选中A里面的所有B
- 子代组合:A>B , 当B是A的子元素时,只选中A中的子元素,不包括孙子及以后的元素
- 兄弟选择器:A~B , 当A和B是同级元素时,选择A后面的所有B元素
- 相邻选择器:A+B ,当A和B是同级元素时 ,选择到A后面紧跟的B元素
(3)CSS中的颜色设置。
- 使用rgba设置,使用方法:
rgba(red, blue, yellow, a);其中a是指透明度,数值范围0~1. - 使用hsla设置,使用方法:
hsla('0~360', '0~100%', '0~100%', a);其中a指透明度,数值范围0~1.
(4)CSS中字体的样式设置。
- font-family,字体的字型,例如宋体,雅黑,serif等等。
- font-weight,字体的粗细,指为100~900,通常设置值为700字体就加粗了。
- line-height,设置行高,也就是两行文字之间的距离。
- 同时还有几个可以了解的通用字体族: