一、什么是css

是一组样式设置的规则，用于控制页面的外观样式

二、为什么使用CSS

1. 实现内容与样式的分离，便于团队开发
2. 样式复用，便于网站的后期维护
3. 页面的精确控制，让页面更精美

三、CSS作用

1. 页面外观美化
2. 布局和定位

四、css应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

1. 内部样式
   在title标签下面建一个style标签 写css代码

   
   
   image.png

2. 行内样式
   也称为嵌入样式，使用HTML标签的style属性定义
   只对设置style属性的标签起作用

   
   
   image.png

3. 外部样式
   使用单独的 .CSS 文件定义，然后在页面中使用 link标签 引入

   
   
   image.png

注：行内样式 大于 内部样式 大于 外部样式

离标签越近优先级越高

五、选择器

1. 标签选择器
   也称为元素选择器，使用HTML标签作为选择器的名称

   
   
   image.png

2. 类选择器
   使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

   
   
   image.png

3. id选择器
   使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

   
   
   image.png

六、css属性

1. 字体属性

   
   
   image.png
   
   

   代码示例:

   
   
   image.png

2. 文本属性 只能控制文字

   
   
   image.png

3. 颜色

   
   
   image.png

4. 盒子模型
   什么是盒子
   网页其实就是一个一个盒子构成

   
   
   image.png
5. 盒子上下左右
   上：top
   下:bottom
   左：left
   右：right

6. 清除 自带的网页内外边距
   一般都会开发前写上

   
   
   image.png

练习

image.png

image.png

运行结果

image.png