css是什麽
CSS 是什麽？
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表。
屬性和屬性值用冒號隔開，以分號結尾。
CSS 四種引入方式：
1.行內式
行內式是在標簽的style屬性中設定CSS樣式。
|
1 |
<div style="..."></div> |
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>標簽的<style></style>標簽對中。
|
1 2 3 4 5 6 |
<head> ... <style type="text/css"> ...此處寫CSS樣式 </style> </head> |
3.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。
導入式會在整個網頁裝載完後再裝載CSS文件。
|
1 2 3 4 5 6 |
<head> ... <style type="text/css"> @import "My.css"; 此處註意.css文件的路徑 </style> </head> |
4.鏈接式
將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。
鏈接式會以網頁文件主體裝載前裝載CSS文件。
|
1 2 3 4 |
<head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head> |
樣式應用順序：
- 行內樣式優先級最高
- 針對相同的樣式屬性，不同的樣式屬性將以合並的方式呈現
- 相同樣式並且相同屬性，呈現方式在<head>中的順序決定，後面會覆蓋前面屬性
!important
- 指定樣式規則應用最優先
|
1 2 3 |
.nick { color: yellow !important; } |
|
選擇器（Selector） |
基本選擇器：
1.通用元素選擇器
* 表示應用到所有的標簽。
|
1 |
* {color: yellow} |
2.標簽選擇器
匹配所有使用 div 標簽的元素（可以匹配所有標簽）
|
1 |
div {color: yellow} |
3.類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）
|
1 2 |
.Mycolor {color: yellow} <h3 class="Mycolor">nick</h3> |
4.ID選擇器
使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規範而不是規則，所以不會報錯）。
語法：#ID名{樣式}（ID名不能以數字開頭）
|
1 2 |
#Mycolor {color: yellow} <h3 id="Mycolor">Nick.</h3> |
組合選擇器：
1.多元素選擇器
同時匹配h3,h4標簽，之間用逗號分隔。
|
1 2 3 |
h3,h4 {color: yellow;} <h3>Nick</h3> <h4>Jenny</h4> |
2.後代元素選擇器
匹配所有div標簽裏嵌套的P標簽，之間用空格分隔。
|
1 2 3 4 5 6 7 8 |
div p {color: yellow;}
<div> <p>Nick</p> <div> <p>Nick</p> </div> </div> |
3.子元素選擇器
匹配所有div標簽裏嵌套的子P標簽，之間用>分隔。
|
1 2 3 4 5 6 |
div > p {color: yellow;}
<div> <p>Nick</p> <p>Nick</p> </div> |
4.毗鄰元素選擇器
匹配所有緊隨div標簽之後的同級標簽P，之間用+分隔（只能匹配一個）。
|
1 2 3 4 |
div + p {color: yellow;}
<div>Nick</div> <p>Nick</p> |
屬性選擇器：
1.[title] & P[title]
設置所有具有title屬性的標簽元素；
設置所有具有title屬性的P標簽元素。
|
1 2 3 4 5 6 7 8 9 10 11 |
[title] { color: yellow; } p[title] { color: yellow; }
<div title>Nick</div> <p title>Nick</p> |
2.[title=Nick]
設置所有title屬性等於“Nick”的標簽元素。
|
1 2 3 4 5 6 |
[title="Nick"] { color: yellow; }
<p title="Nick">Nick</p> |
3.[title~=Nick]
設置所有title屬性具有多個空格分隔的值、其中一個值等於“Nick”的標簽元素。
|
1 2 3 4 5 6 7 |
[title~="Nick"] { color: yellow; }
<p title="Nick Jenny">Nick</p> <p title="Jenny Nick">Nick</p> |
4.[title|=Nick]
設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"Nick"開頭的標簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
|
1 2 3 4 5 6 |
[title|="Nick"] { color: yellow; }
<p title="Nick-Jenny">Nick</p> |
5.[title^=Nick]
設置屬性值以指定值開頭的每個標簽元素。
|
1 2 3 4 5 6 |
[title^="Nick"] { color: yellow; }
<p title="NickJenny">Nick</p> |
6.[title$=Nick]
設置屬性值以指定值結尾的每個標簽元素。
|
1 2 3 4 5 6 |
[title$="Nick"] { color: yellow; }
<p title="JennyNick">Nick</p> |
7.[title*=Nick]
設置屬性值中包含指定值的每個元素
|
1 2 3 4 5 6 |
[title*="Nick"] { color: yellow; }
<p title="SNickJenny">Nick</p> |
偽類選擇器：
1. link、hover、active、visited
- a:link（未訪問的鏈接狀態）,用於定義了常規的鏈接狀態。
- a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。
- a:active（在鏈接上按下鼠標時的狀態）。
- a:visited（已訪問過的鏈接狀態）,可以看出已經訪問過的鏈接。
|
1 2 3 4 5 6 |
a:link{color: black} a:hover{color: yellow} a:active{color: blue} a:visited{color: red}
<a href="#">Nick</a> |
2. before、after
- P:before 在每個<p>元素的內容之前插入內容;
- P:after 在每個<p>元素的內容之後插入內容。
+ View Code
|
常用屬性 |
1. 顏色屬性：
color
- HEX（十六進制色：color: #FFFF00 --> 縮寫：#FF0）
- RGB（紅綠藍，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
- RGBA（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
- HSL（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
- HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）
transparent
- 全透明，使用方式：color: transparent;
opacity
- 元素的透明度，語法：opacity: 0.5;
- 屬性值在0.0到1.0範圍內，0表示透明，1表示不透明。
- filter濾鏡屬性（只適用於早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。
2. 字體屬性:
font-style: 用於規定斜體文本
- normal 文本正常顯示
- italic 文本斜體顯示
- oblique 文本傾斜顯示
font-weight: 設置文本的粗細
- normal（默認）
- bold（加粗）
- bolder（相當於<strong>和<b>標簽）
- lighter （常規）
- 100 ~ 900 整百（400=normal，700=bold）
font-size: 設置字體的大小
- 默認值：medium
- <absolute-size>可選參數值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相對於父標簽中字體的尺寸進行調節。可選參數值：smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用長度值指定文字大小，不允許負值。
font-family：字體名稱
- 使用逗號隔開多種字體（優先級從前向後，如果系統中沒有找到當前字體，則往後面尋找）
font：簡寫屬性
- 語法：font：字體大小/行高 字體;（字體要在最後）
3. 文本屬性:
white-space: 設置元素中空白的處理方式
- normal：默認處理方式。
- pre：保留空格，當文字超出邊界時不換行
- nowrap：不保留空格，強制在同一行內顯示所有文本，直到文本結束或者碰到br標簽
- pre-wrap：保留空格，當文字碰到邊界時換行
- pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行
direction: 規定文本的方向
- ltr 默認，文本方向從左到右。
- rtl 文本方向從右到左。
text-align: 文本的水平對齊方式
- left
- center
- right
line-height: 文本行高
- normal 默認
vertical-align: 文本所在行高的垂直對齊方式
- baseline 默認
- sub 垂直對齊文本的下標，和<sub>標簽一樣的效果
- super 垂直對齊文本的上標，和<sup>標簽一樣的效果
- top 對象的頂端與所在容器的頂端對齊
- text-top 對象的頂端與所在行文字頂端對齊
- middle 元素對象基於基線垂直對齊
- bottom 對象的底端與所在行的文字底部對齊
- text-bottom 對象的底端與所在行文字的底端對齊
text-indent: 文本縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
- capitalize 文本中的每個單詞以大寫字母開頭。
- uppercase 定義僅有大寫字母。
- lowercase 定義僅有小寫字母。
text-overflow: 文本溢出樣式
- clip 修剪文本。
- ellipsis 顯示省略符號...來代表被修剪的文本。
- string 使用給定的字符串來代表被修剪的文本。
+ View Code
text-decoration: 文本的裝飾
- none 默認。
- underline 下劃線。
- overline 上劃線。
- line-through 中線。
text-shadow：文本陰影
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
- text-shadow: 5px 5px 5px #888;
word-wrap：自動換行
- word-wrap: break-word;
css是什麽