CSS3 上篇
一、简介
是一个层叠级联样式表（Cascading Style Sheet）
作用：美化网页
优势：
1、内容和表现分离
2、网页结构表现统一、可以实现复用
3、样式十分丰富
4、可以单独使用css文件
5、利用SEO，容易被搜索引擎收录
二、快速入门
语法：(每一个声明，最好使用分号结尾)
选择器{
声明1;
声明2;
声明3;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范，<stype> 可以编写css代码 每一个声明，最好使用分号结尾--> <!--语法 选择器{ 声明1; 声明2; 声明3; } --> <style> h1{ color: red; } </style> </head> <body> <h1>我是标题</h1> </body> </html>
三、CSS的导入方式
1、行内样式
在标签元素中
<h1 style="color: red">我是标题</h1>
2、内部样式
在head标签中
<head> <meta charset="UTF-8"> <title>Title</title> <!--，内部样式--> <style> h1{ color: aqua; } </style> </head>
3、外部样式
在head标签中，利用link标签引入外部的css样式文件
<link href="../css/style.css" rel="stylesheet">
它们的优先级：就近原则（谁离编写代码内容进，谁的优先级就越高）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--，内部样式--> <style> h1{ color: aqua; } </style> <!--外部样式--> <link href="../css/style.css" rel="stylesheet"> </head> <body> <!--行内样式：在标签元素中，编写一个style属性，编写样式即可--> <h1 style="color: red">我是标题</h1> </body> </html>
拓展：外部样式的两种写法
链接式：link
<link href="../css/style.css" rel="stylesheet">
导入式（是CSS2.1特有的）：@import url（“css文件地址”）
<head> <meta charset="UTF-8"> <title>Title</title> <style> @import url("../css/style.css"); </style> </head>
区别：
1、link和import的语法结构不同，
2、link是html标签，只能放入html源代码中使用
import可以看作css样式，作用是引入css样式功能
3、import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(css文件路径地址)”；
本质上两个使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link比较多，也推荐使用link
四、CSS选择器
作用：选择页面上的某一个或者某一个元素
1、基本选择器
优先级 ：id>class>标签
a、标签选择器 ：会选择到页面上相同的标签元素
<head> <meta charset="UTF-8"> <title>Title</title> <!--标签选择器 会选择到页面上相同的标签元素--> <style> h1{ /* color: yellow;或者*/ color: #3aaa11; //设置字体颜色 } p{ font-size: 10px; //字体大小 } </style> </head> <body> <h1>我是标题</h1> <p>我是标题1</p> <h1>我是标题2</h1> </body> </html>
b、类选择器（class）
格式：.class的名称{ }
好处：可以多个标签归类，是同一个class，可以复用
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器 格式：.class的名称{ } 好处：k可以斗个标签归类，是同一个class，可以复用*/ .text{ color: aquamarine; } .title{ color: #3aaa11; } </style> </head> <body> <h1 class="title">我是标题</h1> <h1 class="text">我是标题1</h1> <h1 class="title">我是标题2</h1> <p class="title">我是标题2</p> </body> </html>
c、id选择器
id必须保证全局唯一，不能重复
格式 ：#id名称{ }
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器： id必须保证全局唯一 格式 ：#id名称{}*/ #t1{ color: yellow; } .t2{ color:orange; } h1{ color: aqua; } </style> </head> <body> <h1 id="t1" >我是标题</h1> <h1 class="t2" >我是标题1</h1> <h1 class="t2">我是标题2</h1> <h1>我是标题2</h1> </body>
2、层次选择器
a、后代选择器 （如：祖爷爷、爷爷、父亲、自己）
在某个元素的后面
/*后代选择器*/
body p{
color: aquamarine;
}
b、子选择器 一代，儿子
/*子选择器*/
body >p{
color: orange;
}
c、相邻选择器（相邻兄弟选择器） 同辈 ：只有一个，相邻（向下）
/*相邻选择器（相邻兄弟选择器）
只有一个，相邻（向下）*/
.active + p{
background: red;
}
d、通用选择器（通用兄弟选择器）：当前选中的向下的所有兄弟元素
/*通用选择器(通用兄弟选择器)
当前选中的向下的所有兄弟元素
*/
.active ~p{
background: aqua;
<head> <meta charset="UTF-8"> <title>层次选择器</title> <style> /*后代选择器*/ /* body p{ color: aquamarine; }*/ /*子选择器*/ body >p{ color: orange; } /*相邻选择器（相邻兄弟选择器） 只有一个，相邻（向下）*/ .active + p{ background: red; } /*通用选择器(通用兄弟选择器) 当前选中的向下的所有兄弟元素 */ .active ~p{ background: aqua; } </style> </head> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <p>p4</p> <ul> <li> <p>5</p> </li> <li> <p>6</p> </li> <li> <p>7</p> </li> </ul> </body> </html>
3、伪类选择器
伪类：条件
/*ul第一个子元素*/
ul li:first-child{
background: aqua;
}
/*ul最后一个子元素*/
ul li:last-child{
background: orange;
}
/*只选择p1 ：定位到父元素，选择当前第一个元素
选择当前p元素的父级元素，选择父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
background:yellowgreen;
}
/*选择父元素下p元素的第二个类型*/
p:nth-of-type(2){
background: yellow;
}
<head> <meta charset="UTF-8"> <title>伪类选择器</title> <!--避免使用class，id选择器--> <style> /*ul第一个子元素*/ ul li:first-child{ background: aqua; } /*ul最后一个子元素*/ ul li:last-child{ background: orange; } /*只选择p1 ：定位到父元素，选择当前第一个元素 选择当前p元素的父级元素，选择父级元素的第一个，并且是当前元素才生效 */ p:nth-child(1){ background:yellowgreen; } /*选择父元素下p元素的第二个类型*/ p:nth-of-type(2){ background: yellow; } </style> </head> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <p>p4</p> <ul> <li>5</li> <li>6</li> <li>7</li> </ul> </body> </html>
4、属性选择器
1、 id和class结合
2、格式：标签名[选择器名]{ }
3、= 绝对等于、*= 包含这个元素、^= 以这个开头、$= 以这个结尾
<head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: yellowgreen; text-align: center; color: bisque; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /*让存在id的属性的元素，选中 格式：a[]{ } =绝对等于 *=包含这个元素 ^=以这个开头 $= 以这个结尾 */ /*a[id]{ background: yellow; }*/ a[id=t1]{ background: #ffffff; } /*class 中含有last的元素*/ a[class *="last"]{ background: orange; } /*选择href中以href开头的元素*/ a[href ^=http]{ background: blueviolet; } /*选择href中以png结尾的*/ a[href$=png]{ background: blue; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class=" first title" id="t1">1</a> <a href="#" class="title1" target="_blank" title="text">2</a> <a href="images/123.html" class="title2">3</a> <a href="image/123.png" class="title2">4</a> <a href="image/123.jpg" class=" last title2">5</a> <a href="abc" class="title2">6</a> <a href="/abc/text.doc" class="last title">7</a> </p> </body> </html>
