CSS 网页的美容师
代码书写方法：结构（html）和样式（CSS）相分离
CSS作用和目的：设置HTML的版面布局和外观显示样式。
1. 行内式（内联样式）
（1）语法格式：
**<标签名 style = "属性1：属性值1； 属性2：属性值2：……"> 内容 </标签名>**
<!--color:改变颜色；font：改变字体的格式-->
<div style="color:red ; font-size: 18px;" > 我在这里等你 </div>
样式直接写在标签内部
缺点：没有实现结构和样式分离
2. 内部样式表（内嵌样式表）
（1）概念：
是将CSS代码写在HTML文档的head头部标签中，并用style标签定义
（2）语法格式：
<head>
<style type = "text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
</head>
<head>
<title></title>
<style type="text/css">
h1{
color: red;
font-size:22px;
}
p{
color:blue;
}
</style>
</head>
attation:
（1）style标签一般位于head标签中，当然理论上它可以放在html的任何地方
（2）type =“text/css” 在html5中可以省略
（3）只能控制当前页面
3. 外部样式表（外链式）
（1）概念
将所有的样式放在一个或多个以 CSS 为扩展名的外部样式表文件中
通过 link标签 将外部样式表链接到HTML文档中
link 标签 是一个单标签； link标签要放在 head头部标签中，且指定link标签的三个属性
<!--这句话就是给html和css文件 建立一种联系-->
<head>
<link rel="stylesheet" type="text/css" href="css文件路径"
</head>
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里指定为“stylesheet”，表示被链接文档是一个样式表文件 |
| type | 所连接文档的类型，表示链接的外部文档是CSS样式表。可省略不写 |
| href | 定义所链接外部文档的URL，可以是相对路径，也可以是绝对路径 |
使用外部样式表的优点：结构和样式分离；而且可以通过link标签，实现文件共享。
4 总结
CSS格式：
h1 { color: red; font-size:25px; }
选择器 {属性：属性值；属性：属性值；}
（1）：选择器用于指定CSS样式的HTML标签，花括号是对该对象设置的具体样式
（2）：属性和属性值是以“键值对”的形式出现
（3）：属性是对指定的对象设置的样式属性，例如 字体大小、文本颜色等等
（4）：属性和属性值之间用 : 连接
（5）：多个键值对 之间用 ; 进行区分
CSS选择器（重点）
CSS选择器的作用：选出我们想要的的标签。
选择器的分类：
基础选择器 ：包括（1）标签选择器、（2）类选择器、（3）id选择器、（4）通配符选择器
复合选择器
（1）标签选择器
作用：标签选择器可以将 某一类的标签全部选择出来，比如所有的div标签 和所有的span 标签。
标签选择器口诀：
标签选择器，
页面同选起。
直接写标签，
全部不放弃
标签选择器的特点：可以选中页面中所有的标签，全部选择时比较方便；
不能差异化选择不同的标签，如果想选择单独一个或者某几个，最好使用你类选择器
（2）类选择器
代码格式：
类名选择器
<!--head中定义-->
.类名{
属性1：属性值1；
属性2：属性值2；
}
类名
<p class = '类名'> </p>
类选择器的特点：可以选择一个或多个标签；类名是自定义的，尽量使用英文名来定义类名。
记忆口诀：
差异化选择
一个或多个
上面 点 定义
类名别写错
谁用谁调用
class来做
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>谷歌</title>
<style >
.font100{
font-size: 100px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.yellow{
color: yellow;
}
.green{
color: green;
}
</style>
</head>
<body>
<!--多类名 font100-->
<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="yellow font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>
</body>
</html>
（3）id 标签选择器
代码：
<head>
<title>title</title>
<style >
#pink {
color:green;
}
</style>
</head>
<body>
<p id="pink">愿你出走半生</p>
<p>归来仍是少年</p>
</body>
id选择器 和类选择器 的使用方法很相似
两者之间的区别是：
类选择器（class）像人的名字，可以多次使用，适用于修改样式中；
id选择器（id）像人的身份证，只能用一次，一般用于页面唯一性的元素上，和javascript搭配使用。
（4）通配符选择器
通配符选择器用 * 来表示 ， * 就是表示所有的标签，它是所有选择器中使用范围最广的。
代码格式：
* {属性1：属性值1；属性2：属性值2；}
总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如 p | 不能差异化选择 | 使用情况较多 | p {color:red;} |
| 类选择器 | 可以选出一个或者多个标签 | 根据需求选择 | 非常多 | .nav{ color : red; } ，选择的标签用class调用 |
| id选择器 | 一次只能选择一个标签 | 只能使用一次 | 不推荐使用 | # nav { color : red ;} 选择的标签用 id调用 |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分会不需要 | 不推荐使用 | *{ color : red ;} |
最常见的就是 类选择器 了。
在书写格式的时候，尽量选择比较有意义的名字，可以从表面上看出来意思的。
CSS字体样式
font字体
（1）font-size 大小
代码：
<p font-size : 20px;>
（2）font-family 字体
网页中常见的字体有：黑体、微软雅黑、宋体。
中文字体需要加引号，单引号、双引号都可以，英文可加引号 可不加。
可以同时指定多个字体，中间用逗号（英文状态下的逗号），如果浏览器不支持第一个字体，则会尝试下一个，如果都没有，则会使用电脑默认的字体。
font-family: "Arial","宋体","黑体";
CSS Unicode字体
（3）font-weight 字体粗细
在html中可以使用标签来将字体加粗，使用 b 和 strong 标签
用css中的font-weight也可以，属性值有：normal / bold /100~900（400是normal；700是bold）
font-weight: 400;
（4）font-style 字体风格
字体倾斜：
用html中的标签 i 或者em；
用css中的font-style，属性值有normal（正常） / italic（斜体）
/*让斜体变正常*/
font-style: normal;
/*字体变成斜体*/
font-style: italic;
（5）font ：综合设置字体样式
选择器 {
font : font-style font-weight font-size/font-height font-family; }
attation:
使用font属性时，必须按照上面语法格式中的顺序书写，不能更改顺序，各个属性以 空格 隔开；
其中不需要设置的属性可以省略（取默认值），但是必须保留font-size 和font-family，否则font属性不起作用。
font总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 单位是px |
| font-family | 字体 | 默认是 微软雅黑 |
| font-weight | 字体粗细 | 400 = normal ; 700是bold，没有单位 |
| font-style | 字体样式 | italic是斜体 normal是不倾斜 |
| font | 字体连写 | 1.字体连写是有顺序的；2.字体连写必须出现字体和字号 |
CSS外观属性
（1）color ：文本颜色
| 属性值 | 属性值 |
|---|---|
| 预定义的颜色值 | red 、green、blue |
| 十六进制 | #FF0000、#FF6600、#29D794 |
| REG代码 | rgb（255，0，0） |
（2）line-height 行间距
作用：line-height属性用于设置行间距，就是行与行之间的距离
单位：有三种单位 像素px、相对值em和百分比%，使用最多的是px.
line-height: 26px;
（3）text-align：文本水平对齐
text-align属性用于设置 文本内容的水平对齐，相当于html的align的对齐属性。
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
（4）text-indent：首行缩进
单位：em；1em就是一个汉字的宽度
p{
line-height: 26px;
text-indent: 2em;
}
（5）text-decoration：文本的装饰
text-decoration：常用于给连接修改装饰效果的。
| 属性 | 意思 |
|---|---|
| none | 默认。可以用来取消下划线 （最常用） |
| underline | 下划线（常用） |
| line-through | 贯穿线（不常用） |
| overline | 上划线（不用） |
a{
text-decoration: none;
}
总结：
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 十六进制 |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 设定文字水平的对齐方式 |
| text-indent | 首行缩进 | text-indent：2em ; |
| text-decoration | 文本装饰 | 下划线:underline ; 取消下划线 ：none |
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
