-
CSS是什么？
CSS 全稱 Cascading Style Sheets，翻譯過來就是層疊樣式表。如果說HTML是網(wǎng)頁 的結(jié)構(gòu)，那么CSS就是網(wǎng)頁化妝師。
-
CSS寫在哪里？
CSS 有三種寫法
1、直接寫在標(biāo)簽內(nèi)（行間樣式）
2、寫在 style 標(biāo)簽內(nèi)（內(nèi)嵌樣式）
3、使用外部 .css 文件（外鏈樣式）
css Cascading Style Sheet 層疊樣式表——修飾、美化網(wǎng)頁，化妝師
CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。 (就近原則)
行間樣式 > 內(nèi)嵌css樣式 > 外鏈css樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="外鏈的地址"> <!-- 外鏈樣式 -->
<style type="text/css">
div{
width:300px;
height:200px;
background:skyblue;
}/*內(nèi)嵌樣式*/
</style>
</head>
<body>
<!-- 行間樣式,優(yōu)先級(jí)最高(就近原則) -->
<div style="width:150px height:80px background:violet">1234</div>
</body>
</html>
CSS選擇器
-
選擇器是什么？
CSS 的選擇器是 CSS最基礎(chǔ)也是最重要的一個(gè)知識(shí)點(diǎn) ，很重要 -
選擇器權(quán)重
誰的權(quán)力大，就聽誰的，同理，選擇器權(quán)重也是一樣，誰的權(quán)重值高，應(yīng)用誰的。 -
選擇器用處
用于準(zhǔn)確的選中元素，并賦予樣式。
選擇方法
-
class選擇器
通過標(biāo)簽的 class 屬性 ，選擇對(duì)應(yīng)的元素 （ . 選擇） 借助了一個(gè)類的概念，一處定義，可以多處使用 -
id選擇器
通過標(biāo)簽的 id 屬性，選擇 對(duì)應(yīng)的元素（#選擇,id選擇器唯一） -
群組 選擇器
群組選擇器是可以同時(shí)選擇多個(gè)標(biāo)簽的選擇器（標(biāo)簽1，標(biāo)簽2...{樣式}） -
層次選擇器
層次選擇器分為，子代、后代、相鄰和兄弟等四種選擇器
基本選擇器
<style type="text/css">
/* *通配符選擇器 匹配任何元素 */
*{
margin:0;
padding:0;
}
/*元素選擇器 選擇相同的元素對(duì)相同的元素設(shè)置一種css樣式 選中頁面中所有的此元素*/
div{
width:100px;
height:100px;
background:blueviolet;
}
p {
width: 100px;
height: 100px;
background: red;
}
/* class選擇器 給標(biāo)簽設(shè)置一個(gè)class屬性，在寫樣式時(shí)，在class名字前面加個(gè).一般給具有相同屬性的元素設(shè)置同一個(gè)class */
.box{
width: 200px;
height: 100px;
background: silver;
}
/* id選擇器 給標(biāo)簽設(shè)置一個(gè)id屬性，在寫樣式時(shí)，在id名字前面加個(gè) # id在這就幾個(gè)中優(yōu)先級(jí)最高*/
#box1{
width: 200px;
height: 100px;
background: blue;
}
</style>
復(fù)雜選擇器
<title>復(fù)雜選擇器</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
/* 群組選擇器 對(duì)幾個(gè)有相同屬性的選擇器進(jìn)行樣式設(shè)置 兩個(gè)選擇器之間必須用逗號(hào)隔開*/
div,p{
width: 100px;
height: 100px;
background: blueviolet;
}
/* ~ 兄弟選擇器 操作的對(duì)象是該元素下的所有兄弟元素*/
p~div{
width: 100px;
height: 100px;
background: blueviolet;
}
/* > 子代選擇器 選擇某個(gè)元素下面的子元素*/
div>p{
width: 100px;
height: 100px;
background: blueviolet;
border:1px solid red;
}
/* + 相鄰選擇器操作的對(duì)象是該元素的同級(jí)元素選擇div相鄰的下一個(gè)兄弟元素選擇到緊隨目標(biāo)元素后的第一個(gè)元素*/
div+div{
background: blueviolet;
}
/*后代選擇器*/
div>ul li{
background: red;
}
</style>
偽類選擇器
<title>偽類選擇器</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration:none; /*超鏈接去除下劃線*/
}
/*鼠標(biāo)懸停其上的元素 這個(gè)一定要掌握*/
a:hover{
color:white;
}
/*link 未被點(diǎn)擊的鏈接*/
a:link{
background:blue;
}
/*已被點(diǎn)擊的鏈接*/
a:visited{
background:red;
}
/*鼠標(biāo)已經(jīng)再其上按下但是還沒有釋放的元素*/
a:active{
background: violet;
}
div:hover{
width:100px;
height:100px;
background: green;
color:gray;
cursor:default;/*手指*/
/*cursor: help;幫助*/
/*cursor: wait;*等待*!*/
/*cursor: default;!*默認(rèn)*!*/
}
</style>
復(fù)雜選擇器的優(yōu)先級(jí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>復(fù)雜選擇器的優(yōu)先級(jí)</title>
<style>
* {
margin: 0;
padding: 0;
}
div#box div ul.box1 li{
width: 50px;
height: 50px;
background: red;
}
#box .wrap1{
width: 50px;
height: 50px;
background: blueviolet;
}
</style>
</head>
<body>
<!--
復(fù)雜后代選擇器
1.先比id(最高位) class（中間位） tagName（個(gè)數(shù)位）
1 2 3
2.id選擇器個(gè)數(shù)不相等，id越多，優(yōu)先級(jí)越高
3.id選擇器個(gè)數(shù)相同,則看class,class多的優(yōu)先級(jí)高
4.class個(gè)數(shù)相等，就看tagName個(gè)數(shù)
-->
<div id="box">div1
<div class="box" id="box1">div2
<ul class="box1">
<li class="wrap1">1</li>
<li>2</li>
<li>3</li>
<li class="wrap2"></li>
</ul>
</div>
</div>
</body>
</html>
