1.css簡介
- css注釋
/* */ - 瀏覽器私有屬性
- chrome肋层，safari:
-webkit- - firefox:
-moz- - IE:
-ms- - opera:
-o-
- chrome肋层，safari:
- 屬性值語法包括基本元素、組合符號、數(shù)量符合
- 組合符號
- 空格：必須按順序出現(xiàn)流椒，例如：
<font-size> <font-family> - &&: 必須出現(xiàn)順序無所謂
- ||： 至少出現(xiàn)一個(gè)順序無所謂
- |：只能出現(xiàn)一個(gè)
-
[ ]: 組合符號垦巴，括號內(nèi)看成一個(gè)整體和外部計(jì)算
- 空格：必須按順序出現(xiàn)流椒，例如：
- 數(shù)量符號
- 無符號：只能出現(xiàn)1次
- +：可以出現(xiàn)1或n次
- ？：可以出現(xiàn)0或1次
- {2邑彪，4}：最少出現(xiàn)2次瞧毙，最多出現(xiàn)4次
- *：可以出現(xiàn)0或1或n次
-
#：可以出現(xiàn)1或n次，中間用逗號（，）隔開
- 組合符號
- @規(guī)則語法
- @media 媒體查詢
- @keyframes css動(dòng)畫
- @font-face 引入外部字體
2.選擇器
選擇器分為簡單選擇器宙彪、偽元素選擇器矩动、組合選擇器
-
簡單選擇器
- 標(biāo)簽選擇器
p{} - 類選擇器
.special{} - id選擇器
#banner{} - 屬性選擇器
- [att]:具有括號內(nèi)屬性的元素
[disabled] {} - [att=val]:選擇屬性名為att屬性值為val的元素，相當(dāng)于id選擇器
[type=button] {} - [att~=val]: 選擇屬性名為att屬性值帶有val（空格分割）的元素释漆，相當(dāng)于類選擇器
[class~=sports] {} - [att|=val]: 選val悲没、val-開頭的
[lang|=en] {} - [att^=val]: 選val開頭的
[href^='#'] {}屬性值（val）是符號或包含空格需要用引號 - [att$=val]: 選val結(jié)尾的
[href$=pdf] {} - [att*=val]: 選包含val的
[href*=lady] {}
- [att]:具有括號內(nèi)屬性的元素
- 偽類選擇器
a:link {} a:visited {} a:hover {} a:active {} a標(biāo)簽有這四種，其他元素只有hover男图，active :enabled :disabled :checkedli:first-child{} li:last-child{} li:nth-child(even){} 選中偶數(shù)項(xiàng) li:nth-child(odd){} 選中奇數(shù)項(xiàng) li:nth-child(3n+1){} li:nth-last-child(3n+1){} li:only-child{} 選中只有一個(gè)子元素的項(xiàng) dd:first-of-type{} 選中第一個(gè)dd類型的元素 dd:last-of-type{} dd:nth-of-type(even){} dd:nth-last-of-type(3n){} span:only-of-type{} 選中只有一個(gè)span類型的元素:empty `<p></p>` :root html根標(biāo)簽 :not() 不包含括號內(nèi)選擇器的元素 :target 被錨點(diǎn)選中為目標(biāo)的元素 :lang() langague為某些特殊值的元素 - 通配符選擇器 *
img[src$=jpg] {} 選中img標(biāo)簽并且src屬性是jpg結(jié)尾
- 標(biāo)簽選擇器
-
偽元素選擇器
- p::first-letter {} 第一個(gè)字母
- p::first-line {} 第一行
- ::before { content: "";}
::after { content: "";} - ::selection 被用戶選中內(nèi)容的樣式
-
組合選擇器
- 后代選擇器
.main h2 {} - 子選擇器
.main>h2 {} - 兄弟選擇器
- 相鄰兄弟選擇器
h2+p{}h2相鄰的后面一個(gè)p - 通用兄弟選擇器
h2~p{}h2相鄰的后面所有的p
- 相鄰兄弟選擇器
- 選擇器分組
h1,h2,h3 {}
- 后代選擇器
組合選擇器
繼承：一個(gè)元素的樣式可以被內(nèi)部子元素繼承到示姿。 繼承屬性例如：color、font逊笆、text-align栈戳、list-style
-
css優(yōu)先級
- 行內(nèi)樣式 1000
- id選擇器 100
- 類、偽類和屬性選擇器 10
- 標(biāo)簽選擇器览露、偽元素選擇器 1
-
css層疊
- 相同的屬性會(huì)覆蓋荧琼。 按照優(yōu)先級覆蓋，優(yōu)先級相同后面的覆蓋前面的
- 不同的屬性會(huì)合并
-
改變css樣式優(yōu)先級
- 改變先后順序
- 提升選擇器優(yōu)先級
- !important
3.文本
- font-size 文字大小
font-size: 12px; （父元素）
font-size: 16px; (子元素)
font-size: 2em; (子元素差牛，24px)
font-size: 200%; (子元素命锄，24px)
em, % 參照物是父元素字體大小
- font-family 字體
font-family: arial; (英文是arial字體，中文是系統(tǒng)默認(rèn)字體)
font-family: arial, Verdana, sans-serif; (arial, Verdana都是英文字體偏化，先用arial脐恩。中文字體用系統(tǒng)設(shè)置的sans-serif)
- font-weight 加粗： normal 、 bold
- font-style 傾斜：normal侦讨、 italic
- line-height 行高
line-height: 40px; (父元素驶冒，行高為40px，字體大小為30px)
line-height: 3em; (子元素韵卤，行高90px)
line-height: 300%; (子元素骗污，行高90px)
line-height: 3; (子元素，行高90px)
line-height: 300%; (父元素沈条，行高90px)
font-size: 16px(子元素需忿，行高90px。行高為%的時(shí)候蜡歹，先計(jì)算父元素行高是90px屋厘，然后子元素再計(jì)算)
line-height: 3; (父元素，行高90px)
font-size: 16px(子元素月而，行高48px汗洒。行高為%的時(shí)候，子元素直接繼承父元素line-height: 3; 然后計(jì)算得到48px)
- font 文字縮寫
font: 30px arial;
font: italic bold 30px/2 arial;
- color 文字顏色
- text-align 水平對齊 left父款、right溢谤、center瞻凤、justify(兩端對齊)
- vertical-align 垂直對齊 baseline(基線、默認(rèn))溯香、 sub(上標(biāo))鲫构、super(上標(biāo))、top(這一行最高點(diǎn))玫坛、text-top(文本最高點(diǎn))结笨、middle、bottom湿镀、text-bottom炕吸、60%（參照物行高）、20px（基線為起點(diǎn)上移20px)
- text-indent 首行縮進(jìn) 2em(縮進(jìn)2個(gè)字)勉痴、 10px赫模、20%(參照物是容器的寬度)
- white-space 換行、空格蒸矛、tab要不要保留
| --- | 換行 | 空格瀑罗、tab | 自動(dòng)換行 |
|---|---|---|---|
| 'normal' | 合并 | 合并 | 換行 |
| 'nowrap' | 合并 | 合并 | 不換行 |
| 'pre' | 保留 | 保留 | 不換行 |
| 'pre-wrap' | 保留 | 保留 | 換行 |
| 'pre-line' | 保留 | 合并 | 換行 |
- word-wrap 單詞換行 normal、break-word
- word-break 字母換行 normal雏掠、 break-all
- text-shadow 文字陰影
text-shadow: 1px 2px red; (x軸偏移1px斩祭、y軸偏移2px、陰影為紅色)
text-shadow: 1px 2px 3px; (x軸偏移1px乡话、y軸偏移2px摧玫、模糊半徑為3px、陰影為文字顏色)
- text-decoration: none绑青、underline诬像、overline、linethrough （可以同時(shí)寫多個(gè) ）
- text-overflow: clip闸婴、ellipsis
超出文字省略號
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
- cursor 鼠標(biāo)形狀： <uri> (圖片)坏挠、default（光標(biāo)）、auto邪乍、help降狠、none（消失）、pointer(手)溺欧、zoom-in(放大鏡)、zoom-out(縮小鏡)柏肪、move
- inherit 強(qiáng)制繼承
line-height: inherit;
4.盒模型
- width： 200px姐刁、 50%（參照物父元素）max-width min-width
- height max-height min-height
- padding
padding: 20px 10px; == padding: 20px 10px 20px 10px;
padding: 20px 10px 30px; == padding: 20px 10px 30px 10px;
- margin :
- 比padding多一個(gè)auto值
- 水平合并： margin：0 auto；
- margin合并
- 相鄰元素取margin大的那個(gè)值
- 父元素與第一個(gè)烦味、最后一個(gè)子元素合并
- border
- border-color默認(rèn)是內(nèi)部字體顏色
- border-radius:
- top-left聂使、top-right壁拉、bottom-right、bottom-left
border-radius: 0px 5px 10px 15px / 20px 15px 10px 5px; 第一個(gè)角水平半徑0px 垂直半徑20px; border-top-left-radius: 10px; - overflow 內(nèi)容超出柏靶、overflow-x弃理、overflow-y: visible、hidden屎蜓、scroll痘昌、auto
- box-sizing: content-box、border-box
- box-shadow:
box-shadow: 4px 6px 3px 0px red; 水平偏移炬转、垂直偏移辆苔、模糊半徑（往外1.5px模糊，往內(nèi)1.5px模糊）扼劈、陰影大小 顏色默認(rèn)文字顏色 box-shadow: inset 0px 0px 3px red; inset 內(nèi)陰影 陰影不占空間 - outline 輪廓驻啤，不占空間，在border以外
outline: 1px solid red;
5.背景
- background-color: transparent(默認(rèn)值)
- background-image:
background-image: url(red.png), url(blue.png); 可以同時(shí)引入多個(gè)圖片荐吵，先寫的在上一層 - background-repeat: repeat骑冗、repeat-x、repeat-y先煎、space（平鋪的背景與背景見留空隙贼涩，使得平鋪的背景不被截掉）、round（把背景縮放榨婆，使得平鋪的背景不被截掉）磁携、no-repeat
background-image: url(red.png), url(blue.png); background-repeat: repeat-x; 兩個(gè)背景圖，一個(gè)background-repeat值良风。兩個(gè)背景圖都按照repeat-x平鋪 background-repeat: repeat-x, repeat-y; - background-attachment: scroll(默認(rèn)值谊迄、背景圖片不動(dòng)，內(nèi)容動(dòng))烟央、local(背景圖片隨內(nèi)容動(dòng))
- background-position:
background-position:10px 20px; x軸偏移10px,y軸偏移20px background-position:10% 20%; 圖片的x軸10% y軸20%位置與 容器x軸10% y軸20%位置重合 background-position:right; x軸居右统诺，y軸默認(rèn)居中 background-position:right 10px top 20px; - linear-gradient 線性漸變:
backgroud-image: linear-gradient(red,blue); 從上到下 紅色漸變到藍(lán)色 backgroud-image: linear-gradient(to top,red,blue); backgroud-image: linear-gradient(to right bottom,red,blue); 從左上角到右下角 紅色漸變到藍(lán)色 backgroud-image: linear-gradient(0deg,red,blue); 從下到上 紅色漸變到藍(lán)色 linear-gradient(45deg,red,blue); 0度是從下往上， 45deg是0deg的時(shí)候順時(shí)針旋轉(zhuǎn)45deg 紅色漸變到藍(lán)色 backgroud-image: linear-gradient(red,green,blue); backgroud-image: linear-gradient(red,green 20%,blue); green在20%的位置 - radial-gradient 徑向漸變:
backgroud-image: radial-gradient(closet-side,red,blue); 向最近的那條邊漸變 默認(rèn)形狀是橢圓 backgroud-image: radial-gradient(circle,red,blue); 漸變圓默認(rèn)半價(jià)是 從元素圓心到farthest-corner(元素左上角) backgroud-image: radial-gradient(100px 50px at 0 0,red,green 20%,blue); 橢圓x軸半徑100px,y軸半徑50px, 橢圓圓心移動(dòng)到(0,0)位置 - 漸變r(jià)epeat
backgroud-image: repeating-linear-gradient(red,blue 20px, red40px); backgroud-image: repeating-radial-gradient(red,blue 20px, red40px); - background-origin 背景從哪里開始出現(xiàn): padding-box(默認(rèn)值)疑俭、border-box粮呢、content-box
- background-clip 背景從哪里開始裁剪: border-box(默認(rèn)值)、padding-box钞艇、content-box
- background-size 背景大小
background-size: 50% 50%; 寬高都是容器的50% background-size: cover; 最小寬高=容器寬高 background-size: contain; 最大寬高=容器寬高 - background
background: url(red.png) 0 0/20px 20px no-repeat content-box green; 注：position(0,0)/size(20px 20px) content-box 即是origin又是clip 背景顏色是綠色
