1.css介绍
一 什么是CSS
CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。
样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等
层叠属于CSS的三大特性之一，我们将在后续内容中介绍
表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里
二 为何要用CSS
在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性，如下
这么做的缺点是
#1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果
#2、代码耦合度高：HTML语义与样式耦合到一起
#3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改
于是CSS应运而生，很好地解决了以上三个问题
2.css的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外链式 -->
<link rel="stylesheet" href="css/a.css">
<!--嵌入式 -->
<style>
p {
color: green;
font-size: 30px;
}
</style>
<!--导入式(了解)
<style>
@import url("css/a.css");
</style>
-->
</head>
<body>
<p>你好呀</p>
<!--行内式-->
<!--<p style="color: red;font-size: 50px">你好呀</p>-->
</body>
</html>
3.css选择器之id、class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
/*
#p2 {
color: red;
}
*/
/*类选择器*/
/*
.p3 {
color: red;
}
*/
.p1 {
color: red;
}
.p2 {
font-size: 50px;
}
.p3 {
text-decoration: underline;
}
</style>
</head>
<body>
<!--
<p>111</p>
<p id="p2">222</p>
<p class="p3">333</p>
<p class="p3">444</p>
-->
<!--
段落1和3颜色为red
段落2和3字体大小为50px
段落1和2的字体加上下滑线
-->
<p class="p1 p3">两只黄鹂鸣翠柳</p>
<p class="p2 p3">一行白鹭上西天</p>
<p class="p1 p2">两岸猿声啼不住</p>
</body>
</html>
4.css选择器之标签、通配符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
p {
color: red;
}
*/
* {
color: red;
}
</style>
</head>
<body>
<p>第一层</p>
<h1>哈哈哈</h1>
<a href="">点我啊</a>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>千层饼</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
5.css选择器之后代、兄弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
p {
color: red;
}
div p {
color: red;
}
div+p {
color: green;
}
div~p {
color: green;
}
div>p {
color: red;
}
*/
.box1 ul p {
color: red;
}
</style>
</head>
<body>
<p>1111</p>
<div class="box1">
<ul>
<li>
<p>你要呀</p>
<p>你要呀</p>
<p>你要呀</p>
</li>
</ul>
<p>333333</p>
</div>
<hr>
<p>22222</p>
<div>
<ul>
<li>
<p>我不要</p>
</li>
</ul>
<p>死鬼</p>
</div>
</body>
</html>
6.交集与并集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.box1 {
color: red;
}
/*
div,h1 {
color: red;
}
*/
</style>
</head>
<body>
<div class="box1">
<p>11111</p>
<a href="#">点我啊</a>
</div>
<h1 class="box1">哈哈哈哈</h1>
</body>
</html>
7.序列选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
p:first-child {
color: red;
}
p:last-child{
color: red;
}
p:nth-child(3) {
color: red;
}
p:first-of-type{
color: red;
}
p:last-of-type{
color: red;
}
p:nth-of-type(3){
color: red;
}
p:only-child {
color: red;
}
*/
p:only-of-type {
color: red;
}
</style>
</head>
<body>
<h1>w我是标题</h1>
<p>我是段落1</p>
<h1>aaaaaa</h1>
<p>我是段落2</p>
<p>我是段落333333333333333333333333333333333333333333</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<hr>
<a href=""></a>
<p>我是段落6</p>
<p>我是段落6</p>
<p>我是段落6666666666666666666666666666666666666666</p>
<p>我是段落6</p>
<p>我是段落7777777</p>
<ul>
<li>
<a href=""></a>
<p>111111111111111</p>
<p>111111111111111</p>
<table></table>
</li>
</ul>
<hr>
<hr>
<hr>
<hr>
</div>
</body>
</html>
8.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*[x] {*/
/* color: red;*/
/*}*/
/*[class*="part1"] {*/
/* color: red;*/
/*}*/
/*[class^="aa"] {*/
/* color: red;*/
/*}*/
/*[href$="com"] {*/
/* color: red;*/
/*}*/
.inp1[type="text"] {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<input type="text" class="inp1">
<input type="text">
<h1 id="id1" type="text">哈哈啊</h1>
<p id="id2" x="111">我是段落111</p>
<p class="aaapart1 part2" x="222">我是段落222</p>
<p class="xxx part2 yyy">我是段落3333</p>
<p class="part1asdf" x="222">我是段落44444</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">点1</a>
<a href="https://www.baidu.com">电2</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
9.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover {
color: green;
font-size: 50px;
}
a:active {
color: blue;
}
a:visited {
color: yellow;
}
input:focus {
background-color: red;
outline: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我啊小*</a>
<input type="text">用户名
</body>
</html>
10.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/* font-size: 20px;*/
/*}*/
div:before {
content: "*";
color: red;
}
div:after {
content: "?";
color: red;
}
.p1 ~ .p2 {
color: red;
}
</style>
</head>
<body>
<p class="p1">111</p>
<hr>
<p class="p2">222</p>
</body>
</html>
11.css三大特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/* color: red;*/
/* font-size: 20px;*/
/*}*/
/*div a {*/
/* text-decoration: none;*/
/*}*/
/*div li {*/
/* color: red;*/
/*}*/
/*div ul {*/
/* color: green;*/
/*}*/
.p1 {
color: red !important;
font-size: 20px !important;
}
.p1 {
color: green;
font-size: 10px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<p class="p1">1111</p>
</li>
</ul>
</div>
</body>
</html>