目录
第一章 CSS概述
1.1语法
CSS主要由两个主要的部分构成：选择器和一条或多条声明
h1{color:blue;font-size:12px;} /*h1是选择器，color和font-size是声明*/
1.2注释
CSS注释用/* */表示，例如：
p{
/*注释*/
color:red;
text-align:center;
}1.3CSS的创建
<link rel="stylesheet" href="test1.css">
link表示外部样式文件链接，在head标签内定义
stylesheet为样式表文件
（1）外部样式表(外联式)
在test1.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入外部样式表-->
<link rel="stylesheet" href="test1.css">
</head>
<body>
<p>段落</p>
</body>
</html>在test1.css文件
p{
color: red;
text-align: center;
}效果：“段落”颜色变为红色
（2）内部样式表(内联式)
直接在test1.html文件里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入外部样式表-->
<style>
p{
color:chartreuse;
text-align: left;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>效果图：
（3）内联样式(行内式)
test1.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--引入外部样式表-->
<p style="color:cornflowerblue;text-align: left">内联样式表</p>
</body>
</html>效果图：
第二章 CSS选择器
1.id选择器
id选择器可以为标有特定的id的HTML元素特定的样式，一般来说，一个页面中的标签的id的名称，必须唯一且不能重复
例如：为id为part1的段落添加红色字体样式
<p id="part1">段落1</p>
<p id="part2">段落2</p>#part1 {
color:red;
}2.class选择器
class选择器可以为标有特定class的HTML元素指定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复
需求描述：为class为green的段落添加绿色字体样式，为class为bold的段落添加粗字体样式
<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>.green{
color:green;
}
.bold{
font-weight:bold;
}3.标签选择器
直接所有标签来选择
需求：为所有段落标签添加黄色字体样式，为所有超链接标签添加红色字体样式
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打开百度</a>p {
color:yellow;
}
a {
color:red;
}4.子代选择器
子代选择器可以选择当前元素的所有儿子元素。定义的时候用>隔开。
需求描述：为div标签下所有h1儿子节点设置为红色文本样式
<div>
<h1>hello</h1>
<span><h1>world</h1></span>
<h1>hello</h1>
<div>div>h1{
color:red;
}5.后代选择器
嵌套标签，定义时使用空格隔开
需求描述：为所有段落标签中的超链接标签添加红色文本
<p class="part">
<a href="http://www.baidu.com/">百度</a>
</P>
<a href="http://www.baidu,com">百度</a>.part a{
color:red;
}6.相邻兄弟选择器
选择相邻的元素，且二者有相同的父元素，也可以是紧接在另一个元素后的元素，定义时用+隔开
需求描述：为div之后的第一个p标签设置为黄色文本样式
<div>
<p>DIV 内部段落</p>
</div>
<p>DIV 后的第一个p元素</p>
<p>DIV 后的第二个p元素</p>div + p{
background-color:yellow;
}7.后续兄弟选择器
选取所有指定元素之后的相邻兄弟元素，定义时用~隔开
需求描述：为div之后的所有p标签元素设置为黄色文本样式
<div>
<p>DIV 内部段落</p>
</div>
<p>DIV 后的第一个p元素</p>
<p>DIV 后的第二个p元素</p>div ~ p{
background—color:yellow;
}8.交集选择器
满足多个条件后才被选择，定义时用标签名.ID名/类名
<p class="part">段落</p>
<h1 class="part">标题</h1>
p.part {
color:red;
}9.并集选择器
多元素共享某属性时，可以使用并集选择器，定义时用逗号隔开
需求描述：为p标签，h1标签，class=‘link’，id=‘click’的这几种元素添加红色文本样式
<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com" class="link">百度</a>
<button id="click">按钮</button>p, h1, .link, #click {
color:red;
}第三章 CSS样式
1.文本与文字样式
（1）单位
| 单位 | 描述 |
| px | 像素 |
| em | 字符 |
| % | 百分号 |
（2）颜色
| 颜色 | 描述 |
| red,blue,green | 颜色名 |
| rgb(x,x,x) | RGB值，每个颜色分量取值0~255 红色：rgb(255,255,0) 灰色：rgb(66,66,66) 三个值相同 |
| rgb(x%,y%,z%) | RGB百分比，红色(100%,0,0) |
| rgba(x,x,x,x) | RGB值，透明度，a值：0.0（完全透明）与1.0（完全不透明），红色半透明rgba(255,0,0.5) |
| #rrggbb | 十六进制数 红色：#ff0000 |
（3） 文本属性
| 属性 | 描述 | 取值 |
| color | 文本颜色 | red #f00 rgb(255,0,0) |
| letter-spacing | 字符间隔 | 2px -3px |
| line-height | 行高 | 14px 1.5em |
| text-align | 对齐 | center left right justify(两端对齐) |
| text-decoration | 装饰线 | none overline （上划线） underline （下划线） line-through （删除线） |
| text-indent | 首行缩进 | 2em |
字符间距letter-spaceing：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
letter-spacing: 2px;
}
h2{
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>字符间距letter-spacing</h1>
<h2>小马哥</h2>
</body>
</html>效果：
行高line-height：行与行之间的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 14px;
line-height: 1em;
}
</style>
</head>
<body>
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>
</body>
</html>效果：
当行高和文本高一样时文本垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
height: 40px;
background-color: aquamarine;
font-size: 14px;
line-height: 40px;
}
</style>
</head>
<body>
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>
</body>
</html>没有设置行高前：
行高和文本高一样后： 
对齐方式text-align：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 { text-align: center}
.date {text-align: right}
.fate {text-align: left}
#m {text-align: justify}
p samp{color: red}
</style>
</head>
<body>
<h1>居中对齐</h1>
<p class="date">左对齐</p>
<p class="fate">右对齐</p>
<p id="m">鉴于本人喜欢爬虫，最近看了一些爬虫的基础，<samp>两端对齐</samp>几个爬虫入门实例。下面给你们看，大佬勿喷</p>
</body>
</html>效果：
装饰线text-decoration：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: none}
</style>
</head>
<body>
<h1>小马哥不马虎</h1>
<h2>小马哥不马虎</h2>
<h3>小马哥不马虎</h3>
<h4>小马哥不马虎</h4>
</body>
</html>效果：
2.字体
| 属性 | 描述 | |
| font | 在一个声明中设置所有字体属性 | font：bold 18px ‘黑体’ |
| font-family | 字体系列 | font-family: "Hiragino Sans GB" "Microsoft" "YaHei" |
| font-size | 字号 | 14px 120% |
| font-style | 斜体 | italic |
| font-weight | 粗体 | bold |
font还可以简化为：font：。。。；
<p>白日依山尽，黄河入海流。欲穷千里目。更上一层楼。</p>p {
font: italic bold 16px '宋体';
}
2. 背景与超链接样式
（1）背景属性
| background-color | 背景颜色 |
| background-image | url（“图片路径”） 背景图片 |
| background-repeat | 背景填充 repeat ， repeat-x，横向填充 repeat-y，纵向填充 no-repeat，无填充 |
| background | 颜色，图片，repeat |
代码实例：
（2）CSS超链接
| 状态 | 描述 |
| a:link | 普通的，未被访问的链接 |
| a:visited | 用户已访问的链接 |
| a:hover | 鼠标指针位于链接到上方悬停 |
| a:active | 链接贝点击的时刻 |
超链接状态的出现顺序：link>visited>hover>active 巧记：Love&Hate
<a href="https://wwww.baidu.com">https://wwww.baidu.com</a>a:link{
text-decoration: none;
color: cornflowerblue;
}
a:visited{
text-decoration: none;
color:#09f;
}
a:hover{
text-decoration: underline;
color: red;
}
a:active{
text-decoration: none;
color: chartreuse;
}3.列表与表格
（1）列表List
·ul：无序列表
·ol：有序列表
| 属性 | 描述 |
| list-style | 所有用于列表的属性设置于一个声明中 |
| list-style-image | 为列表项设置图像 |
| list-style-position | 标志位置 |
| list-style-type | 标志的类型 |
| 值 | 描述 |
| none | 无标记 |
| disc | 默认标记，实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 数字 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
| lower-Greek | 小写希腊字母 |
| lower-latin | 小写拉丁字母 |
| upper-latin | 大写拉丁字母 |
list-stype-position标记位置：
·inside：标号向右缩进到列表内
·outside：标号突出在列表左侧
<ul class="data">
<li>HTML--网页结构</li>
<li>CSS--网页样式</li>
<li>JS--网页交互</li>
</ul>
<ol class="data1">
<li>HTML--网页结构</li>
<li>CSS--网页样式</li>
<li>JS--网页交互</li>
</ol>.data{list-style-position: inside}
.data1{list-style-position: outside}效果：
list-style-image列表设置图像：
例如在上面的例子进入image
.data{list-style-position: inside;
list-style-image: url("tb.png")}
.data1{list-style-position: outside}效果：
（2）CSS表格
表格大小属性：width(宽)，height(高)
table{
width：500px;
height：200px;
}表格边框属性：collapse,用于表格边框和单元格边框合并
table{
border-collapse:collapse;
}未合并前：
合并后：
寄偶选择器：
格式
标签名:nth-child(odd|even)·odd表示奇数个元素
·even表示偶数个元素
代码实例：
<table border="1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>tr:nth-child(odd){
background-color: chartreuse;
}效果：
第四章 CSS布局与定位
1.盒子模型组成
·content：内容
·height：高度
·width：宽度
·border：边框
·padding：内边框
·margin：外边框
边框的四个子属性：top，buttom，left，right
<div>111111111111111
1111111111111111
1111111111111111
1111111111111111</div>div{
width: 100px;
height: 100px;
border: 1px solid;
padding: 20px;
margin: 10px;
}效果：
2.overflow属性
当内容溢出盒子框时，overflow参数可以调整内容
·hidden：超出部分不可见
·scroll：显示滚动条
·auto：如果有超出部分，显示滚动条
显示滚动条效果：
3.border属性
| border-width 边框宽度 | px，thin(细)，medium(中)，thick(粗) |
| border-style 边框类型 | dashed(---)，dotted(....)，solid(-)，double |
| border-color | 颜色 |
| border | width, style, color |
4.定位机制
4.1文档流flow
元素分类：block，inline，inline-block
元素类型转换：display
1.block元素
block元素特点：
·每个元素独占一行
·元素的height，width，margin，padding都可以设置
常见的block元素：<a> <p> <h1>~<h6> <ol> <table> <form>
显示为block元素：display：block
2.inline元素
inline元素特点：
·不单独占一行
·width，height不可设置
常见的inline元素：<span> <a>
显示为inline元素：display：inline
3inline-block元素
inline-block特点：
·元素不单独占一行
·元素的height，width，margin，padding可以设置
常见的inline-block元素：<img>
显示为inline-block元素：display：inline-block
4.2浮动流float
1.float属性
·left 左浮动
·right 右浮动
·none 不浮动
2.clear清除属性
·both 清除所有属性
·left和right只能清除一个方向的浮动
·none
4.3层定位layer
1.position属性
·fixed 固定定位
·relative 相对定位
·absolute 绝对定位
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
