css（一）- 引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">
/*内接样式
选择器 标签选择器 共性
*/
span{
color: brown;
}
</style>
<!--外接样式-导入式-->
<style type="text/css">
@import url('06-index.css');
</style>
<!--外接样式-链接式-->
<link rel="stylesheet" href="./06-index.css">
</head>
<body>
<!--
css导入的三种方式：
1.行内样式
2.内接样式
3.外接样式
3.1链接式
3.2导入式
-->
<div>
<!--行内样式-->
<p style="color: aqua">我是一个段落</p>
</div>
<div>
<span>我是另一个段落</span>
<span>我是另一个段落</span>
<span>我是另一个段落</span>
<a href="#">路飞</a>
</div>
</body>
</html>
index.css
/*a {*/
/*font-size: 50px;*/
/*color: chartreuse;*/
/*}*/
@import url('06-content.css');
content.css
a {
font-size: 50px;
color: chartreuse;
}
css（二）- 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
body {
color: darkorange;
/*font-size: 44px;*/
}
#box {
background: antiquewhite;
}
#s1 {
color: blueviolet;
}
#s2 {
color: blue;
font-size: 22px;
}
.gr {
color: green;
}
.big {
font-size: 40px;
}
.und {
text-decoration: underline;
}
</style>
</head>
<body>
<!--
css的选择器：1.基本选择器 2.高级选择器
基本选择器：
1.标签选择器
标签选择器可以选择所有的标签元素，比如div p ul li等
不管标签藏得多深都可以选中
选中的是所有的，而不是一个的，所以说是'共性'，不是'特性'
2.id选择器
#选中标签
同一个页面中id不能重复
任何的标签都可以设置id
id命名规范：以字母开头，严格区分大小写，可以有数字，下划线_，减号-
3.类选择器
1.所谓的类就是class .class与id非常的相似，任何标签都可以加类
但是类可以重复 归类
2.同一个标签可以携带多个类，用空格隔开
要有'公共类'的概念
总结：
1.不要试图用一个类完成页面，一个标签要携带多个类，共同设置样式
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
3.尽可能的用class，除非特殊情况可以使用id
id一般是用在js上的，js是通过id来获取到标签
-->
<div>
<p>我是一个段落</p>
</div>
<div id="box">
<span id="s1">123</span>
<span id="s2">234</span>
</div>
<div>
<p class="gr big">段落1</p>
<p class="gr und">段落2</p>
<p class="big und">段落3</p>
</div>
</body>
</html>
css（三）- 高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css高级选择器</title>
<style type="text/css">
/*后代选择器 在css中使用非常频繁*/
div p{
color: red;
}
div div p{
color: blue;
}
.container div p{
color: green;
}
/*子代选择器*/
.container>p{
color: blueviolet;
}
/*交集选择器*/
h3{
width: 300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background: darkorange;
}
/*并集选择器（组合选择器）设置多个标签的统一样式*/
h4,a {
color: fuchsia;
font-size: 20px;
text-decoration: none; /*取消默认样式*/
}
/* '*'通配符选择器 性能有点差*/
* {
color: aquamarine;
}
</style>
</head>
<body>
<div class="container">
<p>我是另一个段落</p>
<div>
<p>我是一个段落</p>
<a href="">luffy</a>
</div>
<ul>
<li class="item">
<h3 class="active">我是一个H3</h3>
<h4>我是一个h4标题</h4>
</li>
<li>
<h4>我是一个h4标题</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>
css（四）- 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css属性选择器</title>
<style type="text/css">
/* 属性选择器 通常在表单控件中使用比较频繁*/
label[for] {
color: red;
}
label[for='pwd'] {
color: yellow;
}
/*匹配以什么开头*/
label[for^='vip'] {
font-size: 30px;
}
/*匹配以什么结尾*/
label[for$='r'] {
color: darkorange;
}
/*匹配包含什么的*/
label[for*='w'] {
font-size: 50px;
}
</style>
</head>
<body>
<form action="">
<label for="user">用户名</label>
<input type="text" id="user">
<label for="pwd">密码</label>
<label for="vip1">VIP1</label>
<label for="vip2">VIP2</label>
</form>
</body>
</html>
css（五）- 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*没有被访问过的a标签的样式 */
.box ul li.item1 a:link {
color: yellow;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited {
color: fuchsia;
}
/*鼠标悬停时的a标签的样式*/
.box ul li.item3 a:hover {
color: green;
}
/*鼠标点住的时候a标签的样式*/
.box ul li.item4 a:active {
color: darkmagenta;
}
/*选中第一个元素*/
div ul li:first-child {
font-size: 30px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child {
font-size: 40px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始 0代表没有选中*/
div ul li:nth-child(3) {
color: darkorange;
font-size: 20px;
}
/*n表示选中所有 从0开始*/
div ul li:nth-child(n) {
color: darkorange;
font-size: 20px;
}
/*偶数*/
div ul li:nth-child(2n) {
color: aquamarine;
font-size: 50px;
}
/*奇数*/
div ul li:nth-child(2n-1) {
color: aqua;
font-size: 80px;
}
/*隔n行换色 隔3就是4n+1*/
div ul li:nth-child(4n+1) {
color: darkorange;
font-size: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">坑</a>
</li>
<li class="item2">
2
<a href="#">蒙</a>
</li>
<li class="item3">
3
<a href="#">拐</a>
</li>
<li class="item4">
4
<a href="#">骗</a>
</li>
<li class="item4">
5
<a href="#">骗</a>
</li>
<li class="item4">
6
<a href="#">骗</a>
</li>
<li class="item4">
7
<a href="#">骗</a>
</li>
<li class="item4">
8
<a href="#">骗</a>
</li>
<li class="item4">
9
<a href="#">骗</a>
</li>
</ul>
</div>
</body>
</html>
css（六）- 伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
/*设置首字母的样式*/
p:first-letter {
color: red;
font-size: 30px;
}
/*在。。。之前添加内容，这个属性使用不是很频繁，使用此选择器一定要结合content使用*/
p:before {
content: 'wyq';
}
/*在。。。之后添加内容，使用非常频繁，通常与布局有很大关联（清除浮动）*/
p:after {
content: '&';
color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<p>我是一个段落</p>
</body>
</html>
css（七）- 继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
.father {
color: red;
font-size: 30px;
background: green;
}
.child {
color: aqua;
}
</style>
</head>
<body>
<!--继承：给父级设置了一些属性，子级继承了父级的属性
有一些属性是可以继承下来 color、font-*、text-*、line-*
像一些盒子元素、定位的元素（浮动、绝对定位、固定定位）不能继承
-->
<div class="father" id="egon">
<div class="child">
<p>alex</p>
</div>
</div>
</body>
</html>
css（八）- 层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
/*2 0 1*/
#box1 #box2 p {
color: blueviolet;
}
/*1 1 1*/
#box2 .wrap3 p {
color: yellow;
}
/*1 0 3*/
div div #box3 p {
color: darkmagenta;
}
/*0 3 4*/
div.wrap1 div.wrap2 div.wrap3 p {
color: blue;
}
/*1 0 0*/
#box {
color: red;
}
/*0 1 0*/
.container {
color: green;
}
/*0 0 1*/
p {
color: fuchsia;
}
</style>
</head>
<body>
<!--层叠性：权重大的标签覆盖掉了权重小的标签，说白了，就是被干掉了
权重：谁的权重大，浏览器就会显示谁的权重
谁的权重大，数数
id的数量 class的数量 标签的数量
-->
<p id="box" class="container">猜猜我是什么颜色</p>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
css（九）- 层叠性 权重相同处理
扫描二维码关注公众号，回复：
5749538 查看本文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性权重</title>
<style type="text/css">
/*!*1 1 1*!*/
/*#box2 .wrap3 p {*/
/*color: yellow;*/
/*}*/
/*!*1 1 1*!*/
/*#box1 .wrap2 p {*/
/*color: red;*/
/*}*/
/*-------------------------------------------*/
/*继承来的*/
/*其实就是 0*/
#box1 #box2 .wrap3{
color: red;
}
/*选中来的*/
/*1 1 1*/
.wrap1 #box2 .wrap3{
color: green;
}
</style>
</head>
<body>
<!--
当权重一样的时候，后设置的属性为准。前提是权重一样，后来者居上
继承来的属性 权重为0
总结：先看标签元素有没有被选中，如果选中了就数数（id、class、标签）
比较权重，谁的权重大就显示谁的属性
如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的。权重都为0.
权重都是0：'就近原则'：谁描述的近，就选择谁的属性,都描述的一样近就比较权重
-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
css（十）- important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>important</title>
<style type="text/css">
/* !important:设置权重为无限大*/
/* !important:不影响继承来的权重，只影响选中的元素*/
p {
color: red !important;
font-size: 30px;
}
.spe1 {
color: yellow;
font-size: 40px;
}
.spe2 {
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<p class="spe1 spe2">我是什么颜色</p>
<p class="spe2 spe1">我是什么颜色</p>
</div>
</body>
</html>