web前端篇：CSS使用，樣式表特徵，選擇器
web前端篇：CSS使用，樣式表特徵，選擇器
1.CSS介紹
- CSS ：Cascading Style Sheet 層疊樣式表
- 做用 ：修飾和美化頁面元素，實現網頁排版佈局
2.CSS使用
1行內樣式/內聯樣式
特色 ：在具體的標籤中使用style屬性，引入CSS樣式代碼html
語法：前端
- <標籤 style="CSS 樣式聲明">
- CSS 樣式聲明 / 語句：
- 對當前元素添加樣式
- 語法：CSS 屬性 ：值；
- 注意：CSS 樣式聲明能夠是多條，<標籤 style="屬性:值；屬性:值；"
常見的CSS屬性web
設置字體大小：瀏覽器
1.屬性:font-size佈局
2.取值 以像素爲單位的數值，瀏覽器默認的字體大小是 16px字體
設置字體顏色:網站
1.屬性：colorurl
2.取值：顏色的英文單詞或RGM(數值,數值,數值)或#b0b0b0（十六進制）spa
設置背景顏色
- background-color
- 取值：顏色的英文單詞或RGM(數值,數值,數值)或#b0b0b0（十六進制）
<!--行內樣式--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="background: red;color:RGB(123,145,164);font-size: 19px;">asd</p> </body> </html>
2.文檔內嵌/內部樣式表
特色：將CSS代碼與具體的標籤相分離，在HTML文檔中使用標籤引入CSS代碼。
語法：
<style> 選擇器1 選擇器2 選擇器3 ... </style>選擇器：
1.使用文檔內嵌方式引入CSS樣式表時，實現告終構與樣式相分離，可是須要本身定義選擇器來匹配文檔中元素，爲其應用樣式。
2.做用 ： 匹配文檔元素爲其應用樣式。
3.語法：選擇器實際上由兩部分組成
選擇器（符）{
屬性 ：值；
屬性 ：值；
}et : 標籤選擇器/元素選擇器： 使用標籤名做爲選擇符，匹配文檔中全部的該標籤，並應用樣式 p { color :green; font-size :20px; }- 注意：能夠書寫在文檔中的任意位置，可是基於樣式優先的原則，通常寫在中。
3.外鏈方式/外部樣式表
- 定義外部的.css文件，在HTML中引入便可，真正實現文檔與樣式表分離。
- 語法：
- 在外部的樣式表中使用選擇器定義樣式；在HTML文檔中使用 引入CSS文件
3.樣式表特徵
1繼承性
- 繼承性
- 大部分的CSS屬性都是能夠被繼承的
- 子元素或者後代元素能夠繼承父元素中的樣式
- 全部的文本屬性均可以被繼承，塊元素的寬度與父元素保持一致
2.層疊性
容許爲元素定義多個樣式，共同起做用。
p{ color:red; background-color:blue; }
3.樣式表的優先級
- 從低到高
- 從低到高 ：
- 瀏覽器缺省設置 ：瀏覽器默認樣式
- 文檔內嵌/外鏈方式 ：在不發生樣式衝突時，樣式共同起做用；
若是發生樣式衝突，後來者居上，最後定義的樣式最終顯示 - 行內樣式的優先級最高
4.CSS選擇器
- 做用：規範頁面中哪些元素可以應用聲明好的樣式
- 目的 ：匹配頁面元素
1.標籤選擇器/元素選擇器
特色：將標籤名做爲選擇符，來匹配文檔中全部的該標籤，包含後代元素
語法：
標籤名{ 屬性：值 } 標籤名如a,divtext-decoration : none;取消下劃線
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: #aaffff; font-size:20px; } a{ text-decoration:none; } </style> </head> <body> <div>這是標籤</div> <a href="">點一下</a> </body> </html>
2.類選擇器
特色：經過元素的class屬性值進行匹配
語法：
.cl{ 樣式 } <p class="cl">p文本</p> 以英文.開頭，跟上class屬性值，中間沒有空格
建立文件 class-selector
建立幾個元素 div p span h1
使用類選擇器爲上述元素添加樣式
1. 文本大小爲24px
2. 背景顏色爲橘色
3. 文本斜體顯示 font-style : italic;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cl{
font-size:24px;
background-color: orange;
font-style:italic;
}
</style>
</head>
<body>
<div>這是標籤</div>
<p class="cl">p文本</p>
</body>
</html>
3.ID選擇器
id 做用：HTML中全部的元素都有一個id屬性，主要用來表示該元素在文檔中的標誌，具備惟一性。
id 選擇器：經過元素的id屬性值進行匹配
語法：
屬性值{ 樣式 }注意：一般網頁中外圍的結構化標籤，都使用id進行標識，具備惟一性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #seq{ width:100%; height:50px; background-color: pink; } </style> </head> <body> <span id="seq">這是一個span文本</span> </body> </html>
4.羣組選擇器
做用：爲多個選擇器設置共同的樣式。
語法：
選擇器1，選擇器2，選擇器3{ 樣式 } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,h1,p{ background-color: gray; margin:0;<!--外邊距爲0--> } </style> </head> <body> <h1>標題1</h1> <div>div</div> <p>p</p> </body> </html>
5.後代選擇器
做用：依託於元素的後代關係來匹配元素（既包含直接子元素，也包含後代元素）。
語法：
選擇器1 選擇器2{ 樣式 ｝在選擇器1對應的元素中匹配後代元素，後代元素需知足選擇器2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav span{
border-radius:2px;
background-color:RGB(204,204,204);
padding-left:10px;
}
</style>
</head>
<body>
<p id="nav">
<span>你好</span>
<span>
<span>在那裏</span>
</span>
<span>再見</span>
</p>
</body>
</html>
6.子代選擇器
做用：依託元素的子代關係進行匹配，只匹配直接子元素。
語法：
選擇器1>選擇器2 { ｝<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav>ul>li{ color:red; } </style> </head> <body> <div id ="nav"> <ul> <li>你好</li> <li>你好<span>good<span>good</span></span></li> </ul> </div> </body> </html>
7.假裝選擇器
分類：
- 超連接僞類選擇器
- 動態僞類選擇器
做用 ：
主要是針對元素的不一樣狀態去設置樣式
超連接的不一樣狀態
- 訪問前 :link
- 訪問後 :visited
- 激活（鼠標點按不鬆）:active
- 鼠標滑過 :hover
其餘元素具有
- 鼠標滑過 :hover
- 鼠標點按 :active
表單控件
- 獲取到焦點時的狀態 :focus
- 對文本框和密碼框而言，當用戶點擊輸入時，都視爲獲取焦點狀態
僞類選擇器須要與其餘選擇器結合使用，設置元素在不一樣狀態下的樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ color: #8e3fff; text-decoration:none; } a:hover{ color: #ff45aa; text-decoration:none; } a:visited{ color: greenyellow; text-decoration:none; } a:active{ color:blue; text-decoration:none; } </style> </head> <body> <a href="#">哈哈</a> </body> </html>
注意：若是要給超連接添加四種狀態下的樣式，必須按照如下順序書寫僞類選擇器
:link
:visited
:hover
:active
簡稱 「愛恨原則 LoVe / HAte 」
8.屬性選擇器
經過元素的tpye實現CSS。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type="text"]{ background-color: red; } </style> </head> <body> <input type="text"> </body> </html>
9.僞元素選擇器
- 在文本先後增長內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*在p標籤前添加元素*/
p::before{
content:"抽菸";
}
/*在p標籤後添加元素*/
p::after{
content:"燙頭";
}
</style>
</head>
<body>
<p>喝酒</p>
</body>
</html>
#設置文本第一個字符
#經過僞元素添加內部爲行內元素
5.選擇器的優先級
當多個選擇器的樣式同時應用到一個元素上時，要按照不一樣選擇器的優先級來應用樣式。
div{ color:red; } #box{ color:green; } .c1{ color:blue; } <div id="box" class="c1">文本</div>判斷選擇器的優先級，主要看選擇器的權重（權值）數值越大，優先級越高。
選擇器 權值 標籤選擇器 1 類選擇器/僞類 10 id選擇器 100 行內樣式 1000
若是是複雜的選擇器 （後代，子代），選擇器最終的權值是各選擇器權值之和
權重比較:
1.數選擇器數量： id 類 標籤 誰大它的優先級越高，若是同樣大，後面的會覆蓋掉前面的屬性
2.選中的標籤的屬性優先級用於大於繼承來的屬性，它們是沒有可比性
3.同是繼承來的屬性
3.1 誰描述的近，誰的優先級越高
3.2 描述的同樣近，這個時候纔回歸到數選擇器的數
6.練習題：
1.div和span標籤在網頁中的做用？
div將網站分割成獨立的邏輯區域division分割
span:小區域標籤，在不影響文本正常顯示的狀況下，單獨設置對應的樣式。
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span>內容</span>
</p>
2.CSS基礎選擇器和高級選擇器有哪些？
- 基礎選擇器 - 類選擇器 - 標籤選擇器 - id選擇器 - 高級選擇器 - 後代選擇器 - 子代選擇器 - 組合選擇器 - 交集選擇器 - 假裝選擇器 （link visited hover active） - 僞元素選擇器
3.盒子模型的屬性有哪些？並說明屬性的含義，畫出盒子模型圖？
- width:內容寬度 - height:內容的高度 - border:邊框 - padding:內邊距 - margin:外邊距
4.如何讓文本垂直和水平居中?
<style>
div{
width:200px;
height:60px;
text-align:center;
line-height:60px;
}
</style>
<div>
wusir
</div>
讓行高等於盒模型的高度實現垂直居中
使用text-align:center;實現文本水平居中
5.如何清除a標籤的下劃線？
text-decoration:none; none:無線，underline:下劃線,overline:上劃線,line-through:刪除線.
6.如何重置網頁樣式？
html,body,p,ul,ol{
margin: 0;
padding: 0;
}
/*通配符選擇器 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
input,textarea{
border: none;
outline: none;
}
7.如何清除input和textarea標籤的默認邊框和外線？
border:0; outline:0;
8.在css中哪些屬性是能夠繼承下來的？
1.字體系列屬性： font-family:字體系列 font-weight:字體的粗細 font-size:字體的大小 fnot-style:字體的風格 2.文本系列屬性 text-indent:文本縮進 text-align:文本水平對齊 line-height:行高 word-spacing:單詞之間的間距 letter-spacing:中文或者字母之間的間距 text-transform:控制文本大小 color:文本顏色 3.元素可見性 visibility:控制元素顯示隱藏 4.列表佈局屬性 list-style列表風格，包括list-style-type,list-style-image 5.光標屬性： cursor:光標顯示爲什麼種形態 color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing
9.如何正確比較css中的權重？
若是選中了標籤
數選擇器的數量 id class 標籤 誰大優先級越高 若是同樣大，後面優先級越大
若是沒有選中標籤，當前屬性是被繼承下來，他們的權重爲0，與選中的標籤沒有可比性
都是繼承來的，誰描述的近，就顯示誰的屬性（就近（選中的標籤越近）原則），若是描述的同樣近，繼續數選擇器的數量。
!important 它設置當前屬性的權重爲無限大，大不過行內樣式的優先級
10.塊級標籤和行內標籤?
塊級標籤: 1.能夠設置高度，若是不設置寬度，默認是父標籤的100%的寬度 2.獨佔一行 p div ul ol li h1~h6 table tr form 行內標籤： 1.不能夠設置寬高 2.在一行內顯示 a span b strong em i 行內塊標籤 1.能夠設置寬高 2.在一行內顯示 input img
相關文章
- 1. web前端篇:CSS使用，樣式表特徵
- 2. WEB前端-CSS-選擇器&經常使用樣式/屬性
- 3. web前端篇:CSS選擇器
- 4. 【Web前端】CSS選擇器
- 5. 【Web 前端】CSS選擇器
- 6. web前端——css選擇器
- 7. 前端之css樣式（選擇器）。。。
- 8. 前端 之 CSS選擇器、樣式
- 9. css css樣式表 選擇器 聲明
- 10. CSS樣式表：三種使用方式、CSS選擇器
- 更多相關文章...
- • Web 品質 - 樣式表 - 網站品質教程
- • Scala Trait(特徵) - Scala教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章