CSS第一天

前言：

CSS介绍：

CSS：层叠样式表（Cascading style sheets）

作用：给页面中的HTML标签设置样式

• 结构：HTML（决定了身体）
• 表现：CSS（决定了样式美观）
• 行为：JavaScript（决定了交互的动态效果）

css写在style标签中，style标签一般写在head标签里面，title标签下面

CSS 标点符号都是英文状态下的

每一个样式键值对写完之后，最后需要写分号

CSS常见属性：

CSS引入方式：

标签选择器：

通过标签名，找到页面中所有这类标签，设置样式

1
2
3

div {
      color: red;
   }

• 标签选择器选择的是一类标签，而不是单独某一个
• 标签选择器无论嵌套关系有多深，都能找到对应的标签

类选择器：

通过类名，找到页面中所有带有这个类名的标签，设置样式

1
2
3

.nav {
      color: red;
   }

1. 所有标签上都有class属性，class属性的属性值称为类名
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

id选择器：

通过id属性值，找到页面中带有这个id属性值的标签，设置样式

1
2
3

#nav {
      color: red;
   }

1. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
2. 一个标签上只能有一个id属性值，一个id选择器只能选中一个标签

通配符选择器：

找到页面中所有的标签，设置样式

1
2
3

* {
      color: red;
   }

1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding

字体和文本样式：

1️⃣字体大小：font-size（数字 + px）

• 谷歌浏览器默认文字大小是16px，单位需要设置，否则无效

2️⃣字体粗细：font-weight

正常：normal（400）

加粗：bold（700）

• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多4️⃣

3️⃣字体样式（是否倾斜）：font-style

正常：normal（默认值）

倾斜：italic

样式的层叠问题：

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效，所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

字体font相关属性的连写：

写法：font : style weight size family（swsf 时五十分）

只能省略前两个，如果省略了相当于设置了默认值

文本缩进：

文本缩进：text-indent（1em）

推荐：1em = 当前标签的font-size的大小

文本水平对齐方式:

text-align属性给文本所在标签（文本的父元素）设置

文本修饰：

开发中会使用 text-decoration : none ; 清除a标签默认的下划线

水平居中方法margin : 0 auto：

div–p–h：水平居中（margin : 0 auto ; 实现）

行高:

行高：line-height（px）

让单行文本垂直居中可以设置 line-height : 文字父元素高度

网页精准布局时，会设置 line-height : 1 可以取消上下间距

Chrome调试工具操作:

打开方式：① 右击 → 检查 ② 看哪里

控制样式：① 修改属性值 ② 添加属性 ③ 控制样式生效

特殊情况：① 出现删除线 ② 出现小三角形

本节单词有：

1. style

2. rel

3. stylesheet

4. class

5. size

6. weight

7. normal

8. bold

9. italic

10. family

11. font

12. indent

13. align

14. left

15. center

16. right

17. decoration

18. underline

19. line-through

20. overline

21. none

22. margin

23. line-height

24. wight

常见字体系列（了解）：