CSS基礎
基本功能：目錄跳轉、代碼查看、結構化知識點
參看資料:http://www.w3school.com.cn/cssref/css_selectors.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="css/hw.css"/>
</head>
<body>
<div id="" align="center">
<a href="#一、初識CSS"><h1>一、初識CSS</h1></a>
<a href="#簡介css"><h3>簡介css</h3></a>
<a href="#定位css"><h3>定位css</h3></a>
<a href="#書寫css"><h3>書寫css</h3></a>
<a href="#基本屬性補充"><h3>基本屬性補充</h3></a>
<a href="#二、CSS選擇器"><h1>二、CSS選擇器</h1></a>
<a href="#元素選擇器"><h3>元素選擇器</h3></a>
<a href="#id選擇器"><h3>id選擇器</h3></a>
<a href="#class選擇器"><h3>class選擇器</h3></a>
<a href="#統配符"><h3>統配符</h3></a>
<a href="#層級選擇器css"><h3>層級選擇器css</h3></a>
<a href="#群組選擇器"><h3>群組選擇器</h3></a>
<a href="#顏色屬性補充"><h3>顏色屬性補充</h3></a>
<a href="#三、偽類選擇器"><h1>三、偽類選擇器</h1></a>
<a href="#link"><h3>link</h3></a>
<a href="#visited"><h3>visited</h3></a>
<a href="#hover"><h3>hover</h3></a>
<a href="#active"><h3>active</h3></a>
<a href="#Love Hate"><h3>Love Hate</h3></a>
</div>
<hr />
<a name="一、初識CSS"><h1>一、初識CSS</h1></a>
<a name="簡介css"><h3>簡介css</h3></a>
<p>
1、什么是CSS<br />
CSS是web標準中的表現標準，用設置網頁上的標簽的樣式（長什么樣，在哪）<br />
CSS代碼/文件，我們叫樣式表<br />
目前我們使用的是CSS3<br />
</p>
<a name="定位css"></a><h3>定位css</h3></a>
<p>
2、寫在哪 <br />
內聯樣式表：將CSS代碼寫在標簽的style屬性中<br />
內部樣式表：寫在head標簽中的style標簽的內容<br />
外部樣式表：寫在一個css文件中，通過heard中的link標簽來關聯<br />
優先級：內聯>內部=外部（內外無絕對，參照位置順序）<br />
</p>
<a name="書寫css"></a><h3>書寫css</h3></a>
<p>
3、怎么寫<br />
選擇器（屬性：屬性值；屬性：屬性值）<br />
選擇器： 用來選中需要設置樣式的標簽<br />
屬性：css屬性（CSS2中大約有兩百多個）<br />
屬性值：如果屬性值是數字，表示的是大小要在后面加px<br />
</p>
<a name="基本屬性補充"></a><h3>基本屬性補充</h3></a>
<p>
補充屬性：color -- 設置字體顏色，background-color -- 設置背景顏色，width -- 寬，height -- 高
</p>
<xmp>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--關聯外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/初識CSS.css"/>
<!--style標簽
專門用來設置樣式的標簽
-->
<style type="text/css">
div{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div style="color:aquamarine;">
我是div
</div>
</body>
</html>
</xmp>
<hr />
<a name="二、CSS選擇器"><h1>二、CSS選擇器</h1></a>
<a name="元素選擇器"><h3>元素選擇器</h3></a>
元素選擇器（標簽選擇器）：標簽名 <br />
選中所有的標簽名對應的標簽
<a name="id選擇器"><h3>id選擇器</h3></a>
id選擇器：#id屬性值<br />
每個標簽都有一個id屬性，整個html中，id的值必須唯一
<a name="class選擇器"><h3>class選擇器</h3></a>
class選擇器：.class屬性值<br />
每個標簽都有一個class屬性
<a name="統配符"><h3>統配符</h3></a>
通配符：*<br />
選中所有的標簽
<a name="層級選擇器css"><h3>層級選擇器css</h3></a>
層級選擇器：選擇器1 選擇器2 ...
<a name="群組選擇器"><h3>群組選擇器</h3></a>
群組選擇器：選擇器1，選擇器...
<a name="顏色屬性補充"><h3>顏色屬性補充</h3></a>
補充：<br />
css中的顏色值：<br />
1、顏色英語單詞<br />
2、十六進制顏色<br />
3、rgb值：rgb(紅，綠，藍)rgba(紅，綠，藍,透明度) - 透明度 0-1
<xmp>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 50px;
}
/*class選擇器*/
.c1{
color: beige;
background-color: olive;
}
/*元素選擇器*/
a{
background-color: yellow;
}
/*id選擇器*/
#a1{
color: #ff0000;
}
/*層級選擇器*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*群組選擇器*/
/*同時選中所有的h1標簽和所有的span標簽*/
h1,span{
background-color: pink;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<span id="">
我是span
</span>
<div id="">
<a href="">000</a>
<p></p>
</div>
<div id="all_a">
<a href="">111</a>
<a href="">222</a>
<a href="">333</a>
<a href="">444</a>
<a href="">555</a>
</div>
<a id="a1" href="" >我是a</a>
<a id="a2" href="" >我是a2</a>
<p class="c1">ppp</p>
<div id="" class="c1">
我是div
</div>
</body>
</html>
</xmp>
<hr />
<a name="三、偽類選擇器"><h1>三、偽類選擇器</h1></a>
偽類選擇器 ---- 選擇器：狀態
<a name="link"><h3>link</h3></a>
link:超鏈接的初始狀態 -- 一次都沒有訪問成功的時候的狀態
<a name="visited"><h3>visited</h3></a>
visited：超鏈接訪問后的狀態 -- 已經訪問成功之后的狀態
<a name="hover"><h3>hover</h3></a>
hover:鼠標懸停在標簽上對應的狀態
<a name="active"><h3>active</h3></a>
active:鼠標按住的狀態
<a name="Love Hate"><h3>Love Hate</h3></a>
給同一個標簽通過偽裝類選擇器給不同狀態設置不同的樣式的時候，要遵守愛恨原則
<xmp>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同時設置a標簽的所有狀態*/
a{
color: skyblue;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 40px;
}
a:active{
color: yellow;
}
#d1{
width: 100px;
height: 50px;
background-color: darkgreen;
}
#d1:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<a >百度一下</a>
<div id="d1" >
</div>
</body>
</html>
</xmp>
</body>
</html>
首頁展示
