CSS簡介
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中高职，是為了解決內(nèi)容與表現(xiàn)分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在CSS 文件中
- 多個樣式定義可層疊為一個
CSS引入
- 外部樣式表
<head>
<link rel="stylesheet" href="base.css">
</head>
- 內(nèi)部樣式表：適用于內(nèi)容比較少的情況
<head>
<style>
body {background-color: red;}
p {margin-left: 20px;}
</style>
</head>
- 內(nèi)嵌樣式：將html和css雜糅在一起景鼠，不推薦使用
<p style="color:red;">123</p>
CSS語法規(guī)則
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器鸿捧，以及一條或多條屬性聲明。
/*選擇器*/ css中注釋用/* */
selector {
property1:value; //屬性聲明 = 屬性名:屬性值
property2:value;
....
}
如果值為若干單詞棍潘，則要給值加引號：
p {font-family: "sans serif";}
不同瀏覽器擁有不同私有屬性，為了兼容各種瀏覽器，寫法應(yīng)該參照下面的代碼：
.pic {
-webkit-transform:rotate(-3deg); /*chrome,safari*/
-moz-transform:rotate(-3deg); /*firefox*/
-ms-transform:rotate(-3deg); /*IE*/
-o-transform:rotate(-3deg); /*opera*/
transform:rotate(-3deg);
}
屬性值語法
margin : [<length>|<percentage>|<auto>]{1,4}
基本元素 組合符號 數(shù)量符號
- 基本元素
- 關(guān)鍵字：- auto,solid,bold.....
- 類型
- 基本類型：<length>,<percentage>,<color>....
- 其他類型：<'padding-width'>,<color-stop>....
- 符號：/,
- inherit, initial
- 組合符號
- 空格
<font-size> <font-family>
合法值： 12px arial
不合法值： 12px 或 arial 12px
- &&
<length>&&<color>
green 2px 合法
1em blue 合法
blue 不合法
- ||
underline||overline||line-through||blink
至少需要出現(xiàn)一個十减，與順序無關(guān)
underline 合法
overline underline 合法
- |
<color>|transparent 只能出現(xiàn)一個
orange 合法
transparent 合法
orange transparent 不合法
- []，主要起分組作用
bold[thin || <length>]
bold thin 合法
bold 2em 合法
- 數(shù)量符號
- 無：表示只能出現(xiàn)一次
<length>
1px 合法
1px 2em 不合法
- +：表示可以出現(xiàn)一次或多次
<color-stop>[,<color-stop>]+
#fff,red 合法
blue,green 40%,gray 合法
blue 如果只有<color-stop>部分愤估，不合法
- 嫉称？：可出現(xiàn)也可以不出現(xiàn)
- {}：表示可出現(xiàn)次數(shù)的范圍
<length>{1,2}表示能出現(xiàn)1-2次 - *：表示可出現(xiàn)0次，或多次
<time>[,<time>]*
合法：1s 或 1s 2s
- #：表示需要出現(xiàn)一次或多次
<time>#
合法：2s,3s
不合法：1s 2s
屬性值例子：
綠色的為合法的灵疮，紅色的為不合法的
@規(guī)則語法
- @標(biāo)識符 xxx;
- @標(biāo)識符 xxx{}
常用規(guī)則 - @media
- @keyframes
- @font-face
不常用 - @import
- @charset
- @namespace
- @page
- @supports
- @document
CSS選擇器
選擇器簡單可分為以下三類：
- 簡單選擇器
- 偽元素選擇器
- 組合選擇器
- 簡單選擇器
- 標(biāo)簽選擇器：文檔的元素就是最基本的選擇器织阅。選擇器通常將是某個 HTML 元素，比如 p震捣、h1荔棉、em、a蒿赢，甚至可以是 html 本身润樱。
html {color:black;}
p {color:gray;}
h2 {color:silver;}
- 類選擇器
.className:
- className可以是字母，數(shù)字羡棵，-壹若，_
- className必須以字母開頭
- 區(qū)分大小寫
- 可以出現(xiàn)多次
將段落1設(shè)置成藍(lán)色，段落2皂冰、3設(shè)置成紅色店展，段落3設(shè)置成粗體
<div>
<p>num 1</p>
<p class="special">num 2</p>
<p class="special stress">num 3</p>
</div>
p{color:blue;}
.special{color:red;}
.stress{font-weight:bold;}
- id選擇器：可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 "#" 來定義秃流。
下面的兩個 id 選擇器赂蕴，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代碼中舶胀，id 屬性為 red 的 p 元素顯示為紅色概说，而 id 屬性為 green 的 p 元素顯示為綠色碧注。
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色糖赔。</p>
注意：id 屬性只能在每個 HTML 文檔中出現(xiàn)一次
通配符選擇器
*{color:blue} 選擇頁面中所有元素并設(shè)置成藍(lán)色屬性選擇器：對帶有指定屬性的 HTML 元素設(shè)置樣式萍丐。
下面的例子為帶有 title 屬性的所有元素設(shè)置樣式：
[title]
{
color:red;
}
下面的例子為 title="W3School" 的所有元素設(shè)置樣式：
[title=W3School]
{
border:5px solid blue;
}
下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值：
[title~=hello] { color:red; }
下面的例子為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式放典。適用于由連字符分隔的屬性值：
<p lang="en-us">Hello!</p>
[lang|=en] { color:red; }
下面的例子為以指定值#開頭的 href 屬性的所有元素設(shè)置樣式碉纺。
<a href="http:baidu.com">baidu</a>
[href^="#"]{color:red}
下面的例子為以指定值pdf結(jié)尾的 href 屬性的所有元素設(shè)置樣式。
<a >xxx.pdf</a>
[href$="pdf"]{color:red}
下面的例子為以包含指定值baidu的href屬性的所有元素設(shè)置樣式刻撒。
<a href="http:baidu.com">xxx.pdf</a>
[href*="baidu"]{color:red}
- 偽類選擇器
偽類的語法：selector : pseudo-class {property: value}
CSS 類也可與偽類搭配使用:selector.class : pseudo-class {property: value}
在支持 CSS 的瀏覽器中骨田，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)声怔，已被訪問狀態(tài)态贤，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)醋火。
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
input:enabled{color:#ccc;} /*一個元素可用的狀態(tài)
input:disabled{color:#ccc;} /*一個元素不可用的狀態(tài)
input:checked{color:#ccc;} /*一個元素如radio被選中的狀態(tài)
li:first-child{color:#ccc;} /*列表的第一項*/
li:last-child{color:#ccc;} /*列表的最后一項*/
li:nth-child(even){color:#ccc;} /*列表的偶數(shù)項*/
li:nth-child(3n+1){color:#ccc;}
li:nth-last-child(3){color:#ccc;} /*列表倒數(shù)項*/
ul:only-child{color:#ccc;} /*只有一個元素的列表*/
dd:first-of-type{color:#ccc;} /*第一個dd*/
dd:last-of-type{color:#ccc;}
dd:nth-of-type{color:#ccc;}
span:only-of-type{color:#ccc;}
/*選中父元素中只有一個span元素的元素中的span并指定樣式*/
p:empty{color:#ccc;} 沒有內(nèi)容的元素
:root 根標(biāo)簽
:not() 不包含某元素的選擇器
:target
:lang
- 組合簡單選擇器
img[src$=jpg]{}
#banner:hover{}
- 偽元素選擇器
::first-letter{} 為第一個字母指定樣式
::first-line{} 為第一行指定樣式
::before{content:"before";} 在某個元素之前插入before
::after{content:"after";} 在某個元素之后插入after
::selection{} 用于被用戶選中的內(nèi)容
組合選擇器
-
后代選擇器
后代選擇器（descendant selector）又稱為包含選擇器悠汽。
后代選擇器可以選擇作為某元素后代的元素。我們可以定義后代選擇器來創(chuàng)建一些規(guī)則芥驳，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用柿冲，而在另外一些結(jié)構(gòu)中不起作用。
如果您希望只對 h1 元素中的 em 元素應(yīng)用樣式兆旬，可以這樣寫：
h1 em {color:red;}
這個規(guī)則會把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色假抄。
其他 em 文本（如段落或塊引用中的 em）則不會被這個規(guī)則選中:
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
- 子選擇器
子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。
如果您希望選擇只作為 h1 元素子元素的 strong 元素丽猬，可以這樣寫：
h1 > strong {color:red;}
這個規(guī)則會把第一個 h1 下面的兩個 strong 元素變?yōu)榧t色宿饱，但是第二個 h1 中的 strong 不受影響( 因為第二個h1中的strong元素并不直接為h1的子元素爹橱，而是h1下em元素的子元素 )：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
- 相鄰兄弟選擇器
如果需要選擇緊接在另一個元素后的元素毙玻，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）圆雁。
例如由桌，如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距为黎，可以這樣寫：
h1 + p {margin-top:50px;}
- 通用兄弟選擇器
h2~p{} 選中h2后所有為p元素的兄弟節(jié)點
選擇器分組：可以用逗號來為多個具有相同樣式的不同元素來指定樣式。
屬性的繼承：子元素會繼承父元素中的屬性
自動繼承
- color
- font
- text-align
- list-style
- ...
非繼承屬性 - background
- border
- position
- ...
強制繼承行您，將屬性值設(shè)置成inherit
css優(yōu)先級
優(yōu)先級計算（其中數(shù)字為權(quán)重）
優(yōu)先級計算例子
優(yōu)先級高的樣式會覆蓋掉優(yōu)先級低的樣式
css層疊
相同的屬性會覆蓋：
- 優(yōu)先級高的覆蓋掉低的
- 優(yōu)先級相同铭乾，后面覆蓋掉前面的
css改變優(yōu)先級
- 改變先后順序
- 提升選擇器的優(yōu)先級
- ！important：前兩種都不可行時使用
CSS文本
字體
-
font-size:設(shè)置文本的大小邑雅。
font-size:<length>|percentage
percentage參照父元素的font-size
font-size:12px
font-size:2em
-
font-family :定義文本的字體系列片橡。
font-family:[<family-name>|<generic-family>]#
<generic-family>=serif | sans-serif
font-family:serif "宋體" 英文為serif妈经，中文為宋體 -
font-weight:設(shè)置文本的粗細(xì)淮野。
font-weight:normal|bold|bolder|lighter -
font-style:最常用于規(guī)定斜體文本捧书。
font-style:normal | italic（斜體） | oblique（對于沒有斜體的字體強制傾斜） -
line-height:指定行高
line-height:normal | <number> | <length> | <percentage> - 為某文本設(shè)置多種文本屬性
font:[ [<font-style] || <font-weight> ] ?<font-size> [ /<line-height> ]? <font-family> ]
font:30px/2 "Consolas",monospace;
font:italic bold 20px/1.5 arial,serif;
font:20px arial,serif;
- color:設(shè)置文本顏色
color:red
color:#ff0000
color:rgb(255,0,0)
color:rgba(255,0,0,1) 設(shè)置顏色及透明度
color:transparent 全透明
對齊方式
-
text-align:設(shè)置一個元素中的文本行互相之間的對齊方式。
text-align:left | right | center | justify（兩端對齊） -
vertical-align:設(shè)置垂直對齊方式
vertical-align:baseline | sub(下標(biāo)) | super(上標(biāo)骤星，例如指數(shù)表達(dá)) | top | text-top | middle | bottom | text-bottm | <percentage>（參照行高）| <length> - text-indent:可以方便地實現(xiàn)文本縮進经瓷。
text-indent:<length> | <percentage>
如果text-indent設(shè)置一個負(fù)的極大值，則里面的文字將跑出容器洞难，達(dá)到隱藏文字的目的
文本修飾
-
white-space:會影響到用戶代理對源文檔中的空格舆吮、換行和 tab 字符的處理。
white-space : normal | nowrap | pre | pre-wrap | pre-line
- word-wrap：設(shè)置長單詞是否自動換行
word-wrap:normal | break-word - word-break
word-break:normal | keep-all | break-all - text-shadow:設(shè)置文本陰影队贱。
text-shadow:none | [<length>{2,3} && <color>?]#
text-shadow:1px(x軸的偏移方向) 2px(y軸的偏移方向) 3px(陰影模糊半徑)
如果文字陰影中的顏色沒有設(shè)置色冀，那么陰影顏色就是文字顏色
- text-decoration
text-decoration:none | [underline(下劃線) || overline(上劃線) || line-through(貫穿線)]
高級設(shè)置
- text-overflow
text-overflow: clip | ellipsis(文本溢出的時候利用...代替溢出文本)
//要配合下面兩個屬性使用
overflow:hidden
white-space:nowrap
- curosr
cursor:[<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]
css模型盒
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距（填充）柱嫌、邊框 和 外邊距 的方式锋恬。
每個盒子都有：邊距、邊框编丘、填充与学、內(nèi)容四個屬性
每個屬性都有：上、下嘉抓、左索守、右四個部分
boder, padding, margin都有top, right, bottom, left四部分
- width:指定內(nèi)容區(qū)域的寬度
width:<length> | <percentage> - height:指定內(nèi)容區(qū)域的寬度
height:<length> | <percentage> - padding:定義元素的內(nèi)邊距。
padding:[<length>|<percentage>]{1,4}
按照上抑片、右卵佛、下、左的順序分別設(shè)置各邊的內(nèi)邊距敞斋，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;} 按照順時針順序
h1 {padding: 20px} 當(dāng)四個方向的內(nèi)邊距都為20px時
也可以單獨設(shè)置：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
padding規(guī)則：對面相等级遭，后者省略；4面相等渺尘，只設(shè)一個
- margin:設(shè)置外邊距
margin:[<length>|<percentage>|atuo]{1,4}
magin合并:（1）毗鄰的元素如果相鄰的邊都設(shè)置了margin挫鸽，則取其中大的一個值；（2）父元素與第一個或最后一個子元素的margin會合并鸥跟。
水平居中:margin:0 auto - border:[<border-width>||<border-style>||<border-color>]{1,4}
border-width:[<length>|thin|medium|thick]{1,4}
border-style:[solid|dashed|dotted|...]{1,4}
boder-color:[<color>|transparent]{1,4} - border-radius:圓角邊框（方向為順時針丢郊，從左上開始）
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四個為x方向上半徑，后面四個為y方向上半徑
border-radius:50% 正圓
border-radius并不是只有在設(shè)置了border的情況下才會生效医咨。
-
overflow :設(shè)置內(nèi)容溢出部分
overflow:visible|hidden|scroll|auto
顯示溢出部分 | 不顯示 | 顯示垂直和水平滑動條 | 在溢出情況下顯示滑動條
- boxing-size: 用于content或者boder的尺寸
boxing-size:content-box | border-box -
box-shadow: none | <shadow>[,<shadow>]*<shadow>:inset?&&<length>{2,4}&&<color>?
- outline:[<border-width>||<border-style>||<border-color>]
outline-color: <color>|invert
不占空間（布局時當(dāng)做沒有outline）枫匾，border外
如果已經(jīng)有了border，可以不用設(shè)置outline
css背景
- background-color
- background-image:<bg_image>[,<bg-image>]*
background-image:url(),url(); 先寫的在上層拟淮，background-color始終在底層
- background-repeat:設(shè)置背景平鋪方式
background-repeat:<repeat-style>[,<repeat-style>]*
<repeat-style> = repeat-x(沿x軸平鋪) | repeat-y | [repeat | space | round(縮放平鋪) | no-repeat]{1,2} - background-attachment:<attachment>[,<attachment>]*
<attachment>= scroll（背景不動） | fixed | local（內(nèi)容背景一起動）
設(shè)置背景是否隨內(nèi)容拖動而拖動 - background-position:設(shè)置背景圖位置
background-position:0 0;
background-position:10px 20px; x,y分別偏移的距離
background-position:20% 50%; 容器x的20%位置和y軸的50%便宜到容器x的20%位置和y軸的50%
background-position:center center;
background-position:right;
background-position:right 10px top 20px
- linear-gradient():設(shè)置顏色線性漸變
- radial-gradient():設(shè)置圓形漸變
- repeat-*-gradient
- background-origin:決定背景圖片（0,0）位置參考的位置
border-box | padding-box | content-box
