一、什么是css
是一组样式设置的规则，用于控制页面的外观样式
二、为什么使用CSS
- 实现内容与样式的分离，便于团队开发
- 样式复用，便于网站的后期维护
- 页面的精确控制，让页面更精美
三、CSS作用
- 页面外观美化
- 布局和定位
四、css应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式
-
内部样式
在title标签下面建一个style标签 写css代码
image.png -
行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
image.png -
外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 引入
image.png
注：行内样式 大于 内部样式 大于 外部样式
离标签越近优先级越高
五、选择器
-
标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称
image.png -
类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
image.png -
id选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配
image.png
六、css属性
-
字体属性
image.png
代码示例:
image.png -
文本属性 只能控制文字
image.png -
颜色
image.png -
盒子模型
什么是盒子
网页其实就是一个一个盒子构成
image.png - 盒子上下左右
上：top
下:bottom
左：left
右：right -
清除 自带的网页内外边距
一般都会开发前写上
image.png
练习
image.png
image.png
运行结果
image.png
