01 认识css
# 1.html的局限性 #
只关注内容语义
- html满足不了设计者需求
- 操作html属性不方便
- HTML里面添加样式很臃肿
# 2.css网页美容师 #
html专注去做结构呈现，样式交给css
# 3.css初识 #
概念:css，通常称为css样式表或层叠样式表
作用:主要用于设置HTML中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距）以及版面布局和外观显示样式
# 4.引入CSS样式表（书写位置）
书写css样式
## 4.1 行内式（内联样式） ##
- 概念
- 称行内样式、行间样式、内嵌样式
- 通过标签的style来设置元素样式
- 基本语法格式如下
<标签名 style="color：red;font-size:12px;">内容</标签名> <div style="color：red;font-size:12px;">内容</div>
- 注意
- style其实就是标签属性
- 属性和值得中间是：
- 多组属性值用;隔开
任何HTML标签都拥有style属性，用来设置行内式
<h1 style="color: yellow;font-size: 18px;">内容</h1
行内式的缺陷：结构和样式未分离
## 4.2内部样式表 ##
- 概念
- 内嵌式
- css代码集中写在html的head头部文档标签中，并且用style标签定义
- 其基本语法格式如下
<head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head>
css
<style> div { color: red; font-size: 12px; } </style>
注 type="text/CSS" 可以在html5中不写
## 4.3 外部样式表(外链式) ##
link
rel
- 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type
- 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href
- 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="03 外部样式表\style.css"> </head> <body> <h3>内容</h3> </body> </html>
CSS
h3 {
color: red;
}
## 4.4 三种样式表总结 ##
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
| ----- | ------------ | ------------ | ------- | --------- |
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
