【Web前端学习之路】CSS基础知识（黑马课程学习笔记）

day03

CSS的基础认知

1、CSS初识：层叠样式表，简单来说就是用于美化html网页，给HTML标签设置样式。CSS写在style标签中，style标签是嵌套于head标签内部，title标签下；选择器的作用是选择要修饰的元素。

（注：层叠样式表，顾名思义可以层叠覆盖，所以若给同一个标签设置了相同的属性，则最后写的样式会覆盖之前的）

2、CSS引入方式

• 内嵌式（适用于小案例，作用在当前页面）：CSS写在style标签中
• 外联式（适用于项目中，作用在多个页面）：CSS需要单独写在一个.css文件中，通过link标签在.html文件中引入
• 行内式（配合js使用，作用在当前标签）：CSS写在标签的style属性中

  

• 

  注意：大小、宽高等尺寸都要记得写px像素单位

基础选择器

1. 标签选择器：选择的是一类标签，而不是单独某一个
2. 类选择器：自定义类名，结构为：.类名{css属性：属性值；}，然后再在想要修饰的标签中加上与类名相同的class属性值。
3. id选择器：结构：#id属性值{css属性名：属性值}，id多是配合JS使用的，符合规范的用法是一个标签中只能有一个id属性值，一个id选择器也只能选中一个标签
4. 通配符选择器：结构：*{css属性名：属性值；}，作用是找到页面中所有标签

 类选择器使用：类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；一个标签可以同时有多个类名，类名之间以空格隔开即可；一个类也可以用于多个标签

字体和文本样式

• 字体大小属性名：font-size(默认值是16px)
• 字体粗细属性名：font-weight(加粗属性值为bold,正常属性值为nomal;或者直接写属性值100~900整百数)
• 字体倾斜属性名：font-style（倾斜属性值为italic，正常属性值为nomal）
• 字体系列属性名：font-family

 font符合属性 font:style weight size/li（其中的属性值顺序不可改变，否则不生效；可省略前两个属性，为默认值）

• 文本缩进：text-indent(属性值为数字+px或者数字+em)(em是当前标签内的字体大小)
• 文本水平对齐方式：text-align（属性值为left/center/right）
• 文本修饰</