CSS(1)---css语法、css选择器
CSS(1)---css语法、css选择器
一、CSS语法
1、CSS语法
CSS 规则由两个主要的部分构成:选择器
以及一条或多条声明
。
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221134804-1398437910.jpg)
属性 是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被冒号分开。
示例
<!-- 这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素 -->
h1 {color:red; font-size:14px;}
<!-- 在这里,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。 -->
二、CSS三种引入方式
CSS三种引入方式有:行内样式
、内部样式表
、外部样式表
。
1、行内样式
它是通过标签的 style属性 来设置元素的样式,
基本语法示例:
<!--使用行内样式引入CSS-->
<body>
<p style="color:blue; font-size:40px">欢迎访问雨点的博客。</p>
</body>
建议
实际在写页面时不提倡使用,在测试的时候可以使用。
2、内部样式表
在 style标签 中书写CSS代码。style标签写在head标签中。
其基本语法示例:
<head>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
3、外部样式表
CSS代码保存在扩展名为.css的样式表中。有两种方式:链接式、导入式。
基本语法示例:
<head>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--导入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
4、三者比较
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221150652-1802506333.png)
## 三、CSS基础选择器
基础选择器可以分为: 标签选择器
、类选择器
、 id选择器
、通配符选择器
。
1、标签选择器
标签选择器(元素选择器)是指用 HTML标签名称 作为选择器,按标签名称分类,为页面中同一类标签指定统一的CSS样式。基本语法示例:
<!-- 示例 这里h1就是标签-->
h1 {color:red; font-size:14px;}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
2、类选择器
类选择器使用 .
(英文点号)进行标识,后面紧跟 类名。
基本语法示例
<head>
<style type="text/css">
.center {text-align: center}
</style>
</head>
注意
:类名的第一个字符不能使用数字!
3、 id选择器
id选择器使用 #
进行标识,后面紧跟id名,其基本语法示例:
<head>
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
</head>
id选择器和类选择器区别
类选择器: 好比人的名字,是可以多次重复使用的。
id选择器: 好比人的身份证号码,是唯一的不能重复。
4、通配符选择器
通配符 选择器用 *
号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
四、CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
复合选择器有:交集选择器、并集选择器
、后代选择器
、子元素选择器
、相邻兄弟选择器
、伪类选择器
。
1、交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如p.className。
基本语法
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221319585-674278672.jpg)
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
div.red { /*交集选择器 既要满足是 div 标签 又要满足class叫 red*/
color: red;
}
</style>
</head>
<body>
<div>交集选择器</div>
<div class="red">交集选择器</div> <!-- 只有这个会变红 -->
<p class="red">交集选择器</p>
</body>
</html>
2、并集选择器
并集选择器,只要满足一个就可以。比如 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 这三个选择器都会执行颜色为红色。 通常用于集体声明。
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225119893-206090281.png)
示例
<!DOCTYPE html>
<html>
<head>
<title>并集选择器</title>
<style>
/*1. 只要满足其中一个就会变红*/
div, p, span { /*并集选择器 用逗号隔开 */
color: red;
}
</style>
</head>
<body>
<div>并集选择器</div>
<p>并集选择器</p>
<span>并集选择器</span>
<h1>并集选择器</h1> <!-- 只有这一个不会变红 -->
</body>
</html>
3、后代选择器
后代选择器又称为包含选择器,一般标签里面又会包含标签,那么内层标签就为外层标签的后代。
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225237754-2025371781.png)
示例
<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<style>
div p { /* 后代选择器 p 一定是 div 的孩子 */
color: red;
}
</style>
</head>
<body>
<div> 后代选择器 </div>
<div>
<p>后代选择器</p> <!-- 只有它变红 -->
</div>
</body>
</html>
4、子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225549812-693779744.png)
后代选择器跟子元素选择器的区别
后代可以是 亲儿子 、亲孙子 、亲重孙子之类的,而子代只是亲儿子。所以后代选择器的范围更广些。
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
ul li > a { /*这里表示 ul的后代中的li的亲儿子才会有效 */
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a> <!-- 只有这个是li的亲儿子,所以只有它会变红 -->
<div>
<a href="#">二级菜单</a> <!-- 这三个只是li的后代但并不是亲儿子,所以不会变红 -->
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>
5、相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225454962-873692221.png)
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
6、 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。
![](https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221520730-1074208895.jpg)
为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .className {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}。
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
a:link { /* 未访问过的连接状态*/
color: #3c3c3c;
font-size: 25px;
text-decoration: none; /*取消下划线*/
font-weight: 700;
}
a:visited { /*这个链接我们已经点过的样子 已访问过链接*/
color: orange;
}
a:hover { /*鼠标经过连接时候的样子*/
color: #f10215;
}
a:active { /*鼠标按下时候的样子*/
color: green;
}
</style>
</head>
<body>
<a href="http://www.oujiong.com">点击</a>
</body>
</html>
参考
有关CSS选择器上面也只是讲了一部分,更多的可以看w3school官方文档。当你需要怎么样的选择器到这里查找就可以。
``` 你如果愿意有所作为,就必须有始有终。(3) ```