学习地址:
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili
一. CSS的基本使用
CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性值。
选择器名:{
属性:属性值;
·········
}
注:
-
CSS要以分号结束,声明以{}括起来;
-
最好一行书写一个属性
-
若值为若干单词,则要给值加引号,如:font-family:"agency fb";
三种使用方式:
1. 行内样式:直接写在标签上(在标签上通过style属性定义的样式);
<h2 style="color: brown;font-family: 楷体;">Hello World</h2>
2. 内部样式:定义在style标签中的一种样式,style标签一般设置在head标签中;
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*设置所有的h3标签为红色*/
h3 {
color: red;
}
</style>
</head>
<body>
<h3>Hello World</h3>
<h3>Hello World</h3>
</body>
3. 外部样式:定义在外部的CSS文件中,通过link引入
<link rel="stylesheet" type="text/css" href="css/文件的路径"/>
CSS中:
h4{
font-size:2.5rem;
}
HTML中:
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h4>Hello World</h4>
<h4>Hello World</h4>
</body>
注:当有多重样式时,越精准越优先(就近原则);
二. CSS选择器
1. 通用选择器 :*
*{
属性名:属性值;
······
}
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
* {
color: #FF0000;
}
</style>
</head>
- (改变所有字体颜色)
2. 元素选择器:
元素名/标签名{
属性名:属性值;
······
}
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
div{
font-size: 1.875rem;
}
</style>
</head>
<body>
<div>这是一个div1</div>
<div>这是一个div2</div>
<p>这是一个p</p>
</body>
- (只改变div字体大小)
3. ID选择器:#
# id属性值{
属性名:属性值;
······
}
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
#p1{
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="p1">这是一个p</p>
<span>这是一个span</span>
<font>这是一个font</font>
</body>
</html>
- (只有id为p1的元素背景颜色改变)
4. 类选择器:
.class属性值{
属性名:属性值;
······
}
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
.cls1{
font-family: 楷体;
}
</style>
</head>
<body>
<div class="cls1">这是一个div1</div>
<div class="cls1">这是一个div2</div>
<p id="p1">这是一个p</p>
</body>
</html>
- (只有class属性被定义为cls1的元素字体变成楷体)
5. 分组选择器:#
选择器1,选择器2,选择器3···{
属性名:属性值;
······
}
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
#p1,.cls1,font{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="cls1">这是一个div1</div>
<div class="cls1">这是一个div2</div>
<p id="p1">这是一个p</p>
<span>这是一个span</span>
<font>这是一个font</font>
</body>
</html>
- (部分带上中划线)
样式的优先级是根据选择器的精确度/权重来决定的,权重越大,优先级越高
常见的权重如下:
元素选择器 | 1 |
类选择器 | 10 |
id选择器 | 100 |
内联样式 | 1000 |
三. CSS组合选择器
1. 后代选择器:选择指定元素的所有指定后代元素,以空格隔开
选择器 指定元素{
属性名:属性值;
······
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*后代选择器*/
.food li{
border: blueviolet solid 1px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>卷心菜</li>
<li>菠菜</li>
</ul>
</li>
</ul>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</body>
</html>
- (选择food中的梨元素添加边框)
2. 子代选择器:选择指定元素的第一代子元素,以加号+隔开
选择器 > 指定元素{
属性名:属性值;
······
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*子代选择器*/
.food2 > li{
border: rosybrown dotted 1px;
}
</head>
<body>
<ul class="food2">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>卷心菜</li>
<li>菠菜</li>
</ul>
</li>
</ul>
</body>
</html>
- (选中的class为food2的元素的第一代li加上虚框)
3. 相邻兄弟选择器:选择指定元素的下一个指定元素,两者有相同的父元素,以加号+隔开
选择器 + 指定元素{
属性名:属性值;
······
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*兄弟选择器*/
#mydiv + div{
background-color: burlywood;
}
</style>
</head>
<body>
<div>相邻兄弟选择器1</div>
<div id="mydiv">相邻兄弟选择器2</div>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
</body>
</html>
- (选中指定id为mydiv的元素相邻的下一个元素改变)
- 但是如果想要找的元素身边并没有同类元素,则指令不会生效:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*兄弟选择器*/
#mydiv + div{
background-color: burlywood;
}
</style>
</head>
<body>
<div>相邻兄弟选择器1</div>
<div id="mydiv">相邻兄弟选择器2</div>
<p>这是一个p元素</p>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
</body>
</html>
4. 普通兄弟选择器:选择指定元素后面的所有指定元素,两者有相同的父元素,以 ~ 隔开
选择器 ~ 指定元素{
属性名:属性值;
······
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*普通兄弟选择器*/
#mydiv2 ~ div{
background-color: chartreuse;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div>普通兄弟选择器4</div>
<div id="mydiv2">普通兄弟选择器5</div>
<div>普通兄弟选择器6</div>
<div>普通兄弟选择器7</div>
</body>
</html>
- (指定元素之后的所有兄弟元素全部执行命令)