这篇博客主要介绍了CSS的基本语法，包括常用标签、基础语法、选择器的使用，详细讲解了伪类选择器以及选择器的优先级规则。
css基本语法
---------------常用标签
---------------css基础语法
---------------常用的选择器
---------------伪类选择器
---------------选择器优先级
一、常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!------ 1.下拉列表：select、option、optgroup
select标签：代表整个容器
option标签：代表列表中的每个元素（下拉表中的每个选项）
optgroup标签：对选项进行分组
------>
<label for="">所在的省份:</label>
<select>
<!-- 使用option标签的时候，必须同时给标签内容和value属性赋值，一般赋相同的值 -->
<option value="四川省">四川省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
</select>
<hr>
<label for="">所在的城市</label>
<select name="" id="">
<optgroup label="四川省">
<option value="成都市">成都市</option>
<option value="绵阳市">绵阳市</option>
<option value="眉山市">眉山市</option>
<option value="乐山市">乐山市</option>
</optgroup>
<optgroup label="山东省">
<option value="济南市">济南市</option>
<option value="威海市">威海市</option>
<option value="烟台市">烟台市</option>
<option value="青岛市">青岛市</option>
</optgroup>
<optgroup label="河北省">
<option value="石家庄市">石家庄市</option>
<option value="秦皇岛市">秦皇岛市</option>
<option value="沧州市">沧州市</option>
<option value="保定市">保定市</option>
</optgroup>
</select>
<hr>
<!---------------2.多行文本域:textarea
1）标签内容：输入框内容
2)placeholder:输入提示信息
3)maxlength:能输入字符的最大个数
4)rows:能同时显示的行数
5)cols:设置一行能显示字符的个数（不精确）
----------------->
<textarea placeholder="请输入您的建议..." maxlength="200" rows="3" cols="40">张三</textarea>
<hr>
<!------------------3.无语义标签：div
一般不会使用div来给网页提供内容：div主要用于对网页中的内容进行分块或者分区。
------------------->
</body>
</html>
二、css基础语法
<!------- 1.认识css
css又叫层叠样式表（简称样式表），它是专门用来给标签设置样式和布局
-------->
<!-------- 2.css代码写在哪儿
1）内联样式表:将css代码写在标签的style属性中 - 只作用于一个标签
2）内部样式表:将css代码写在style标签中（style既可以放在head中，也可以放在body中，一般放在head中） - 作用于整个html文件
3）外部样式表:将css代码写在css文件中，然后在html中通过link标签导入 - 可以作用于所有的html文件
------->
<!-------- 3.css代码怎么写
1)css语法结构：
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...}
2)说明:
a.选择器 - 选择器是用来选中需要添加样式的标签的（注意：内联样式不需要写'选择器{}'）
b.属性 - 必须以'属性名:属性值'的形式存在，多个属性之间用分号隔开。
常用属性:color(字体颜色)、font-size(字体大小)、background-color(背景颜色)、width(宽度)、height(高度)
c.属性值 - 1.颜色值:颜色对应的英文单词、#号开头的16进制颜色值、0~255RGB颜色值：rgb(红,绿,蓝)、rgba(红,绿,蓝,透明度)
2.数值大小:带单位(px)的数字、使用百分比(10%)
------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 2）内部样式 -->
<style>
/* 这里面写的是css代码 */
a{
color: darkcyan;
font-size: 40px;
background-color: honeydew;
}
</style>
<!-- 3）外部样式 -->
<link rel="stylesheet" href="css/demo1.css">
</head>
<body>
<!-- 1）内联样式 -->
<p style="color: indianred; font-size: 30px;></font>">我是段落1</p>
<p>我是段落2</p>
<a href="">我是超链接1</a>
<br>
<a href="">我是超链接2</a>
<br>
<span>我是span1</span>
</body>
</html>
/* 在这儿写css代码 */
span{
color: chocolate;
font: size 40px;
}
三、常用的选择器
<!-- 选择器:css中选择器的作用是选中需要设置样式的标签。-->
<!--1.元素选择器 - 直接将标签名作为选择器，选中html中所有的指定标签
例如:
p{} - 选中所有的p标签
a{} - 选中所有的a标签
2.id选择器 - 在id属性值前加#作为一个选择器，选中id属性值为指定值的标签
#p1{} - 选定id属性值为p1的 标签
#a{} - 选定id属性值为a的标签
注意：整个网页中同一个id属性只能出现一次
3.class选择器 - 在class属性值前加.作为一个选择器，选中class属性值为指定值的所有标签
.p1{} - 选中class属性值为p1的所有标签
.a{} - 选中class属性值为a的所有标签
.c1.c2{} - 选中class属性值为c1和C2的所有标签（注意没有空格）
div.c1{} - 选中class值为c1的div(指定值)标签（注意没有空格）
注意： 1）不同的标签可以有相同的class值
2）同一个标签可以同时拥有不同的class值(给同一个标签赋多个class值的时候，用空格隔开class值)
4.通配符 - 直接将*作为选择器，选中当前页面中所有的标签
5.群组选择器 - 将多个选择器用逗号隔开作为一个选择器，同时选中用逗号隔开的每个选择器选中的所有标签
p,a{} - 选中所有的p标签和a标签
p,.c1{} - 选中所有的p标签和class值为c1的标签
#p1,.c1{} - 选中id值为p1的标签和class值为c1的标签
6.后代选择器（所有后代） - 将多个选择器用空格隔开作为一个选择器
7.子代选择器(只有儿子) 将多个选择器用>隔开作为一个选择器
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-------- 案例1：元素选择器 ----------->
<p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p>我是段落2</p>
<div>我是div1</div>
<a href="">我是超链接2</a>
<p>我是段落3</p>
<style>
p{
color: darkcyan;
background-color: antiquewhite;
}
</style>
<style>
span{
font-size: 12px;
}:
</style>
<!------------ 案例2：id选择器 --------->
<p id="p1">我是段落1</p>
<a href="">我是超链接1</a>
<br>
<span id="a1">我是span1</span>
<p>我是段落2</p>
<div>我是div1</div>
<a id="name">我是超链接2</a>
<p>我是段落3</p>
<style>
#p1{
color: cornflowerblue;
background-color: azure;
}
#name{
color: cadetblue;
font-size: 30px;
}
#a1{
color: goldenrod;
background-color: antiquewhite;
font-size: 26px;
}
</style>
<!----------- 案例3：class选择器 ----------->
<p class="c1 c2 c3">我是段落1</p>
<a class="c3"href="">我是超链接1</a>
<br>
<span class="c1 c2">我是span1</span>
<p class="c3">我是段落2</p>
<div class="c1">我是div1</div>
<a class="c2">我是超链接2</a>
<p class="a b">我是段落3</p>
<style>
.c1{
color: cornflowerblue;
}
.c2{
background-color: honeydew;
}
.c3{font-size: 30px;
color: cadetblue;
}
.a.b{
font-size: 50px;
color: darkgreen;
}
div.c1{
color: chocolate;
}
</style>
<!--------- 案例4：通配符 ------------>
<p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p>我是段落2</p>
<div>我是div1</div>
<a href="">我是超链接2</a>
<p>我是段落3</p>
<style>
*{
color: cadetblue;
}
</style>
<!------------- 案例5：群组选择器 ------------>
<p>我是段落1</p>
<a href="">我是超链接1</a>
<span id="p1">我是span1</span>
<p>我是段落2</p>
<div>我是div1</div>
<a class="c1">我是超链接2</a>
<p>我是段落3</p>
<style>
p,div{
color: cadetblue;
}
#p1,.c1{
color: chocolate;
}
</style>
<!-- 案例6：子代、后代选择器 -->
<p>我是段落1</p>
<div>
<p id="c1">我是段落2 </p>
<a href="">我是超链接1</a>
<div>
<p>我是段落3</p>
<span>
<p>我是段落4</p>
<a href="">我是超链接2</a>
</span>
</div>
<a href="">我是超链接3</a>
<p>我是段落5</p>
</div>
<span>
<p>我是段落6</p>
</span>
<style>
/* 选中属于div子代的P标签*/
div>p{
color: blue;
}
div>div>p{
color: coral;
}
/* 选中属于div后代的P标签*/
div p{
font-size: 30px
}
</style>
</body>
</html>
四、伪类选择器
<!--
1.普通选择器和伪类选择器的区别：
1）普通选择器选中的是标签（选中标签的所有状态，所以通过普通选择器选中标签设置的样式会作用于标签的所有状态）、
2）伪类选择器选中的是标签的某种状态
-->
<!-- 2.伪类选择器的写法
普通选择器:伪类选择器{} - 选中指定标签的指定状态
常见的伪类选择器：
1）link - 链接未访问对应的状态（只有a标签有效）
2）visited - 链接已经访问过对应的状态（只有a标签有效）
3）hover - 鼠标悬停在标签上对应的状态 （针对所有的标签有效）
4)active - 鼠标在标签上按下的时候对应的状态（针对所有的标签有效）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 案例1：link和visited -->
<a id="a1" href="http://www.baidu.com">百度</a>
<style>
#a1:link{
color: blue;
}
#a1:visited{
color: chocolate;
}
</style>
<!-- 案例2:hover -->
<div id="box1">
<a href="http://www.jd.com">京东</a>
<p>我是段落1</p>
<button>确定</button>
</div>
<style>
#box1>a{
color: black;
/* 去掉a标签默认的下划线 */
text-decoration: none;
}
#box1>a:hover{
color: chocolate;
/* 添加下划线 */
text-decoration: underline;
}
button{
background-color: cadetblue;
width: 100px;
height: 45px;
border: none;
color: black;
font-size: 18px;
}
button:hover{
background-color: darkcyan;
color: #666666;
}
#box1>p:hover{
/* 让光标变成手指 */
cursor: pointer;
}
<!-- 案例3:active -->
#box1>p:active{
color: brown;
font-size: 100px;
}
</style>
</body>
</html>
五、选择器优先级
<!--
1.内联样式表样式的优先级高于内部和外部（内部和外部本身没有高低之分，看选择器和顺序）
2.在内部和外部样式中：权重值越高优先级越高
元素选择器 - 1
class选择器 - 2
id选择器 - 4
群组选择器看各自的权重
后代和子代的权重是各个选择器相加
3.在！important面前，选择器的优先级无异议，它对应的样式一定有效
最后排序：！important > 内联样式 > id选择器 > class选择器 > 元素选择器
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p id="p1" class="c1" style="color: bisque;">你好</p>
</div>
<style>
div>p{
color: yellow;
}
#p1{
color: green;
}
.c1{
color: red;
}
p{
color: blue !important;
}
</style>
</body>
</html>
8997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
