一.CSS简介
CSS是什么?CSS,即“Cascading Style Sheet(层叠样式表)”,是用来控制网页的外观的一门技术。HTML、CSS和JavaScript是前端技术中最核心的三个元素。其中:
HTML控制网页的框架结构
CSS控制网页的外观
JavaScript控制网页的行为。
二.CSS的引入方法
css的引入方法有四种:
1.行内样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<p style="color: #CC0000;">这个是红色字体</p>
</body>
</html>
2.内嵌样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{font-size: 30px;}
</style>
</head>
<body>
<p class="big">css样式内容写在style标签内</p>
</body>
</html>
3.外链样式
首先在css目录里建立一个1.css的css文件
p{
font-size:48px;
}
html文件内容:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<p>我的大小是48px。</p>
</body>
</html>
4.导入
导入位置可以是在css文件中或者是style标签中。导入语法是@import url(’./xxx.css’)或者@import ‘./xxx.css’
@import url("css/1.css");
或者
@import './xxx.css';
三.层叠关系
1.当属性一致的时候,越在html后面的优先级越高,行内样式的优先级最高,因为行内样式最靠近元素。
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: #006400;
}
</style>
</head>
<body>
<P>css优先级</P>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
这里的显示结果是粉色,因为行内样式最靠近元素p。
2.当属性不一致则属性相加。
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: #006400;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<P>css优先级</P>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
显示结果:
3.加上 !important代表权重最大,不可以覆盖。
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: red !important;
color: #006400;
color: #DBCBE6;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
显示结果:
四.CSS选择器
首先选择器类型有7种:
选择器类型 | 权重 |
---|---|
通配符选择器 | 0.5 |
标签选择器 | 1 |
class类选择器 | 10 |
id选择器 | 100 |
包含选择器 | |
群组选择器 | |
直接子集选择器 |
选择器优先级
表格中的权重越大,优先级越高,而包含选择器,直接子集选择器的权重相加,权重越大,优先级越高。下面介绍这7种选择器:
1.通配符选择器,在style样式里直接加*{color: red;},代表所有的文字颜色皆为红色。
2.标签选择器,在style样式里直接写标签然后加属性
p{ font-size:40px;}
span{ color:red;}
代表html页面中所有的p标签的字大小为40px,所有span标签里的字体颜色均为红色。
3.class类选择器,在头部style里面加类及其属性,在body里面加class。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
color: red;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p class="red">宁静致远</p>
</body>
</html>
4.id选择器,在头部style里面加类及其属性,在body里面加class。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
color: #DBCBE6;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p id="red" >宁静致远</p>
</body>
</html>
5.包含选择器,类名1 类名2{属性},其中类名2必须是类名1的后代。(中间用空格隔开。)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul li{background-color: #125AA2;}
/* 选择的li标签是ul的后代 */
/* 尽量在包含选择器中父辈选择类名或者id */
/* 一般选择器层级不超过三层 */
</style>
</head>
<body>
<h1>包含选择器</h1>
<ul>
<li>ul中的li1</li>
<li>ul中的li2</li>
<li>ul中的li3</li>
</ul>
</body>
</html>
6.群组选择器,类名1,类名2,类名3{属性},类名1,类名2,类名3公用下面的属性。(中间用,隔开。)
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
h1,p,leiming{
color:red;
}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素,应用css样式</p>
<div class="leiming">宁静致远</div>
</body>
</html>
7.直接子集选择器,类名1>类名2>类名3,其中是类名3必须是类名2的子集,类名2必须是类名1的子集,这样直接控制类名3的属性。(中间用>隔开。)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul>li>p{color: #125AA2;}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素,应用css样式</p>
<ul>
<li id="myid">id选择器</li>
<li class="odd">class类选择器</li>
<li>包含选择器</li>
<li><p>标签选择器</p></li>
<li>通配符选择器</li>
</body>
</html>
这里只有p标签选择器的文字颜色会变红。
五.css优先级
1.有!important 修饰符最高
2.css越靠近元素的优先级越高
3.选择器一致的情况下style行内样式优先级高,同样的css,后面的会覆盖前面。