CSS是什么？
Cascading Style Sheet 层叠级联样式表
CSS：表现层（美化网页）
字体、颜色、边距、高度、背景图片、网页定位、网页浮动
CSS的导入方式
一般情况下，需要新建一个目录，用于存放css文件
·最好使用html和css分离的方式，
CSS的导入方式：
1、写在 <style> 内部的是内部样式表。
2、写在css文件中，需要<link rel=“stylesheet” type=“text/css” href=“css/style.css”> 导入的是外部样式表。
3、写在标签内部的 style 属性可以编写css代码，属于行内样式。html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--规范，<style> 内部可以编写css代码（与html代码融合在一起，一般是不建议的）-->
<style type="text/css">
h1{
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>标题</h1>
<!--行内样式表：在标签中编写一个style属性，编写样式即可-->
<h1 style="color: blue">标题2</h1>
<!-- 优先级：行内样式最高，内部样式和外部样式主要看在head中的先后顺序（就近原则） -->
</body>
</html>
css代码：
/*建议将css和html代码分离的方式
语法：
选择器：{
声明1；
声明2；
声明3；
}
每一个声明语句最好使用分号结尾，
*/
h1{
color: red;
}
CSS的好处：
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式丰富
4、建议使用对立于html的css文件
5、利用SEO，容易被搜索引擎收录
拓展：外部样式两种写法
- 链接式：
<link rel="stylesheet" type="text/css" href="css/style.css"> - 导入式：
<!DOCTYPE html> <html> <head> <title>Title</title> </head> <style type="text/css"> /*导入式引用外部样式表（弊端，当网页访问人数过多时会先展示骨架，再渲染）*/ @import url("css/style.css") </style> <body> <h1>标题</h1> </body> </html>
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import属于CSS范畴，只能加载CSS； link引用CSS时，在页面载入时同时加载；而@import需要页面网页完全载入以后加载
选择器
作用：选择页面上的某一个或某一类元素
基本选择器：
- 标签选择器：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*标签选择器会选择到页面上所有的这个标签的元素*/ h1{ color: #a12d30; background: #3cbda6; border-radius: 24px; } p{ font-size:30px; } </style> </head> <body> <h1>标题</h1> <h1>标题</h1> <p>段落</p> </body> </html> - 类选择器 class：
<!DOCTYPE html> <html> <head> <title>Title</title> <style type="text/css"> /*类选择器的格式 .class的名称{} 好处：可以多个标签归类，是同一个class,可以复用,可以跨标签 */ .head1{ color: red } .head2{ color: blue } </style> </head> <body> <h1 class="head1">标题1</h1> <h1 class="head2">标题2</h1> <h1 class="head2">标题3</h1> <p class="head2">段落</p> </body> </html> - id选择器：
<!DOCTYPE html> <html> <head> <title>Title</title> <style type="text/css"> /*id选择器的格式 #id名称{} id必须保证全局唯一 优先级：id选择器 > 类选择器 > 标签选择器 （不遵循就近原则） */ #head1{ color: blue } .style1{ color: green; } h1{ color: red; } </style> </head> <body> <h1 id="head1">标题1</h1> <h1 class="style1">标题2</h1> <h1 class="style1">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>
优先级：id选择器 > 类选择器 > 标签选择器 （不遵循就近原则）
层次选择器
-
后代选择器：在某个元素的后面(即改变某个标签内部的所有标签)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> /* p{ background-color: aqua; } */ /* 后代选择器 */ /* body p{ background-color: red; } */ li p{ /*后代标签选择器中间使用空格*/ /*改变li标签内部的p标签*/ background-color:green; } </style> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <li> <p>段落4</p> </li> <li> <p>段落5</p> </li> <li> <p>段落6</p> </li> <p>段落7</p> </body> </html> -
子选择器：一代，只改变直接存在于标签内部的标签，标签内部再嵌套的不受影响。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> /* 子选择器 */ body>p{ /*子选择器标签使用 > 号*/ /*改变body直接包含的p标签（段落1、2、3、7）*/ background-color: hotpink; } </style> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <li> <p>段落4</p> <li> <p>孙级段落</p> </li> </li> <li> <p>段落5</p> </li> <li> <p>段落6</p> </li> <p>段落7</p> </body> </html> -
相邻选择器：只改变位于自己下面一个相同的标签改变（自身不变）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> /*相邻兄弟选择器：只有一个，且是位于自己下面的一个(此时只有段落3,8被改变)*/ .active+p{ /*class与标签之间使用 + 号*/ background-color: #a13d30; } </style> </head> <body> <p>段落1</p> <p class="active">段落2</p> <p>段落3</p> <li> <p>段落4</p> <li> <p>孙级段落</p> </li> </li> <li> <p>段落5</p> </li> <li> <p>段落6</p> </li> <p class="active">段落7</p> <p>段落8</p> </body> </html> -
通用选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> /*通用兄弟选择器:当前选中标签向下的所有兄弟标签（只有与所选标签相同的标签相同标签才会发生改变）*/ .active~p{ /*class与标签之间使用 ~ 号*/ background-color: red; } </style> </head> <body> <p>段落1</p> <p class="active">段落2</p> <p>段落3</p> <li> <p>段落4</p> <li> <p>孙级段落</p> </li> </li> <li> <p>段落5</p> </li> <li> <p>段落6</p> </li> <p class="active">段落7</p> <p>段落8</p> </body> </html>
结构伪类选择器
伪类：条件
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/*ul的第一个子元素*/
ul li:first-child{
background-color: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background-color: green;
}
/*
选中p1:定位到父元素，选择当前的第一个元素
选中当前p元素的父级元素，选择父元素的第一个子元素，并且是当前元素才生效，按顺序
*/
p:nth-child(1){
background-color: blue;
}
/* 选中父元素下的的第二个p元素，按类型 */
p:nth-of-type(2){
background-color: burlywood;
}
/*特效：当鼠标移动到a标签所属位置时，会产生一定变化*/
a:hover{
background-color: #00FFFF;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">123456</a>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器（常用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: #00FFFF;
text-align: center;
color: darkblue;
text-decoration: none; /*去除下划线*/
margin-right: 5px;
font:bold 20px/50px Arial;/*字体大小/行高*/
}
/* 存在id属性的元素
标签[所具备的属性]{} 如：a[id]{} a标签中带有id属性的
*/
a[id]{
background-color: yellow;/*此时改变的是1、10 两个标签内容*/
}
/*属性名=属性值（正则）
等号是绝对等于
*= 是包含这个元素
^= 是以这个开头
$= 是以这个结尾
*/
a[id=second]{ /*选中id="second" 的值*/
background-color: #7FFFD4;
}
a[class*=links]{
background-color: #8A2BE2;
}
/* 选中herf中以http开头的元素 */
a[href^=http]{
background-color: #00FFFF;
}
/* 以pdf结尾 */
a[href$=pdf]{
background-color: #5F9EA0;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="https://www.runoob.com/ class="links item active" target="_blank" title="test" id="second">2</a>
<a href="../index.html" class="links item">3</a>
<a href="../index2.html" class="links item">4</a>
<a href="abc" class="links item">5</a>
<a href="abc.png" class="links item">6</a>
<a href="123.jpg" class="links item">7</a>
<a href="abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="123.doc" class="links item last" id="last">10</a>
</p>
</body>
</html>
