自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解CSS(CascadingStyle Sheets)基本用法和選擇器知識

作者：IT共享者
開發(fā) 前端
相信做過網(wǎng)頁的對Css都不是很陌生，它可以幫助我們重鑄網(wǎng)頁中很多絢麗的特效，尤其是現(xiàn)在Css已經(jīng)發(fā)展3.0版本，很多功能更是豐富多彩，讓我們的開發(fā)時間不僅大大縮短，而且還可以輕松做出許多華麗的特效，需要注意的是，Css相當于Html的一個美化裝置，所以它必須依賴于Html才能發(fā)揮作用，那么今天我們就來深入了解下它吧。

[[348615]]

相信做過網(wǎng)頁的對Css都不是很陌生，它可以幫助我們重鑄網(wǎng)頁中很多絢麗的特效，尤其是現(xiàn)在Css已經(jīng)發(fā)展3.0版本，很多功能更是豐富多彩，讓我們的開發(fā)時間不僅大大縮短，而且還可以輕松做出許多華麗的特效，需要注意的是，Css相當于Html的一個美化裝置，所以它必須依賴于Html才能發(fā)揮作用，那么今天我們就來深入了解下它吧。

一、如何使用CSS
要想使用Css來增加Html的美觀，有三種方式：

1).頭部文件中定義

  1. <style> 
  2.     標簽的Css屬性 
  3. </style> 

2).導入CSS文件

  1. #創(chuàng)建一個Css文件，里面寫入樣式，然后導入 
  2. <link rel="stylesheet" type="text/Css" href="1.Css"> 

3).直接在標簽中定義

  1. <div style='width:120px;height:60px;background-color:red'></div>Css注釋 

注：與Html 不同，它的注釋方式是：/* Css語句*/

二、CSS的選擇器
為什么一開始要講選擇器了，因為我們要想精確修改的Html中的某個元素的屬性，就必須使用選擇器，它可以通過選擇器定位到某個元素上然后修改元素的樣式。

1).id和class選擇器
id選擇器必須現(xiàn)在標簽中的定義，然后在在頭部標簽的style標簽中用“#”來表示：

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css">  
  5.      #dv{ 
  6.        background: red 更改div的背景顏色為紅色 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div id='dv'>fd</div> 定義一個id為dv的div 
  12. </body> 
  13. </Html> 

class選擇器和id選擇器差不多，只不過class選擇器用”.“來表示：

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      .dv{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class='dv'>fd</div> 
  12. </body> 
  13. </Html> 

2).元素選擇器
就是指直接聲明標簽名為選擇器，然后更改樣式

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      div{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div>fd</div> 
  12. </body> 
  13. </Html> 

或者聲明所有標簽名為選擇器

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.     Html，head，body，div{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div>fd</div> 
  12. </body> 
  13. </Html> 

也可以使用元素加選擇器更加精確的定位到該元素

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.    div#er{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div id='df'>fd</div> 
  12. <p>fhsjak</p> 
  13. <div id='er'>re</div> 
  14. </body> 
  15. </Html> 

3).后代選擇器
訪問一個元素內(nèi)的其它元素，可以是元素內(nèi)的任意元素

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      div span{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div> 
  12. <p>erzi 
  13. <span>sunzi</span> 
  14. </p> 
  15. </div> 
  16. </body> 
  17. </Html> 

4).子元素選擇器

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      div>p{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div> 
  12. <p>erzi 
  13. <span>sunzi</span> 
  14. </p> 
  15. </div> 
  16. </body> 
  17. </Html> 

5).兄弟選擇器
位于元素的下一個元素，不在元素內(nèi)

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      div+big{ 
  6.        background: red 
  7.      } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div> 
  12. <p>erzi 
  13. <span>sunzi</span> 
  14. </p> 
  15. </div> 
  16. <big>borther</big> 
  17. </body> 
  18. </Html> 

6).偽類選擇器
偽類選擇器可分為三類

1)).錨偽類，用于檢測鼠標的懸停狀態(tài)。

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      a:link{    /* 未訪問的鏈接 */ 
  6.        background: red 
  7.      } 
  8.      a:visited{    /* 已訪問的鏈接 */ 
  9.       background: green 
  10.      } 
  11.      a:hover{  /* 鼠標移動到鏈接上 */ 
  12.       background: blue 
  13.      } 
  14.      a:active{  /* 選定的鏈接 */ 
  15.       background: yellow 
  16.      } 
  17. </style> 
  18. </head> 
  19. <body> 
  20. <a href="https://www.baidu.com">百度</a> 
  21. </body> 
  22. </Html> 
  23. 注:a:hover必須置于a:link和a:visited 之后，才是有效的。a:active必須被置于a:hover 之后，才是有效的。 

2)). ：first-child偽類
匹配第一個匹配到的標簽

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.      p:first-child{  匹配第一個p標簽 
  6.        background: red 
  7.      } 
  8.      div:first-child{ 匹配第一個div標簽 
  9.       background: blue 
  10.      } 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <div id='dv'> 
  15. <p class='fd'>fdaf 
  16. <div id='gfd'>grerg</div> 
  17. </p> 
  18. <div class='gf'>fsdjkfhkj 
  19. <a href="https://www.baidu.com">baidu</a> 
  20. </div> 
  21. </div> 
  22. </body> 
  23. </Html> 

3)). ：lang偽類

  1. <Html> 
  2. <head> 
  3.   <title>Css應用</title> 
  4.   <style type="text/Css"> 
  5.   q:lang(hw)  短引用利用偽類 
  6.    { 
  7.    quotes: "^" "^" 
  8.    } 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div id='dv'> 
  13. <p>hw<q lang="hw">任性的90后boy</q></p> 必須要用短引用 
  14. </div> 
  15. </body> 
  16. </Html> 
  17. <Html> 
  18. <head> 

7).通用選擇器
將樣式應用到所有的元素中

  1. *{ 
  2.   background:red 
  3. } 

參考文檔：W3C官方文檔（CSS篇）

三、總結
這篇文章主要介紹了CSS的基本用法和選擇器的基礎知識。通過對CSS的學習，相信大家應該能做出許多華麗絢爛的特效了吧，CSS的確是一個很強大的東西。

責任編輯：姜華 來源： IT共享之家
CascadingStyle Sheet
相關推薦

2020-11-17 11:10:21

CSS選擇器HTML

2023-08-01 14:34:12

HTMLCSS

2023-06-28 15:04:59

CSSHTML

2022-03-04 09:31:41

CSS前端屬性選擇器

2021-04-07 06:11:37

Css前端CSS定位知識

2021-05-20 09:02:59

CSS單位長度

2021-01-25 05:39:54

Css前端Border

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS對齊文本

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平臺

2021-03-21 07:36:43

Python迭代知識語言

2022-12-23 10:26:09

CSShas()

2022-02-15 09:31:43

透明度CSS

2020-11-27 08:51:29

CSSOpacity透明度

2020-12-18 05:40:37

CSS clearHtml

2020-11-10 10:48:10

JavaScript屬性對象

2021-01-29 18:41:16

JavaScript函數(shù)語法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch
點贊
收藏

51CTO技術棧公眾號