这是我参与「第四届青训营 」笔记创作活动的的第2天,今天主要分享css样式的上课笔记.
1.什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
通俗点说就是在html的基础上通过使用css样式表可以将html页面美化，好比女生化妆,涂抹口红、画眼线、粉底等等....
2.css选择器
选择器有：id选择器、类选择器、通配选择器、属性选择器、标签选择器.
- id选择器：通过html标签的id属性进行选择，id一般是唯一的.
- 类选择器：通过html标签的class属性进行选择，类一般可以多个选择，比如对指定文本统一样式.
- 通配选择器：跟正则表达式里的*一样,默认选中html标签.
- 属性选择器：通过html标签的某一个标签的某一个属性进行选择.
- 标签选择器：直接写html标签名即可，比如h、a、div、img.
下图分别是：通配选择器、id选择器、类选择器、标签选择器、属性选择器的使用方法.
左边是html代码和css嵌入代码右边是展示效果，通过颜色控制展示了上述选择器使用方法.
伪类选择器
html: <ol>
css: <style> li:first-child{ color:red; } li:second-child{ color:red; }
li:last-child{ color:blue; } </style>
结果如下:说明伪类选择器是在标签选择器后面+冒号组成的.
选择器组合
- 直接组合：同时满足a和b，语法（ab）不要加空格.a:visited{color:red;}.
- 后代组合：ab选择b，前提是a的子孙，语法（a b）要加空格.a div{color:red;}.
- 亲自组合,选b，b是a的第一个子元素,语法a>b{color:red;}.
- 相邻组合，选b，紧跟a后面，a+b{color:Red;}.
多个标签使用同一样式，选择器组.
上述就是常见的选择器了，最常用的还是id和class选择器.
3.Font-size
字体大小设置有三种方法:px，em、%、small、large、middle
em、%都是相对的单位，会根据父级元素的字体size进行设置.
可以看到div下的h1是div字体大小的2倍，%也是比例设置.
字体权重就是字体的颜色的深浅，支持的值是（100-900）
text-align：left 文本靠左排列
text-align：right 文本靠右排列
text-align：center 文本居中
最后一小节:white-space 属性
normal
默认。空白会被浏览器忽略。
pre
空白会被浏览器保留。其行为方式类似 HTML 中的
标签。nowrap
文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。pre-wrap
保留空白符序列，但是正常地进行换行。
pre-line
合并空白符序列，但是保留换行符。
inherit
规定应该从父元素继承 white-space 属性的值。
这里只展示nowarp和wrap
其余内容在下一个笔记中,期待吧。
通过第一小节的学习，可以轻松掌握选择器的类型，选择器组合，和字体的一些设置.
