css 選擇器和屬性
css概述:
css(Cascading Style Sheet)層疊樣式表，是對html進行樣式修飾的語言。
css即樣式定義如何顯示 HTML 元素
樣式通常儲存在css檔案中,解決了內容(html)與表現(css)分離的問題
如果有多個css同時修飾一個html檔案,那麼css衝突的部分(即多個樣式都修飾一個html標籤的內容),會使用優先順序高的樣式,不衝突的部分,共同修飾,如下圖所示
1 css的作用
- css修飾html,使得html更美觀
- html的內容(html)與樣式(css)相分離,便於後期維護
- html和css分開,同一個樣式可用於多個html中,提高程式碼重用性
2語法
selector {property1: value;property2: value} selector要改變樣式的html元素,即標籤 ,花括號包圍宣告,屬性和值之間用冒號隔開,多個屬性之間用分號隔開,最後的分號可加可不加, 為了便於後期維護,還是加上分號較好 顏色值:可以用單詞red orange等 也可以用rgb16進位制的值,如#ff0000 代表紅 還可以使用color:rgb(255,0,0)或者color:rgb(100%,0%,0%)來表示紅色 如果值為多個單詞,使用雙引號 字型大小要記得加單位px,(html可不加,預設為px),如font-size:50px
3 html中加入css的四種方式
方式1,內嵌式,將css的程式碼嵌入到html標籤語句中,html每個標籤都有style屬性,將style屬性的值設為css的表達方式即可,如下
<div style="color:blue;font-size:50px" > helloworld<div>
<!--css嵌入到html標籤,修飾這個標籤-->方式2,內部樣式,使用<style></style>標籤,屬性type的值為"text/css",包裹住要編寫的標籤樣式(css程式碼),程式碼多的時候不建議使用,因為瀏覽器從上往下載入,程式碼多會影響載入速度,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css" >
div{ <!--方式2,內部樣式-->
color:red;
font-size:60px;
}
</style>
<title>css的引入</title>
</head>
<body>
<div> helloworld</div>
<div> <span>world</span> <span>hello</span></div>
</body>
</html>方式3,鏈入外部樣式,在html中使用標籤<link />將外部樣式(css檔案)引入到html中,這種方式推薦使用
<link/>鏈入外部檔案標籤 ,屬性
rel:不認識這個屬性,引入css的時候將該屬性設為"stylesheet"
type:引入的型別,引入css值為"text/css"
href:引入css的路徑
如下,定義html中的<div></div>標籤內容的樣式,css檔案
div{
color:red;
font-size: 50px;
}在html中引入css檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--方式3,引入外部檔案,可放到</body>標籤的後面-->
<link rel="stylesheet" type="text/css" href="css/embeed.css" />
<title>css的引入</title>
</head>
<body>
<div> hello world</div>
<div> <span>world</span> <span>hello</span></div>
</body>
</html>方式四:.@import方式,使用<style></style>標籤中設定type屬性值為"text/css",包裹住@import語句,形式如下
<style type="text/css">
@import url("css檔案地址")
</style>css檔案不變,下面是html通過方式四引入css的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--方式4,通過@import方式引入外部css檔案-->
<style type="text/css">
@import url("css/embeed.css")
</style>
<title>css的引入</title>
</head>
<body>
<div> hello world</div>
<div> <span>world</span> <span>hello</span></div>
</body>
</html>四種引入css修飾html的方式的區別:
方式1每次只能修飾單個標籤,且程式碼複用性低,不易維護
方式2,如果css程式碼多,會導致瀏覽器載入速度慢,可以將css程式碼部分放到</body>標籤後,先載入html,再載入css部分
方式3,鏈入外部css檔案,所有瀏覽器支援,可講鏈入語句放到</body>後面,瀏覽器先載入html,再載入css,提升速度,支援javascript動態修改
方式4,有些瀏覽器不支援,載入完html後才載入css,可提升速度,不支援javascript動態修改css
4 css中的註釋樣式
css中的註釋樣式如下:
/*
註釋內容
*/
html中的註釋樣式如下:
<!-- 註釋內容-->注意:在html中以內部方式2引入css後,在css程式碼部分即<style type="text/css"></style>之間的註釋屬於css的註釋!
一 選擇器
選擇器的作用是用來定位到某個或者某組標籤的,因為你要修飾的標籤和你寫的修飾程式碼總要一一對應吧
1 基本選擇器
1元素選擇器:
元素選擇器的作用是,對html檔案中同一種元素(即同一種html標籤)設定樣式,語法為:html標籤名{css屬性:值;css屬性:值;}
比如要將段落設定成灰色:
p {color:gray;}示例:
css檔案:
/*
元素選擇器
*/
div{
color:red;
font-size: 20px;
}
span{
color:pink;
font-size: 30px;
}html檔案:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div> hello world 中國加油</div>
<div> <span>hello world</span> <span>中國加油</span> </div>
<div> hello world 中國加油</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic1.css" />
</html>
2 ID選擇器,以一種獨立於文件元素的方式來指定樣式,html標籤都有一個id屬性,id可以用來區分同種標籤也可以用來區分不同標籤
我們可以給html標籤設定id值,然後用id選擇器來指定它的樣式,注意id具有唯一性,第一個字元不能使用數字,語法:
#id值{css屬性:值}示例:
/*
ID選擇器,一次只能設定一個
*/
#div1{
color:red;
font-size: 20px;
}
#div2 {
color: yellow;
font-size:10px;
}
#span1{
color:pink;
font-size: 50px;
}
#span2{
color:pink;
font-size: 50px;
}對應的html檔案為:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id選擇器</title>
</head>
<body>
<div id="div1"> hello world 中國加油</div>
<div id="div2"> hello world 中國加油</div>
<div id="div3"> <span id="span1">hello world</span> <span id="span2">中國加油</span> </div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic2.css" />
</html>
2 類(class)選擇器,html的標籤有個屬性class,意思是可以設定標籤的分組,即便不同種類的標籤,也可以分為同一組,注意:類名的第一個字元也不能是數字
語法:
.class值{css屬性:值}
說明: .是英文字元的點示例:css檔案
/*
類選擇器,
*/
.div1 {
color:red;
font-size:20px;
}
.div2{
color:pink;
font-size:40px;
}
html檔案:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
</head>
<body>
<div id="div1" class="div1"> <!-- 第1行" -->
hello world
</div>
<div id="div2" class="div1"><!-- 第2行 -->
hello world
</div>
<div id="div3"> <!-- 第3行 -->
<span id="span1" class="div1"> <!-- 第3行 第1個-->
hello world
</span>
<span id="span2" class="div2"> <!-- 第3行 第2個-->
中國加油
</span>
</div>
<div class="div2"> <!-- 第4行 -->
hello
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic3.css" />
</html>
說明:選擇器的優先順序:id選擇器>類(class)選擇器>元素選擇器
2 屬性選擇器
如果一個標籤具有多個屬性,而根據屬性值的不同,來選擇該某個標籤,使用屬性選擇器
語法1
用法1: *[某屬性]{css屬性:值} 對具有該屬性的所有元素設定樣式,星號可省略如:
*[name]{color:red;} 將所有具有name屬性的元素都設定成紅色
語法2
用法2: 某種標籤[某屬性1][某屬性2]{css屬性:值} 對有(一個或)多個該屬性的某種標籤修改樣式 如:
a[href] {color:red;} 有的<a>標籤沒設定href屬性,有的設定了href屬性,將設定了href的標籤選中修改為紅色語法3:
用法3: 標籤型別[屬性1="屬性值"][屬性2="屬性值"]{ css屬性:值} 可以根據(一個或)多個屬性值來選擇某種型別標籤示例:
/*
屬性選擇器,
*/
a[name][href]{
color:yellow;
font-size:15px;
}
input[type="text"]{
background-color: green;
}html檔案:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a name="連結1" href="#">連結1 </a> <br/>
<a name="連結2" >連結2 </a> <br/>
<div>
<span>
輸入
</span>
<span>
<input type="text" name="input" >
</span>
</div>
<div>
<span>
密碼
</span>
<span>
<input type="password" name="passwd" >
</span>
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic4.css" />
</html>
3 偽元素選擇器
偽元素用於向某些選擇器設定特殊效果,常用於連結標籤,即<a></a>標籤,其他關於偽元素的內容請訪問:http://www.w3school.com.cn/css/css_pseudo_elements.asp
<a></a>標籤應用偽元素選擇器的格式:
靜止狀態 a:link{css屬性}
懸浮狀態 a:hover{css屬性}
觸發狀態 a:active{css屬性}
完成狀態 a:visited{css屬性}示例:css
/*
偽元素選擇器
*/
a:link {
color:red;
}
a:hover {
color:black;
}
a:active {
color:yellow;
}
a:visited{
color:green;
}html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http:www.baidu.com" > 轉向百度</a>
</body>
<link rel="stylesheet" type="text/css" href="css/basic5.css" />
</html>
這是滑鼠指著此連結的時候,即懸浮狀態,是黑色的
4 層級選擇器
根據優先順序,id選擇器>class選擇器>元素選擇器,依次選擇層級關係
語法:父級選擇器 子級選擇器 ...{ css屬性:值}
示例:css
/*
層級選擇器,根據優先順序,id選擇器>class選擇器>元素選擇器,可以依次設定層級關係
*/
#div1 .word { /* 只選到某行 */
color:red;
background-color: green;
}
#div1 .ppt span{ /* 選到了某行的某個小標籤*/
color:black;
background-color:yellow;
}
#div2 .ppt{
color:orange;
background-color: blue;
}html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1">
<div class="word">
<span> 第1塊第1行</span>
</div>
<div class="ppt">
<span> 第1塊第2行</span>
</div>
</div>
<div id=div2>
<div class="word">
<span> 第2塊第1行</span>
</div>
<div class="ppt">
<span> 第2塊第2行</span>
</div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic6.css" />
</html>
更過內容可訪問(http://www.w3school.com.cn/css/css_selector_descendant.asp)
二 常用屬性
css是用來修飾html元素的,有很多屬性,下面介紹下常用的屬性
1 文字屬性
以下為設定文字的常用屬性
font-size 設定字型的尺寸。單位必須要寫,px畫素, 或者用em,1em 的預設尺寸是 16 畫素,轉換關係pixels/16=em
font-family 設定字型型別。
font-size-adjust 當首選字型不可用時，對替換字型智慧縮放。
font-stretch 對字型水平拉伸。
font-style 設定字型風格。
font-weight 設定字型的粗細。
示例:這段程式碼css引入的方式為在html中使用<style></style>標籤,設定屬性type值為"text/css",
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css字型屬性</title>
</head>
<body>
<div>
<span> 我們要加油!</span>
</div>
</body>
<style type="text/css">
/* 引入css的這一部分的註釋方式為css的註釋方式*/
span{
/* font-size: 16px; */
font-size:3em;
font-family: 楷體;
}
</style>
</html>2 文字屬性
CSS 文字屬性可定義文字的外觀。文字屬性的作用是可以設定文字顏色,有無下劃線,字元間距,對齊方式,縮排等樣式,列舉常用屬性:
color 文字顏色,值為顏色名稱單詞如red,或者十六進位制數字如#ff0000(代表紅),或rgb數值,如rgb(255,0,0)代表紅
text-decoration 向文字新增修飾。值為overline在文字上方畫一條橫線,ling-through在文字中間畫一條橫線,underline下劃線,none本屬性什麼也不設定
text-align 元素中文字的對齊方式,值為 left,center,right
line-height 行間距。值為畫素值或者百分比,當前字型尺寸的百分比,或者長度,如1cm
text-indent 縮排元素中 文字的首行。值為長度,如1cm,2cm或者百分比,這個段落長度的百分比
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css文字屬性</title>
</head>
<body>
<p>
鵝鵝鵝， <br/>
曲項向天歌。 <br/>
白毛浮綠水， <br/>
紅掌撥清波。 <br/>
</p>
</body>
<style type="text/css">
p{
color: green;
text-decoration: underline;
text-align: center;
line-height: 1cm;
text-indent: 0.5cm;
}
</style>
</html>
3 背景屬性
css既可以用純色作背景，也可以用背景影象做背景或做出複雜的效果
設定格式為
body{背景屬性:屬性值;}常用的屬性:
background-color:背景顏色
background-image:背景圖片值為url(“圖片地址”);
background-repeat:背景影象的平鋪方式,預設橫向縱向平鋪把網頁佔滿,值為repeat橫向縱向平鋪no-repeat:不平鋪repeat-y：縱向平鋪repeat-x橫向平鋪
background-position 背景影象的起始位置。值可以是x% y%,也可以是xpos ypos,任何css支援的單位均可,或者使用left top等方式也可以設定
示例: 因為網頁背景色設成了紅色,為了能看清網頁的字型,在<div></div>標籤中引入了css,對文字設定了顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景屬性</title>
</head>
<body>
<div style="color:black">hello</div>
</body>
<style type="text/css">
body{
background-color: red;
background-image: url("images/01.png");
background-repeat: repeat-y;
background-position: 80px 80px;
}
</style>
</html>
4 列表屬性
CSS提供的 列表屬性可以放置、改變列表項標誌，還可以把圖片當作列表項標誌。
常用的列表屬性:
list-style-type:列表項前的小標誌,值為decimal以數字作為標記,none無標記,decimal-leading-zero以0開頭的數字,如01,02...還有好多,none不設定小標誌
list-style-image:列表項前的小圖片,值為url(“圖片地址”)
list-style-position:規定列表中列表專案標記的位置,值為indise和outside,簡單理解為是否相對與上一行的非列表項是否有縮排,預設為outside
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css列表屬性</title>
</head>
<body>
<ul>
<li>青菜</li>
<li>蘿蔔</li>
<li>白菜</li>
</ul>
</body>
<style type="text/css">
ul{
list-style-type: decimal-leading-zero;
list-style-image: url("images/02.png");
list-style-position: inside;
}
</style>
</html>
5 尺寸屬性
設定元素的高度和寬度,以及行間距等,常用的屬性如下:
height:高度 值為length,可以是畫素值如10px,1cm等單位,或者百分比(塊級物件的百分比作為高度),如50%
width:寬度 值跟height設定方法一樣
line-height:行間距 值為length 固定的行間距,如1cm 或者數字(數字與當前字型尺寸的乘積作為行間距)如1,2,也可以設定畫素值,如10px,或者百分比(當前字型尺寸的百分比作為行間距),如50%
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css尺寸屬性</title>
</head>
<body>
<div id="div1">
helloworld
</div>
<div id="div2">
helloworld
</div>
<div id="div3">
helloworld
</div>
</body>
<style type="text/css">
#div1{
height:50px;
width:50px;
}
#div2{
height:50px;
width:50px;
line-height: 30px;
}
#div3{
height:60px;
width:50px;
line-height: 90px;
}
</style>
</html>
一般情況下不用設定行間距屬性吧
盒子(框)模型
html中有些標籤可以多層巢狀,比如<div></div>標籤,假設將這種標籤看作是一個盒子,盒子裡面裝有東西,就可以用上盒子模型了,盒子模型可以用來排版佈局.
如下圖示意:
一 一來看,先看邊框border,上述的盒子分為兩個邊框,內邊框和外邊框,可以通過邊框的屬性設定元素邊框的樣式、寬度和顏色
說明:外層背景適用於由元素邊框和外邊框組成的區域
邊框border的常用屬性如下:
border-width:邊框的寬度
border-color:邊框的顏色
border-style:邊框的線型
border-top:上邊框
border-bottom:下邊框
border-left:左邊框
border-right:右邊框
再看內邊距: 內邊距指的是邊框和內容區之間。
內邊距屬性 padding ,它定義元素外邊框與元素內容之間的空白區域,看下padding的取值,padding 屬性接受長度值(包括畫素,em)或百分比值，但不允許使用負值,
取值形式:
10px;代表上下左右都是10px
1px 2px 3px 4px;四個值對應的順序是上 右 下 左
1px 2px;如果只有兩個值那麼第一個值代表上下,第二個值代表左右
1px 2px 3px;如果三個值,第一個代表上,第二個代表左右,第三個代表下
padding-top: 該屬性還可以單獨設定每個邊,還有padding-right, padding-bottom, padding-left
外邊距:代表者外邊框和其他元素之間的距離,
外邊距屬性margin,看下margin的取值,margin屬性接受任何長度單位，可以是畫素、英寸、毫米或 em。
取值形式:
10px;代表上下左右都是10px
1px 2px 3px 4px;四個值對應的順序是上右下左
1px 2px;只有兩個值的話,第一個值對應上下,第二個值對應左右
1px 2px 3px;設定為三個值的話,第一個值對應上,第二個值對應左右,第三個值對應下
margin-top:該屬性還可以單獨設定每個外邊距,類似的還有margin-bottom,margin-left,margin-right
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<body>
<div class="wai">
<div class="nei" >hello</div>
</div>
</body>
<style type="text/css">
.wai{
width:120px;
height:120px;
border-width: 1px;
border-color: green;
border-style:solid;
padding: 10px 20px 30px 40px;
margin: 20px 40px;
background-color: yellow;
box-sizing:border-box;
}
.nei{
width:60px;
height:80px;
color: red;
border-style: solid;
background-color: orange;
}
</style>
</html>
注意:
1盒子設定padding,設定不當的時候,會改變盒子的形狀,不設定 padding的盒子形狀不會改變
2在某層盒子中加入下面三行程式碼,即便設定了padding也不會被撐爆,超過盒子的寬或者高時,維持在不被撐爆的樣子
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;3盒子外觀的寬度=2*border的寬度+2*padding的寬度+內容的寬度,預設兩邊border厚度相同,兩邊的padding寬度也相同,計算高度同理
參考:小猴子javaWeb視訊