目录
一、CSS样式表
二、CSS样式规则
1.选择器
二、引入CSS样式表
1.行内式引入CSS
2.内嵌式引入CSS样式
3.链入式引入CSS
三、CSS基础选择器
1.标记选择器
2.类选择器
选择器
4.通配符选择器
四、CSS文本外观属性
（1）预定义的颜色：
（2）采用十六进制定义
（3）RGB代码
-spacing
-spacing
-height
-align
-transform
-decoration
实例：
实现效果：
-indent
-space
五、CSS列表标记
1.无序列表
注意：
实例：
实现结果：
2.有序列表
实例：
实现结果：
3.定义列表
实例：
实现效果：
4.列表嵌套的应用
实例：
六、CSS字体设置
-size
-famiy
-weight
编辑
-variant
-style
七、用CSS控制列表样式
1.实例代码
实现效果：
八、超链接
1.语法
2.实例
实现效果
3.锚点连接
4.连接伪类控制超链接
5.超链接伪类
注意：
九、表格与表单
1.创建表格
（1）
（2）
（3）
标签属性
（1）border
（2）cellspacing
（3）cellpadding
实现效果:
标签属性
（1）height
（2）align
（3）bgcolor
（4）background
（5）valig
（6）bgcolor
标签属性
标签
十、表单
1.作用
2.组成
（1）提示信息
（2）表单域
（3）表单控件
3.创建表单
（1）action
（2）method
（3）GET请求
（4）POST请求
（5）name
控件
（1）单行文本输入框，单选按钮，复选框，按钮等。
单行文本输入框
密码框
（2）单选
（3）多选框
（4）按钮
（5）图片按钮
（6）文件上传按钮
（7）value
控件
控件
select和option标签的属性
7.分组
基本语法格式
十一、CSS控制表单样式
中控制背景色和图片
（1）设置外边距
（2）设置内边距
（3）设置鼠标
一、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有效
选择器
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）预定义的颜色：
red,yellow,blue等
（2）采用十六进制定义
#FFF6600，在实际工作中，常用的就是十六进制
（3）RGB代码
红色：rgb(255,0,0)
-spacing
用于定义字间距，就是字符与字符之间的空白，其属性值可以为不同的单位数值，允许为负数，默认为normal，正数是增加艰巨，负数是减少间距。
-spacing
用于定义英文单词之间的间距，对中文字符无效，取值方式与上面的letter-spacing一样
-
.p1{
-
-
color:red;
-
-
letter-spacing: 70px;
-
-
}
-
-
.p2{
-
-
color: blue;
-
-
word-spacing: 70px;
-
-
}
-height
用于设置行间距，其属性值有3种单位，分别是px,em,%
-align
设置文本内容水平对齐方式，相当于html中的align对齐属性
left
right
center
-transform
可以控制英文字符大小写，其属性值如下：
none：不转换
capitalize：首字母大写
uppercase：全部字符转换为大写
lowercase：全部字符转换为小写
-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>
实现效果：
-indent
用于设置首行文本缩进，其值属性可以是em,px等。
-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>
实现结果：
2.有序列表
有序列表会按照一定的顺序对列表项排序，基本语法格式
-
<ol>
-
-
<li>列表项</li>
-
-
</ol>
实例：
-
<ol>
-
-
<li>
-
-
列表项1
-
-
</li>
-
-
<li>
-
-
列表项2
-
-
</li>
-
-
<li>
-
-
列表项3
-
-
</li>
-
-
</ol>
实现结果：
3.定义列表
通常使用<dl>标签，常用于对术语的即使，或者名词的描述，定义列表的列表项没有任何的项目符号，基本语法格式：
-
<dl>
-
-
<dt>名词1</dt>
-
-
<dd>名词解释1</dd>
-
-
<dd>名词解释2</dd>
-
-
.....
-
-
<dt>名词2</dt>
-
-
<dd>名词2解释1</dd>
-
-
<dd>名词2解释2</dd>
-
-
</dl>
-
-
在网页设计中，定义列表常用于实现图文混排效果
实例：
实现效果：
4.列表嵌套的应用
如果想在列表项中，定义子列表项，就需要将列表进行嵌套
实例：
实现结果：
六、CSS字体设置
-size
用于设置字体的字号，这个属性可以使用相对长度单位，也可以使用绝对长度单位。
-famiy
用于设置字体、网页中常见的字体，有宋体，黑体，微软雅黑等
-weight
用于设置字体的粗细
-variant
设置字体的变体，一般用于定义大小写字母
normal：默认值
small-caps：将所有的小写字母转换为大写
-style
用于设置字体的风格，如设置斜体等
normal：默认值
italic:斜体
oblique：协议
七、用CSS控制列表样式
1.实例代码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<style type="text/css">
-
li{
-
list-style: none ; /*清除默认列表样式*/
-
background: url(images/) no-repeat ; /*为list引入图片*/
-
padding-left: 26px; /*设置左边距*/
-
line-height: 26px; /*设置行间距*/
-
color: red; /*字体颜色*/
-
background-color: white; /*背景颜色*/
-
}
-
</style>
-
<title>
-
-
</title>
-
</head>
-
<body>
-
<h2> 传智播客原创教材</h2>
-
<u1>
-
<li>Photoshop CS6图像设计案例教程</li>
-
<li>网页设计与制作（HTML+CSS）</li>
-
<li>PHP网站开发实例教程</li>
-
<li>C语言开发入门教程</li>
-
</u1>
-
</body>
-
</html>
实现效果：
八、超链接
1.语法
可以帮助web站点实现，从一个页面跳转到其他页面。
在HTML中创建超链接，只需要<a></a>
-
<a href="跳转目标" target="目标窗口的弹出方式">
-
-
文本或者图像
-
-
</a>
target的值：_self意为在原窗口中打开，_blank意为在新的窗口中打开
2.实例
-
<!DOCTYPE html>
-
-
<html>
-
-
<head>
-
-
<meta charset="utf-8">
-
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
-
<title></title>
-
-
</head>
-
-
<body>
-
-
<!-- 文字超链接 -->
-
-
<a href="" target="_self">百度一下</a>
-
-
-
-
<!-- 图片超链接 -->
-
-
<a href="超链接.html" target="_blank">
-
-
<img src="C:\Users\DD\Desktop\">
-
-
</a>
-
-
</body>
-
-
</html>
实现效果
3.锚点连接
在浏览网页时，为了提高信息检索的速度，可以创建锚点连接，使用户快速定位目标内容
-
<a href="#id名">
-
-
链接文本
-
-
</a>
在锚点中，使用id名来
建立标签id名，只需要在标签中使用id属性即可
<标签名> 内存</标签名>4.连接伪类控制超链接
在CSS中，通过连接伪类，可以实现不同的连接状态，是的超链接在点击前、点击后以及鼠标悬停时样式不同，超链接伪类有以下四种
5.超链接伪类
a:link{CSS样式规则；} 未访问时的超链接状态
a:visited{CSS样式规则；} 访问后的连接状态
a:hover{CSS样式规则；} 鼠标经过悬停时的状态
注意：
如果同时使用4中伪类，可能将不起作用
伪类不仅仅可以控制文本样式，还可以设置超链接背景，边框等样式
九、表格与表单
在网页中使用表格除了用来对齐数据之外，还可以进行网页排版。
1.创建表格
创建表格需要使用3个标签：
（1）<table></table>
定义一个表格
（2）<tr></tr>
定义表格中的一行，嵌套在<table></table>
（3）<td></td>
定义表格中单元格，嵌套在<tr></tr>中
标签属性
（1）border
设置表格的边框（默认border="0"无边框）
像素值
（2）cellspacing
设置单元格与单元格边框之间的空白边距
像素值，默认为2
（3）cellpadding
设置单元格内容与边框之间的空白
-
<body>
-
-
<table border="1" cellspacing="8" cellpadding="4"> <!-- 定义表格 -->
-
-
<tr> <!--定义表格中的第一行 -->
-
-
<td>1-1</td>
-
-
<td>1-2</td>
-
-
</tr>
-
-
<tr> <!--定义表格中的第二行 -->
-
-
<td>2-1</td>
-
-
<td>2-2</td>
-
-
</tr>
-
-
</table>
-
-
</body>
实现效果:
标签属性
（1）height
设置行高度
像素值
（2）align
设置水平对齐方式
letf center right
（3）bgcolor
设置行背景颜色
预定义的颜色值，十六进制，rbg
（4）background
设置行背景图像
url地址
（5）valig
设置这一行内容垂直对齐方式
top,middle,bottom
（6）bgcolor
设置行背景颜色
预定义的颜色值，十六进制，rgb
标签属性
标签
th标签通常来设置表头，其文本默认方式加粗居中显示
十、表单
1.作用
可以用来收集用户信息，也可以通过表单做作为载体，将信息提交给服务器
2.组成
提示信息，表单域，表单控件
（1）提示信息
主要是一些说明性的文字，提示用户如何进行填写和操作
（2）表单域
相当于一个容器，用来收纳所有的表单控件和提示信息
（3）表单控件
是一个表单的核心所在，包含了具体的表单功能项，如：单行文本输入框，密码框，复选框，提交按钮等。
3.创建表单
要想让表单中的数据提交给后台服务器，就必须要定义表单域，在HTML中使用<form></form>标签来定义表单域，基本格式：
-
<form action="URL地址" method="数据提交方式" name="表单名称">
-
-
各种控件
-
-
</form>
（1）action
用于指定接收并处理表单数据的服务器URL地址
（2）method
用户设置表单数据的提交方式，其取值方式为GET或POST
（3）GET请求
会将数据显示在浏览器的URL地址里，保密性差，数据量有限制
（4）POST请求
不会将数据限制在URL地址里，会将数据隐藏，保密性较好，无数据量的限制
（5）name
用于指定表单名称，区分同一个页面中的多个表单
控件
（1）单行文本输入框，单选按钮，复选框，按钮等。
<input type="控价类型">
| 属性 |
属性值 |
作用 |
| type |
text |
单行文本输入框 |
|
|
password |
密码输入框 |
|
|
radio |
单选按钮 |
|
|
checkbox |
多选框 |
|
|
button |
普通按钮 |
|
|
submit |
提交按钮 |
|
|
reset |
重置按钮 |
|
|
image |
图片按钮 |
|
|
hidden |
隐藏域 |
| name |
由用户自定义 |
定义空间名称 |
| value |
由用户自定义 |
input空间的默认文本值 |
| size |
正整数 |
input空间在页面中显示的宽度 |
| disabled |
disabled |
第一次加载页面时禁用该控件 |
| maxlength |
正整数 |
控制允许输入的最多字符 |
| checked |
checked |
定义控件被默认选中 |
<p></p>标签中仍然可以插入控件，或者<br>标签都可以
单行文本输入框
密码框
（2）单选
第一种单选sex，只能选择单选按钮
第二种单选<lable>可以扩大控件选择范围
虽然效果一样，但是点击字体仍然可以选择
（3）多选框
（4）按钮
（5）图片按钮
（6）文件上传按钮
（7）value
控件
可以创建多行文本输入框，基本语法格式，常用在留言板
-
<textarea cols="每行的字符数" rows="显示的行数">
-
-
文本框
-
-
</textarea>
rows和cols这两个属性，理解可能不同，因此显示的效果是有差异的，可以在实际中使用CSS来控制。多行文本的宽度和高度。
控件
可以定义下拉菜单，基本的语法格式
-
<select>
-
-
<option>选项1</option>
-
-
<option>选项2</option>
-
-
<option>选项3</option>
-
-
。。。。。。。。。
-
-
</select>
select和option标签的属性
| 标签 |
常用属性 |
描述 |
| select |
size |
指定下拉菜单的可见选项数（取值为正整数） |
|
|
multiple |
定义multiple=“multiple”下拉菜单可以实现多选项功能 |
| option |
selected |
定义selected=“selected”时，当前选项为默认选中项 |
7.分组
基本语法格式
-
<select>
-
-
<optgroup lable="组名1">
-
-
<option>米饭</option>
-
-
<option>面条</option>
-
-
<option>包子</option>
-
-
<option selected="selected">馒头</option>
-
-
</optgroup>
-
-
-
-
<optgroup lable="组名2">
-
-
<option>米饭</option>
-
-
<option>面条</option>
-
-
<option>包子</option>
-
-
<option selected="selected">馒头</option>
-
-
</optgroup>
-
-
..............
-
-
-
-
</select>
十一、CSS控制表单样式
使用CSS可以控制表单字体、边框、背景、内外边距等
中控制背景色和图片
background：url（路径）no-repeat
特殊用法：设置透明背景色，background:rgb(255,255,0,0,5)白色50%的透明度
（1）设置外边距
margin：上，右，下，左，单位常用px
（2）设置内边距
margin：上，右，下，左。单位常用px
（3）设置鼠标
cursor：pointer；手型鼠标