CSS簡(jiǎn)介
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示HTML 元素
- 樣式通常存儲(chǔ)在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲(chǔ)在CSS 文件中
- 多個(gè)樣式定義可層疊為一個(gè)
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語(yǔ)法規(guī)則
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條屬性聲明。
/*選擇器*/ css中注釋用/* */
selector {
property1:value; //屬性聲明 = 屬性名:屬性值
property2:value;
....
}
如果值為若干單詞，則要給值加引號(hào)：
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);
}
屬性值語(yǔ)法
margin : [<length>|<percentage>|<auto>]{1,4}
基本元素 組合符號(hào) 數(shù)量符號(hào)
- 基本元素
- 關(guān)鍵字：- auto,solid,bold.....
- 類型
- 基本類型：<length>,<percentage>,<color>....
- 其他類型：<'padding-width'>,<color-stop>....
- 符號(hào)：/,
- inherit, initial
- 組合符號(hào)
- 空格
<font-size> <font-family>
合法值： 12px arial
不合法值： 12px 或 arial 12px
- &&
<length>&&<color>
green 2px 合法
1em blue 合法
blue 不合法
- ||
underline||overline||line-through||blink
至少需要出現(xiàn)一個(gè)，與順序無(wú)關(guān)
underline 合法
overline underline 合法
- |
<color>|transparent 只能出現(xiàn)一個(gè)
orange 合法
transparent 合法
orange transparent 不合法
- []，主要起分組作用
bold[thin || <length>]
bold thin 合法
bold 2em 合法
- 數(shù)量符號(hào)
- 無(wú)：表示只能出現(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ī)則語(yǔ)法
- @標(biāo)識(shí)符 xxx;
- @標(biāo)識(shí)符 xxx{}
常用規(guī)則 - @media
- @keyframes
- @font-face
不常用 - @import
- @charset
- @namespace
- @page
- @supports
- @document
CSS選擇器
選擇器簡(jiǎn)單可分為以下三類：
- 簡(jiǎn)單選擇器
- 偽元素選擇器
- 組合選擇器
- 簡(jiǎn)單選擇器
- 標(biāo)簽選擇器：文檔的元素就是最基本的選擇器。選擇器通常將是某個(gè) HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
html {color:black;}
p {color:gray;}
h2 {color:silver;}
- 類選擇器
.className:
- className可以是字母，數(shù)字，-，_
- className必須以字母開(kāi)頭
- 區(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 選擇器以 "#" 來(lái)定義。
下面的兩個(gè) id 選擇器，第一個(gè)可以定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red">這個(gè)段落是紅色。</p>
<p id="green">這個(gè)段落是綠色。</p>
注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
通配符選擇器
*{color:blue} 選擇頁(yè)面中所有元素并設(shè)置成藍(lán)色屬性選擇器：對(duì)帶有指定屬性的 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; }
下面的例子為以指定值#開(kāi)頭的 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}
- 偽類選擇器
偽類的語(yǔ)法：selector : pseudo-class {property: value}
CSS 類也可與偽類搭配使用:selector.class : pseudo-class {property: value}
在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問(wèn)狀態(tài)，未被訪問(wèn)狀態(tài)，和鼠標(biāo)懸停狀態(tài)。
a:link {color: #FF0000} /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00} /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
input:enabled{color:#ccc;} /*一個(gè)元素可用的狀態(tài)
input:disabled{color:#ccc;} /*一個(gè)元素不可用的狀態(tài)
input:checked{color:#ccc;} /*一個(gè)元素如radio被選中的狀態(tài)
li:first-child{color:#ccc;} /*列表的第一項(xiàng)*/
li:last-child{color:#ccc;} /*列表的最后一項(xiàng)*/
li:nth-child(even){color:#ccc;} /*列表的偶數(shù)項(xiàng)*/
li:nth-child(3n+1){color:#ccc;}
li:nth-last-child(3){color:#ccc;} /*列表倒數(shù)項(xiàng)*/
ul:only-child{color:#ccc;} /*只有一個(gè)元素的列表*/
dd:first-of-type{color:#ccc;} /*第一個(gè)dd*/
dd:last-of-type{color:#ccc;}
dd:nth-of-type{color:#ccc;}
span:only-of-type{color:#ccc;}
/*選中父元素中只有一個(gè)span元素的元素中的span并指定樣式*/
p:empty{color:#ccc;} 沒(méi)有內(nèi)容的元素
:root 根標(biāo)簽
:not() 不包含某元素的選擇器
:target
:lang
- 組合簡(jiǎn)單選擇器
img[src$=jpg]{}
#banner:hover{}
- 偽元素選擇器
::first-letter{} 為第一個(gè)字母指定樣式
::first-line{} 為第一行指定樣式
::before{content:"before";} 在某個(gè)元素之前插入before
::after{content:"after";} 在某個(gè)元素之后插入after
::selection{} 用于被用戶選中的內(nèi)容
組合選擇器
-
后代選擇器
后代選擇器（descendant selector）又稱為包含選擇器。
后代選擇器可以選擇作為某元素后代的元素。我們可以定義后代選擇器來(lái)創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。
如果您希望只對(duì) h1 元素中的 em 元素應(yīng)用樣式，可以這樣寫：
h1 em {color:red;}
這個(gè)規(guī)則會(huì)把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色。
其他 em 文本（如段落或塊引用中的 em）則不會(huì)被這個(gè)規(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;}
這個(gè)規(guī)則會(huì)把第一個(gè) h1 下面的兩個(gè) strong 元素變?yōu)榧t色，但是第二個(gè) h1 中的 strong 不受影響( 因?yàn)榈诙€(gè)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>
- 相鄰兄弟選擇器
如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
例如，如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
- 通用兄弟選擇器
h2~p{} 選中h2后所有為p元素的兄弟節(jié)點(diǎn)
選擇器分組：可以用逗號(hào)來(lái)為多個(gè)具有相同樣式的不同元素來(lái)指定樣式。
屬性的繼承：子元素會(huì)繼承父元素中的屬性
自動(dòng)繼承
- color
- font
- text-align
- list-style
- ...
非繼承屬性 - background
- border
- position
- ...
強(qiáng)制繼承，將屬性值設(shè)置成inherit
css優(yōu)先級(jí)
優(yōu)先級(jí)計(jì)算（其中數(shù)字為權(quán)重）
優(yōu)先級(jí)計(jì)算例子
優(yōu)先級(jí)高的樣式會(huì)覆蓋掉優(yōu)先級(jí)低的樣式
css層疊
相同的屬性會(huì)覆蓋：
- 優(yōu)先級(jí)高的覆蓋掉低的
- 優(yōu)先級(jí)相同，后面覆蓋掉前面的
css改變優(yōu)先級(jí)
- 改變先后順序
- 提升選擇器的優(yōu)先級(jí)
- ！important：前兩種都不可行時(shí)使用
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（對(duì)于沒(méi)有斜體的字體強(qiáng)制傾斜） -
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 全透明
對(duì)齊方式
-
text-align:設(shè)置一個(gè)元素中的文本行互相之間的對(duì)齊方式。
text-align:left | right | center | justify（兩端對(duì)齊） -
vertical-align:設(shè)置垂直對(duì)齊方式
vertical-align:baseline | sub(下標(biāo)) | super(上標(biāo)，例如指數(shù)表達(dá)) | top | text-top | middle | bottom | text-bottm | <percentage>（參照行高）| <length> - text-indent:可以方便地實(shí)現(xiàn)文本縮進(jìn)。
text-indent:<length> | <percentage>
如果text-indent設(shè)置一個(gè)負(fù)的極大值，則里面的文字將跑出容器，達(dá)到隱藏文字的目的
文本修飾
-
white-space:會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和 tab 字符的處理。
white-space : normal | nowrap | pre | pre-wrap | pre-line
- word-wrap：設(shè)置長(zhǎng)單詞是否自動(dòng)換行
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(陰影模糊半徑)
如果文字陰影中的顏色沒(méi)有設(shè)置，那么陰影顏色就是文字顏色
- text-decoration
text-decoration:none | [underline(下劃線) || overline(上劃線) || line-through(貫穿線)]
高級(jí)設(shè)置
- text-overflow
text-overflow: clip | ellipsis(文本溢出的時(shí)候利用...代替溢出文本)
//要配合下面兩個(gè)屬性使用
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)邊距（填充）、邊框 和 外邊距 的方式。
每個(gè)盒子都有：邊距、邊框、填充、內(nèi)容四個(gè)屬性
每個(gè)屬性都有：上、下、左、右四個(gè)部分
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%;} 按照順時(shí)針順序
h1 {padding: 20px} 當(dāng)四個(gè)方向的內(nèi)邊距都為20px時(shí)
也可以單獨(dú)設(shè)置：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
padding規(guī)則：對(duì)面相等，后者省略；4面相等，只設(shè)一個(gè)
- margin:設(shè)置外邊距
margin:[<length>|<percentage>|atuo]{1,4}
magin合并:（1）毗鄰的元素如果相鄰的邊都設(shè)置了margin，則取其中大的一個(gè)值；（2）父元素與第一個(gè)或最后一個(gè)子元素的margin會(huì)合并。
水平居中: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:圓角邊框（方向?yàn)轫槙r(shí)針，從左上開(kāi)始）
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四個(gè)為x方向上半徑，后面四個(gè)為y方向上半徑
border-radius:50% 正圓
border-radius并不是只有在設(shè)置了border的情況下才會(huì)生效。
-
overflow :設(shè)置內(nèi)容溢出部分
overflow:visible|hidden|scroll|auto
顯示溢出部分 | 不顯示 | 顯示垂直和水平滑動(dòng)條 | 在溢出情況下顯示滑動(dòng)條
- 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
不占空間（布局時(shí)當(dāng)做沒(méi)有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（背景不動(dòng)） | fixed | local（內(nèi)容背景一起動(dòng)）
設(shè)置背景是否隨內(nèi)容拖動(dòng)而拖動(dòng) - 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
