一、css概述
css是层叠样式表（Casading Style Sheets）用来定义网页的显示效果。可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：css将网页内容和显示样式进行分离、提高了显示功能。
那么css和Html是如何在网页代码中相结合的呢？
通过四种方式
1、style属性方式：
利用标签中style属性来改变每个标签的显示样式
例如：
<div style="background-color:#FF0000"; color:#FFFFF>
P标签段落内容
</div>
该方式比较灵活，但是对于多个相同的标签的同一样式定义比较麻烦，适合局部修改。
2、style标签方式：（内嵌方式）
在head标签内加入style标签，对多个标签进行统一修改 -->该方式可以对单个页面的样式进行统一设置，单对于局部不够灵活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标识，type="text/css"是css样式进行解析
区域的一个划分用{}包起来。
一般这样的样式在页面一加载的时候就显示出来，最好是放到head里面
div{} 指：整个div区域都是一样的背景色，下面body里面的div有自己的背景色和字体颜色，所以会覆盖，但是其他的div区域仍然是保持大括号内的颜色
-->
<style type="text/css">
div{
background-color: darkcyan
}
</style>
</head>
<body>
<!--
css和html相结合的第一种方式。
1、每一个html标签中都有一个style样式属性，该属性的值就是css代码
2、使用style标签的方式，一般都定义在head标签中。（）
-->
<!-- background-color指的是背景颜色，字体颜色需要增加的话用分号隔开，color表示-->
<div style="background-color: coral;color: #22dc23">这是一个div区域</div>
<div>这是一个div区域2</div>
<span>span区域1</span>
<span>span区域2</span>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
</body>
</html>
页面显示效果：
3、第三种方式：把css封装成一个文件然后导入
需求：
分别给div区域、span区域、p区域以及字体进行上色
思路：
|-- div、span以及P区域创建不同的css文件，进行<style>
|-- 用1.css文件进行导入
|-- 最后的html文件，只需要导入1.css文件即可
=====这样做的优势在于，就算后面增加不同的区域，只需要修改1.css文件即可，而不需要动HTML文件====
------>css.html文件<------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--style标识，type="text/css"是css样式进行解析 区域的一个划分用{}包起来。 一般这样的样式在页面一加载的时候就显示出来，最好是放到head里面 div{} 指：整个div区域都是一样的背景色，下面body里面的div有自己的背景色和字体颜色，所以会覆盖，但是其他的div区域仍然是保持大括号内的颜色 --> <style type="text/css"> @import "1.css"; 重点！！！ </style> </head> <body> <!-- css和html相结合的第一种方式。 1、每一个html标签中都有一个style样式属性，该属性的值就是css代码 2、使用style标签的方式，一般都定义在head标签中。（） --> <!-- background-color指的是背景颜色，字体颜色需要增加的话用分号隔开，color表示--> <div>这是一个div区域</div> <div>这是一个div区域2</div> <span>span区域1</span> <span>span区域2</span> <p>这是一个段落1</p> <p>这是一个段落2</p> </body> </html> ---------->1.css文件<------- @import url(div.css); @import "span.css"; @import "p.css"; ------>div.css文件<------- div{ background-color: #0f0f8b } span{ background-color: chartreuse; } ------>span.css文件<------- span{ background-color: deeppink; }
总结css代码格式
选择器名称 {属性名：属性值；属性名：属性值；......}
属性与属性之间用分号隔开
属性与属性值之间用冒号连接
如果一个属性有多个值的话，那么多个值用空格隔开
二、基本选择器&优先级
A、选择器：
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器共有三种：
a）html标签名选择器，使用的就是HTML的标签名
b）class选择器（类选择器）。其实使用的标签中的class属性
c）id选择器。其实使用的是标签中的id属性
每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用
1、class选择器
|-- 相同标签中对部分标签相同样式进行加载
|-- 不同标签对相同样式进行加载
|-- 在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。
2、id选择器
|-- 优先级：标签选择器<类加载器<id选择器<style属性
|-- 在标签中定义id属性并赋值。通过 标签名#id值 对该标签进行样式设置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: aquamarine; color: azure; } /*通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的*/ #qq{ background-color: #030701; color: azure; } /*预定样式实现动态的加载 所有标签中类名称为"haha"的都可以加载 */ .haha{ background-color: #ff2a34; color: #7aff2d; } </style> </head> <body> <div id="qq">这是一个div区域</div> <div class="haha" id="qq">这是一个div区域2</div> <span id="qq" >span区域1</span> <span class="haha">span区域2</span> <p id="qq" >这是一个段落1</p> <p class="haha">这是一个段落2</p> </body> </html>
三、并联选择器&组合选择器
1、关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
例：
p {color:#00FF00; }
p b {color:#00FF00; }
<p>p标签<b>刘德华</b>段落样式</p>
<p>p标签段落</p>
2、组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器
p,div{ color:#00FF00;}
<p>p标签显示段落</p>
<div>div标签显示段落</div>
注：多个不同的选择器要用逗号隔开
3、伪元素选择器
其实就是在html中预先定义好的一些选择器。称为伪元素。是因为css的术语。
格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
a:link 超链接未点击状态
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态（未点击）
a:active 点击超链接时的状态
使用顺序 L - V - H - A
p:first-line 段落的第一行文本
p:first-letter 段落的第一个字母
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span b{ /*关联选择器：选择器中的选择器*/ background-color: #030701; color: azure; } /*组合选择器 对多种选择器进行相同的样式修改*/ .haha,div,b{ background-color: #a41313; color: #030701; } /*伪元素选择器演示*/ /*1、超链接未点击状态*/ a:link{ background-color: #7aff2d; color: #eb3e51; text-decoration:none; font-size: 24px; } /*2、鼠标悬停(光标移到超链接上但是未点击)*/ a:hover{ background-color: #030701; color: rgba(122, 255, 45, 0.95); text-decoration:none; font-size: 32px; } /*3、点击效果*/ a:active{ background-color: #ff2a34; color: rgba(3, 7, 1, 0.95); text-decoration:none; font-size: 38px; } /*4、访问后效果*/ a:visited{ background-color: #2948ff; color: rgba(249, 237, 23, 0.95); text-decoration-line: line-through; } /*5、段落的第一个字母*/ p:first-letter{ font-size: 33px; color: #2950f9; } div:hover{ background-color: #030701; color: rgba(122, 255, 45, 0.95); } </style> </head> <body> <hr/> <a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a> <hr/> <div id="qq">这是一个div区域<b>b区域</b></div> <div class="haha" id="qq">这是一个div区域2</div> <span>span<b>1</b></span> <span class="haha">span区域2</span> <p id="qq" >这是一个段落1</p> <p class="haha">这是一个段落2</p> </body> </html>