目录
（1）
一、CSS样式表
在html页面中，可以让页面美观，大方，且升级轻松、维护方便，还可以实现结构与显示分离
二、CSS样式规则
1.选择器
用于指定CSS样式作用的HTML对象，花括号内是对该对象的显示样式。
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3......属性n：属性值n}
属性值和属性值之间使用“键值对”的方式出现，用英文“.“连接，多个键值之间使用英文“；”区分。
优点：使用灵活，可以对同一个标签做不同的设置CSS样式
缺点：在同一个标签中，不能统一格式。
color设置显示颜色
font-size：设置显示字体大小
text-align：设置文本对齐方式
intitle：搜索内容，可以精确匹配搜索内容
在CSS中，/* */用来注释内容
二、引入CSS样式表
1.行内式引入CSS
行内式通常也被称为内联式，是通过标签的style属性来设置元素的样式，语法格式：
<标签名 style="属性1：属性1：属性值1；属性2：属性值2；......属性n：属性值n">
内容
</标签名>优点：使用灵活，可以对通哟个标签做不同的设置CSS样式
缺点：在同一个标签中，不能统一格式
2.内嵌式引入CSS样式
将CSS代码集中写在HTML文档中，这个CSS样式代码在<head>头部标签中，并且使用<style>语法格式：
<head>
<style type="text/css">
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3......属性n：属性值n}
</style>
</head>3.链入式引入CSS
链入式就是将所有的样式放在一个或者多个以上以.css为扩展名的外部样式表文件中，通过<link>文件引入HTML文档中，基本语法格式：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>如果CSS文件和HTML文档不在同一个盘符下，使用fil:///绝对路径
三、CSS基础选择器
1.标记选择器
是指用HTML的标签作为选择器使用，按照标签名称分类，为页面的某一类标签指定统一的CSS样式。
标签名{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}2.类选择器
使用英文符号“.“进行表示，后面紧跟类名，基本语法格式：
.类名{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}为某个一个标签添加范围属性的CSS
标签名.类名{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}为某个类添加范围属性的CSS
.类名1.类名2{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}只在先引入类1的范围内引入类2有效
3.id选择器
id选择器通常用#进行表示，后面紧跟id名，其基本语法格式：
id名{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}用一下方式可以实现CSS作用范围控制
#id名 #id名02{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}
#id名 .类名{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}4.通配符选择器
通常使用*来进行表示，它的作用范围是整个HTML页面中的所有元素，基本语法格式
*{属性1：属性值1；属性2：属性值2；....；属性n：属性值n}四、CSS文本外观属性
1.color
此属性用于定义文本颜色，其取值方式有三种：
（1）预定义的颜色：
red,yellow,blue等
（2）采用十六进制定义
#FFF6600，在实际工作中，常用的就是十六进制
（3）RGB代码
红色：rgb(255,0,0)
2.letter-spacing
用于定义字间距，就是字符与字符之间的空白，其属性值可以为不同的单位数值，允许为负数，默认为normal，正数是增加艰巨，负数是减少间距。
3.word-spacing
用于定义英文单词之间的间距，对中文字符无效，取值方式与上面的letter-spacing一样
.p1{
color:red;
letter-spacing: 70px;
}
.p2{
color: blue;
word-spacing: 70px;
}4.line-height
用于设置行间距，其属性值有3种单位，分别是px,em,%
5.text-align
设置文本内容水平对齐方式，相当于html中的align对齐属性
left
right
center
6.text-transform
可以控制英文字符大小写，其属性值如下：
none：不转换
capitalize：首字母大写
uppercase：全部字符转换为大写
lowercase：全部字符转换为小写
7.text-decoration
控制文本的下划线，属性值如下：
none：没有装饰，默认值
underline：下划线
overline：上划线
line-through：删除线
实例：
<html>
.p3{
line-height: 25px;
text-align: center;
color:blue;
font-size: 15px;
letter-spacing: 25px;
}
.p4{
text-align: center; /*居中显示*/
text-transform:capitalize ; /*首字母大写*/
text-decoration: underline; /*下划线*/
}
.p5{
text-align: right; /*居右显示*/
text-transform:uppercase ; /*字母大写*/
text-decoration: overline; /*上划线*/
}
.p6{
text-align: right; /*居右显示*/
text-transform:uppercase ; /*字母大写*/
text-decoration: line-through; /*删除线*/
}
}
</style>
</head>
<body>
<p class="p4">hello world</p>
<p class="p5">hello world</p>
<p class="p6">hello world</p>
</body>
</html>实现效果：
8.text-indent
用于设置首行文本缩进，其值属性可以是em,px等。
9.white-space
用于处理空白字符，有三种属性
normal：默认值，对文本中的空格，空行无效，满行之后自动换行
pre：预格式化，按文档的书写格式保留空格，空行，原样显示
nowrap：空格，空行无效，强制文本不能换行，除非遇到标签<br>，否则内容超出边界不换行，如果超出边界会自动增加。
五、CSS列表标记
为了让用户阅读方便，所以将网页信息以列表的形式显示，HTML中提供了3中常用列表，分别是无序列表，有序列表，定义列表
1.无序列表
无序列表是网页中常用的列表，之所以称为无序列表，是因为，在列表中的每个列表项为并列关系，基本语法格式
<ul>
<li>列表项1</li>
</ul>注意：
1.不赞成使用无须列表的type属性，一般通过CSS样式来替代。
2.<li></li>之间相当于一个容器，可以容纳所有的元素，但是<ul></ul>之间只能嵌套<li></li>，直接在<ul></ul>中写文字，不被允许。
实例：
<body>
<h2>无序列表测试</h2>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>实现结果：
最低0.47元/天 解锁文章
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
