文章目录
# CSS复习
CSS语法
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
例：
p
{
color:red;
text-align:center;
}
上面的p为选择器，color为属性，blue为声明的值，结果为把改段落变成红色
CSS注释
CSS注释以 /* 开始, 以 */ 结束
CSS ID和CLASS选择器
ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
例：将id=para1的HTML元素居中
#para1
{
text-align:center;
}
<p id="para1">Hello World!</p>
class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用
例：以下所有拥有 center 类的 HTML 元素均为居中。
.center
{
text-align:center;
}
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
CSS创建
插入样式表的方法有三种:
1.外部样式表（实际开发时使用较多）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。（注意是引入新的css文件来对文档进行格式化）
2.内部样式表（单个文档，练习使用）
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
在head标签里创建style标签，然后就可以写css属性了
3.内联样式# 系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
CSS背景
CSS 背景(background)属性用于定义HTML元素的背景。
1.background-color 属性定义了元素的背景颜色.
2.background-image 属性描述了元素的背景图像，但是默认该属性会在页面的水平或者垂直方向平铺。
3.background-repeat 属性 可以解决background-image 属性带来的平铺,使用方法如下
background-repeat:no-repeat;
4.background-position 属性改变图像在背景中的位置，例如下方可以把图片放在浏览器右上方
background-position:right top;
注：可以简写，简写顺序为background-color，background-image ，background-repeat，background-position 例：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
CSS文本格式
1.color颜色属性被用来设置文字的颜色。三种方式：
body {color:red;}//颜色名
h1 {color:#00ff00;}//十六进制
h2 {color:rgb(255,0,0);}//RGB值
h3{color:rgbd(255,0,0,0.5);} //D为Depth，即颜色深度
2.text-align文本排列属性是用来设置文本的水平对齐方式
3.text-decoration 属性用来设置或删除文本的装饰。（一般用来删除链接的下划线）
4.text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。
5.text-indent文本缩进属性是用来指定文本的第一行的缩进。
CSS字体样式
1.font-family 属性设置文本的字体系列。
2.font-style属性主要是用于指定斜体文字的字体样式属性。
3.font-size 属性设置文本的大小。注：1em=16px
h1 {font-size:2.5em;}
CSS链接样式
1.a:link {color:#000000;} /* 未访问链接*/*
2.a:visited {color:#00FF00;} /* 已访问链接 */
3.a:hover {color:#FF00FF;} /* 鼠标移动到链接上 /
4.a:active {color:#0000FF;} /* 鼠标点击时 */
CSS列表属性
1.list-style-type属性指定列表项标记
2.list-style-image指定列表项标记的图像，使用列表样式图像属性
CSS表格
1.border属性，指定CSS表格边框
border: 1px solid black;
而问题是因为元素之间有独立的边界，表格会出现类似如下情况：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z7BQPKDb-1637512242144)(C:\Users\86152\Desktop\表格.png)]
2.border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开,用来解决上述情况
border-collapse:collapse;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4OSTpHcO-1637512242146)(C:\Users\86152\Desktop\表格2.png)]
3.Width和height属性定义表格的宽度和高度。
4.text-align属性设置水平对齐方式，向左，右，或中心：
CSS盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
1.Margin(外边距) 清除边框外的区域，外边距是透明的
2.Border（边框） 围绕在内边距和内容外的边框。
3.Padding（内边距）清除内容周围的区域，内边距是透明的。
4.Content（内容）盒子的内容，显示文本和图像。
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 20px;
}
上面的div盒子本来只有300px宽，然而我们需要加上盒子两边边框宽度50（25*2），加上左边距和右边距40（20 *2),左右填充50（25 *2）最后得440px，因此实际开发时对盒子宽高的设置应该更加的仔细
CSS边框
1.border-style属性用来定义边框的样式（dotted: 定义一个点线边框，solid: 定义实线边框，dashed: 定义一个虚线边框等等）
2.border-width属性为边框指定宽度。
3.border-color属性用于设置边框的颜色。
4.单独设置边框各边
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
简写：
border-style:dotted solid double dashed;
默认顺序是上，右，下，左
CSS轮廓
1.outline-color 设置轮廓属性
2.outline-style设置轮廓样式
3.outline-width设置轮廓宽度
CSS 外边距
例：
margin:25px 50px 75px 100px;
顺序是上，右，下，左，与border一样，后续其他属性也是如此
CSS 内边距 填充
例：
padding:25px 50px 75px 100px;
CSS分组和嵌套选择器
分组选择器
h1,h2,p
{
color:green;
}
</style>
在样式表中很多具有相同样式的元素，为了尽量减少代码，我们可以使用分组选择器，每个选择器用逗号分隔。
嵌套选择器
例：
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
其中，.marked p{}为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{}为所有class=“marked” 的 p 元素指定一个样式。
CSS尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距,常用：
1.height 属性设置元素高度
2.width属性设置元素宽度
3.line-height属性设置行高
CSS显示
隐藏元素的方式
1.display属性设置为"none"，即display：none
2.visibility属性设置为"hidden"，即visibility：hidden
注意：display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
Display改变块和内联元素
1.块级元素特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
常见： p , pre , table , ul , licenter , dir , div , dl , fieldset , form
2.内联元素特性：
和相邻的内联元素在同一行；
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/mar等gin-bottom)都不可改变，就是里面文字或图片的大小;
常见：select , small , span， i , img , input 等
而利用CSS中display属性，我们可以将他们互相转换
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
CSS定位
position 属性指定了元素的定位类型
static定位
position: static;
HTML 元素的默认值，即没有定位，遵循正常的文档流对象
fixed定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
position:fixed;
relative定位(重要)
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
相对正常位置左移20px,也可写成right:20px
假设原来的元素是A，定位后的元素是B，relative表示的是B相对于A，即相对于自身.
absolute定位(重要)
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
position:absolute;
left:100px;
top:150px;
上面的代码可以理解为，该元素使用了绝对定位，该元素离浏览器顶部150px，离页面左边100px
sticky定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位
当页面滚动超出目标区域时，它会固定在目标位置。
CSS Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。他的属性值如下：
visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit: 规定应该从父元素继承 overflow 属性的值。
CSS浮动
CSS 的 Float（浮动），会使元素向左或向右移动(不能上下移动)，其周围的元素也会重新排列
float:left;//元素向左浮动
清除浮动：元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
清除浮动的方式不止这一种
CSS对齐
元素居中对齐
要水平居中对齐一个元素(如
div{
margin: auto;
}
将div盒子居中水平对齐
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
text-align: center;
左右对齐
1.我们可以使用 position: absolute; 属性来对齐元素:
.right {
position: absolute;
right: 0px;
}
绝对定位，right：0px，所以是右对齐
2.我们也可以使用 float 属性来对齐元素
.right {
float: right;
}
使用float属性让元素右对齐
**注意：**如果子元素高度大于父元素，并且子元素设置了浮动，那么子元素将溢出，这时候可以使用overdlow清除浮动
overflow: auto;
垂直居中对齐
CSS 中有很多方式可以实现垂直居中对齐。
- 一个简单的方式就是头部顶部使用 内边距padding:
padding: 70px 0;
上面代表表示该元素离父盒子的上下边距都为70px
2.使用line-height可以实现垂直居中
line-height: 200px;
height: 200px;
上述代码中，我们通过将line-height的值等于height的值来实现垂直居中
3.除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中
CSS组合选择符（器）
后代选择器
后代选择器用于选取某元素的后代元素。
div p
{
}
上述代码选取的是div元素中的p元素
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
例：
div>p
{
background-color:yellow;
}
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
两个div，位于上面的div由于p元素是div的一级子元素，所以他的样式会被修改，而位于下方的p元素是在span盒子中，span盒子在div中，不是div的一级子元素，因此样式不会被修改
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
div+p
{
background-color:yellow;
}
以上实例选取了所有位于
元素:
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
div~p
{
background-color:yellow;
}
以上实例选取了所有
:
**注意：**上面代码，在div元素前和在div元素里的相邻兄弟元素不会改变样式
CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。伪类可以和css配合使用
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
例：
a:hover {color:red;}
上述代码表示当鼠标移动到链接时，该链接会变成红色
:first-chlid伪类
可以使用 :first-child 伪类来选择父元素的第一个子元素
p:first-child
{
color:blue;
}
在上面的例子中，选择器匹配作为任何元素的第一个子元素的
元素
我们可以用后代选择器与其结合使用：
p > i:first-child
{
color:blue;
}
在上面的例子中，选择相匹配的所有
元素的第一个 元素
亦或者:
p:first-child i
{
color:blue;
}
在上面的例子中，选择器匹配所有作为元素的第一个子元素的
元素中的所有 元素
很绕，多理解，注意他们的先后顺序！！！
:lang伪类
ang 伪类使你有能力为不同的语言定义特殊的规则
CSS伪元素
CSS伪元素也是用来添加一些选择器的特殊效果。
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。（只能用于块级元素）
p:first-line
{}
:first-letter 伪元素
first-letter" 伪元素用于向文本的首字母设置特殊样式
:before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(smiley.gif);
}
上面例子是在每个h1元素前面插入一幅图片
:after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
选择器与其结合使用：
p > i:first-child
{
color:blue;
}
在上面的例子中，选择相匹配的所有
元素的第一个 元素
亦或者:
p:first-child i
{
color:blue;
}
在上面的例子中，选择器匹配所有作为元素的第一个子元素的
元素中的所有 元素
很绕，多理解，注意他们的先后顺序！！！
:lang伪类
ang 伪类使你有能力为不同的语言定义特殊的规则
CSS伪元素
CSS伪元素也是用来添加一些选择器的特殊效果。
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。（只能用于块级元素）
p:first-line
{}
:first-letter 伪元素
first-letter" 伪元素用于向文本的首字母设置特殊样式
:before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(smiley.gif);
}
上面例子是在每个h1元素前面插入一幅图片
:after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
