CSS
CSS: 层叠样式表
CSS样式
CSS代码写到哪：
- 内部样式表：将
<style>标签放到<head>标签或者<body>标签内。 - 内联样式：可以把样式直接作为一个标签的属性，写入到标签中，使用
style属性 - 外部样式：有一个后缀名为
.css的文件专门用来存放CSS代码，只需要在html代码中使用<link>标签将CSS文件引入即可
<link>标签语法：
<link rel="" type="" href=""/></link>
- 如果
rel=为icon，表示给页面标签页设置图标，type=为image/图片格式，表示引入xxx格式的图片
rel="icon" type="image/图片格式(png、jpg)" href="图片的链接和路径" rel=为stylesheet，表示给页面引入外部样式表，type=固定为text/css（需创建.css文件夹）
rel="stylesheet" type="text/css" href="css文件的链接或路径"
link引入外连接的表，可以重复利用，其他网页开发都可以使用，复用率很高，在开发时比较推荐使用。
CSS代码注释使用 /* 此处写注释 */
CSS样式如何写：
- 语法：
选择器{属性:属性值; 属性:属性值; 属性:属性值;} - 说明：
- 选择器：通过标签来选择被修改的内容或者通过属性（
id属性、class属性）选择被修改的内容 - {} ：固定语法（内部样式、外部样式）
- 内部样式、外部样式、内联样式：修改内容的样式使用
属性:属性值;
- 选择器：通过标签来选择被修改的内容或者通过属性（
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内部样式 -->
<style>
/* 这是CSS注释 */
h1{
color: aliceblue;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="css/html_style.css">
</head>
<!-- 内联样式 -->
<body style="background-color: indianred;">
<h1>这是h1标签</h1>
</body>
</html>
CSS选择器
CSS选择器：
-
通配符选择器
*-> 能改变所有标签的样式（慎用 因为会改变所有标签的样式） -
标签选择器
标签名-> 不加限定条件，能够修改页面中所有某标签（使用需谨慎） -
id选择器：
#id属性值; -
class选择器：
.class属性值
一般在页面标签中会添加id属性和class属性，其对应的属性值一般都是独一无二的，
或者同一类数据使用一个属性值；通过调用id属性值和class属性值变相的等于调用对应的标签 -
父子选择器
父标签 > 子标签（一个缩进就是父子关系）：被修改样式的为子标签 -
后代选择器
祖先标签 后代标签（使用空格连接）：被修改的样式为后代标签 -
兄弟选择器
长兄 ~ 弟弟（缩进一样的为兄弟选择器）：选中下面所有的弟弟选择器，只要是同一标签的同级关系都会被选择 -
相邻兄弟选择器 刘关张： 刘 + 关 关 + 张
兄 + 弟 -
nth-child选择器
a:nth-child(3)-> 找每一级下的第三个标签，并且这个标签是<a>标签（html下标从1开始）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 后代选择器 */
body #three{
color: aquamarine;
}
/* 兄弟选择器 ~右边的和左边的只要是同一标签的同级关系都会被选择*/
#one ~ #two{
font-size: 50px;
}
#one ~ li{
text-decoration: line-through;
}
/* 和下面的都是兄弟 */
/* 相邻兄弟选择器 */
#one + li{
text-decoration: line-through;
}
/* 只是相邻 */
</style>
</head>
<body>
<ul>
<li id="one">水饺</li>
<li>冒菜</li>
<li id="two">抄手</li>
<li id="three">面条</li>
</ul>
<ol>
<li id="three">111</li>
<li></li>
<li></li>
</ol>>
</body>
</html>
效果展示：
CSS边框和文字样式
-
CSS边框常用属性：
-
border: 边框粗细 边框的样式（solid 单实线 double 双实线 dashed 虚线 dotted点） 边框颜色; -
border-radius: num1 (num2 num3 num4)num1- 表示将图形（存在四个角）的四个角统一改为一个弧度num1 num2- num1表示图形的左上角和右下角，num2表示图形的右上角和左下角num1 num2 num3- num1表示左上角，num2表示右上角和左下角，num3表示右下角num1 num2 num3 num4- 左上、右上、右下、左下
-
border-top
border-bottom
border-left
border-right
-
-
CSS文字常用属性：
- color: 修改文字颜色
- font-size: 字体尺寸
- font-family: 字体
- text-align: 位置(left、right、center)
- text-decoration: 在文字的上方或下方或中间添加一条横线（underline、overline、line-throught）
颜色：
三原色：红、绿、蓝
每种颜色有0-255，一共256个等级。共有256**3个颜色
- 颜色可以用英语单词表示
- 可以使用三原色的数字等级表示
rgb(0,0,0)或者rgba(0，0，0，透明度) - 可以使用颜色的
# + 十六进制符号表示
更改样式时：所有选择器可以组合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 标签选择器 */
/* 将页面所有的div改为某样式 */
/* div{
border: 1px dotted palevioletred;
width: 100px;
height: 100px;
} */
/* 将body标签的子标签中第一个div标签改为某样式 */
body > div:nth-child(1){
/* border: 1px dotted palevioletred; */
border-top: 1px dotted palevioletred;
border-bottom: 1px dotted lightblue;
border-left: 5px dotted lightgoldenrodyellow;
border-right: 5px dotted lightpink;
width: 100px;
height: 100px;
border-radius: 100% 50%;
}
/* 调用id属性的标签 */
#one{
border-top: 5px solid yellowgreen;
width: 100px;
height: 200px;
background-color: cadetblue;
}
/* 调用class属性的标签 */
.one{
width: 150px;
height: 150px;
border: 3px double lightsalmon;
border-radius: 100%;
}
/* 调用所有p标签 */
p{
/* color: indianred; */
/* color: #cd5c5c; */
color: rgba(255,0,0,0.5);
text-align: center;
font-size: 50px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div></div>
<div id="one"></div>
<div class="one">
<div id="one"></div>
</div>
<p><b>今日安排</b></p>
<ul>
<li>上课</li>
<li>上课</li>
<li>上课</li>
<li>上课</li>
</ul>
</body>
</html>
通配符选择器
HTML标签存在一个叫做外边距和内边距的两个边距
通配符选择器*{}一般是用来去除标签边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
div{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<hr>
<div></div>
<hr>
<div></div>
</body>
</html>
选择器的优先级
样式优先级问题：
优先级和选择器相关
第1级： 属性后面添加!important（最优先级）
第2级： 内联样式
其他的任何样式都小于这两级，优先级看权重，权重越大，优先级越高
*---- 1
标签选择器 ---- 1
class选择器 ---- 2
id选择器 ---- 4
父子、后代、兄弟、相邻兄弟 ---- 看符号之间各个选择器的权重和，但是先看符号前边的，如果前边的相等，再比较后边
如果权重相等，最后写的谁，就实现谁
但是，权重不一样，但是都是修改的一个标签，不重叠的样式都能实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
color: coral;
}
.p1{
color: aquamarine!important;
text-decoration: underline;
}
div > span > p{
color: cadetblue;
}
.d1 > .s1 > p{
color: blue;
}
</style>
</head>
<body>
<div class="d1">
<span class="s1">
<!-- <p id="p1" class="p1" style="color: lightpink;">我是段落1</p> -->
<!-- 名字可以相同，因为id和class性质不同 不影响 -->
<p id="p1" class="p1">我是段落1</p>
</span>
</div>
</body>
</html>
伪类选择器
-
什么是伪类选择器：
普通选择器:伪类选择器{}
普通选择器选择的是标签，伪类选择器是选中的标签在不同场景下的某个状态
普通标签的状态：鼠标悬停，鼠标点击，激活(成为焦点)
-
常见的伪类选择器
-
两个通用状态
hover- 鼠标悬停
active- 鼠标在某个元素上按下 -
超链接
<a>标签特有的link- 超链接地址没有被成功访问展示的状态
visited- 超链接地址被成功访问展示的状态
-
CSS常用背景属性
background-color: 背景颜色
background:url(图片地址) 是否平铺 x方向位置 y方向位置 背景颜色
是否平铺：no-repeat、repeat
x方向位置: left\right\center、x坐标值
y方向位置: top、bottom、center、y坐标值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
color: darkgreen;
}
/* 设置超链接鼠标悬停时的状态 */
a:hover{
color: rgba(0, 255, 255, 0.5);
cursor: pointer;
}
/* 让光标变为手指 */
span:hover{
cursor: pointer;
}
/* 超链接访问后的状态 */
a:link{
color: lightgrey;
}
a:visited{
color: indianred;
}
/* 鼠标悬停，一张图片消失，另一张图片显示 */
/* 图片消失实现 */
img:hover{
display: none;
background: url('./img/2.jpg') no-repeat rgba(0, 255, 255, 0.1);
}
/* 图片显示 */
</style>
</head>
<body>
<span>请点击<a href="http://www.baidu.com">百度一下</a></span>
<div>
<img src="./img/1.jpg" alt="">
</div>
</body>
</html>
扫一扫
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
