CSS基础语法和盒模型
CSS基礎(chǔ)語(yǔ)法和盒模型
CSS簡(jiǎn)介
Cascading Style Sheet 層疊樣式表 用于給HTML標(biāo)簽添加樣式
CSS3是CSS的最新版本 增加了大量的樣式/動(dòng)畫(huà)/3D特效以及移動(dòng)端特性
前端三劍客 HTML/CSS/JS 結(jié)構(gòu)/樣式/行為
HTML 與 CSS 之間的綁定 -> 選擇器
CSS的書(shū)寫(xiě)位置
①內(nèi)嵌式
內(nèi)嵌在HTML結(jié)構(gòu)中 : 標(biāo)簽對(duì)②外鏈?zhǔn)?/p> 將CSS單獨(dú)存為.css文件,通過(guò)標(biāo)簽引入
③導(dǎo)入式
<style></style>標(biāo)簽對(duì)中使用@import 引入 導(dǎo)入式引入的樣式表,不會(huì)等待CSS文件加載完畢,而是會(huì)立即渲染HTML結(jié)構(gòu),所以會(huì)存在將只有結(jié)構(gòu)沒(méi)有樣式網(wǎng)頁(yè)的展現(xiàn)在用戶(hù)眼前的可能④行內(nèi)式 直接給標(biāo)簽添加style屬性
CSS的基本語(yǔ)法
選擇器 {key : value; }ps:最后一條樣式可以不寫(xiě)分號(hào)CSS選擇器
CSS2.1即存在標(biāo)簽選擇器元素選擇器,類(lèi)型選擇器,將選中頁(yè)面上所有該標(biāo)簽 通常用于標(biāo)簽初始化標(biāo)簽名 {key : value;}id選擇器id是標(biāo)簽的唯一標(biāo)識(shí)id命名規(guī)則只能由字母/數(shù)字/下劃線(xiàn)/短橫構(gòu)成不能以數(shù)字開(kāi)頭區(qū)分大小寫(xiě)(習(xí)慣上一般為小寫(xiě)字母)同一個(gè)頁(yè)面不能有相同id的標(biāo)簽#id{key: value;}class選擇器class 類(lèi)名命名規(guī)則與id相同多個(gè)標(biāo)簽可以為相同類(lèi)名同一個(gè)標(biāo)簽可以同時(shí)屬于多個(gè)類(lèi).class{key:value}原子類(lèi) 符合樣式的命名,如color-green , 文字顏色為綠色復(fù)合選擇器后代選擇器.box .spec 定位為類(lèi)名為box的標(biāo)簽內(nèi)部的類(lèi)名為spec的標(biāo)簽交集選擇器li.spec 標(biāo)簽為li,類(lèi)名為spec的元素并集選擇器ul,ol 同時(shí)選擇所有ul和ol標(biāo)簽偽類(lèi)a標(biāo)簽的四個(gè)特殊狀態(tài) :a:link 沒(méi)有被訪(fǎng)問(wèn)的鏈接a:visited 已經(jīng)被采訪(fǎng)過(guò)的鏈接a:hover 正被鼠標(biāo)懸停的鏈接a:active 正被激活的鏈接(按下未松開(kāi))CSS3新增元素關(guān)系選擇器子選擇器 div>p div標(biāo)簽的子標(biāo)簽p(從ie7開(kāi)始兼容)相鄰兄弟選擇器 img+p 圖片后緊跟著的段落將被選中(ie7開(kāi)始兼容)通用兄弟選擇器 p~span p元素之后的所有同層級(jí)span元素(ie7開(kāi)始兼容)序號(hào)選擇器:first-child 第一個(gè)子元素:last-child 最后一個(gè)子元素:nth-child(3) 第3個(gè)子元素:nth-of-type(3) 第3個(gè)某類(lèi)型子元素:nth-last-child(3) 倒數(shù)第3個(gè)子元素:nth-last-of-type(3) 倒數(shù)第3個(gè)某類(lèi)型子元素屬性選擇器(ie9兼容)舉例 img[alt] 具有alt屬性的img標(biāo)簽img[alt = '故宮'] 具有alt屬性,且屬性值為故宮的img標(biāo)簽img[alt^ = '故宮'] alt屬性以北京開(kāi)頭img[alt$ = '夜景'] alt屬性以夜景結(jié)尾img[alt* = '美'] alt屬性含有美字img[alt~ = '手機(jī)拍攝'] alt屬性中有空格隔開(kāi)的手機(jī)拍攝字樣img[alt | = '參賽作品'] alt屬性以參賽作品-開(kāi)頭CSS3新增偽類(lèi) 選中某元素,用戶(hù)賦予的狀態(tài):empty 選擇空標(biāo)簽 即標(biāo)簽中無(wú)內(nèi)容:focus 選擇當(dāng)前獲得焦點(diǎn)的表單元素:enabled 選擇當(dāng)前有效的表單元素:disabled 選擇當(dāng)前無(wú)效的表單元素:checked 選擇當(dāng)前已經(jīng)勾選的單選按鈕或者復(fù)選框:root 選擇根元素 ,即 <html> 標(biāo)簽偽元素?zé)o中生有,創(chuàng)造出的元素::before 創(chuàng)建一個(gè)偽元素,其將成為匹配選中的元素的第一個(gè)子元素content屬性 元素內(nèi)容,必須存在的屬性::after 與before類(lèi)似,但是為最后一個(gè)子元素::selection 用于文檔中被用戶(hù)高亮的部分(鼠標(biāo)圈選部分)::first-letter 選中某元素中(塊元素)第一行的第一個(gè)字母::first-line 選中某元素中(塊元素)第一行的全部文字 層疊性和選擇器權(quán)重計(jì)算層疊性 : 多個(gè)選擇器可以同時(shí)作用同一個(gè)標(biāo)簽,效果疊加選擇器權(quán)重 : !important > id > class > 標(biāo)簽文本與字體屬性
color屬性 設(shè)置文本內(nèi)容的前景色表示方法:英語(yǔ)單詞/十六進(jìn)制/rgb()/rgba()ps:rgba從ie9開(kāi)始兼容font-size屬性 設(shè)置文本內(nèi)容的字體大小 單位通常為px 像素font-weight屬性 設(shè)置文本內(nèi)容字體的粗細(xì)程度normal 正常粗細(xì) 等價(jià)于400/bold 加粗 等價(jià)于700/lighter 更細(xì) 大多數(shù)中文字體不支持/bolder 更粗 大多數(shù)中文此題不支持font-style屬性 設(shè)置文本內(nèi)容字體風(fēng)格normal 取消傾斜 比如將i標(biāo)簽,em標(biāo)簽包裹的字體設(shè)置為不傾斜/italic 傾斜/oblique 用常規(guī)字體模擬傾斜text-decoration屬性 設(shè)置文本的修飾線(xiàn)外觀none 沒(méi)有修飾線(xiàn)/underline 下劃線(xiàn)/line-through 刪除線(xiàn)font-family 字體家族 用于設(shè)置字體格式 如 楷體等等f(wàn)ont屬性 font-style,font-weight,font-size,line-height,font-family 屬性的合寫(xiě)font : italic bold 20px/1.5 Arial,'微軟雅黑' 傾斜 加粗 字號(hào)/行高 字體,備用字體擴(kuò)展:字體文件,需要同時(shí)有 eot/woff2/woff/ttf/svg五種文件@font-face 擁有字體文件以后,定義字體阿里巴巴普惠體 定義好的@font-face 注意:阿里巴巴普惠體示例中的文字就是改字體的所有文字段落和行相關(guān)屬性
text-indent屬性 用于定義首行文本內(nèi)容之前的縮進(jìn)量
舉例:text-indent : 2em 首行縮進(jìn)兩個(gè)字符
line-height屬性 行高
舉例:line-height : 30px/2/200% 30px的行高/字號(hào)的2倍/兩倍
設(shè)置單行文本垂直居中: 行高 = 盒子高度
設(shè)置文本水平居中: text-align:center
繼承性:設(shè)置祖先相關(guān)的屬性,后代所有標(biāo)簽中生效
具有繼承性的屬性:
color
font-
list-
text-
line-
盒模型
所有HTML標(biāo)簽都可以看成矩形盒子,由width/height/padding/border構(gòu)成,稱(chēng)為 盒模型
width/height 為 內(nèi)容的寬度/高度 padding 為內(nèi)容與邊框的距離 border 為邊框
盒子總寬度 = width + 左右padding + 左右border
高度同理
padding 屬性 內(nèi)邊距 四個(gè)方向
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
合寫(xiě) padding : 10px 20px 30px 40px 上右下左
padding : 10px 20px 30px 上 左右 下
padding : 10px 20px 上下 左右
margin 屬性 外邊距 與padding類(lèi)似
豎直方向的margin由塌陷現(xiàn)象,小的margin會(huì)塌陷,從而margin不疊加,只以大值為準(zhǔn)
有默認(rèn)margin的元素 body/ul/p…
盒子的水平居中 通過(guò)設(shè)置margin -> margin : 0 auto 可以實(shí)現(xiàn)
box-sizing 屬性
添加 box-sizing:border-box后,盒子的width和height就會(huì)變成盒子實(shí)際寬高,padding/border內(nèi)縮,不再外擴(kuò)
display 屬性
block 轉(zhuǎn)為塊元素
inline 轉(zhuǎn)為行內(nèi)元素
inline-block 轉(zhuǎn)為行內(nèi)塊元素
none 將元素隱藏,徹底放棄位置 // visibility : hidden 也可以隱藏元素,但是仍舊持有元素位置
行內(nèi)元素 可以并排顯示,不能設(shè)置寬高,width自動(dòng)收縮
塊元素 不能并排顯示,可以設(shè)置寬高,不設(shè)置width自動(dòng)撐滿(mǎn)
行內(nèi)塊元素 既能夠設(shè)置寬高,同時(shí)也能并排顯示
``
總結(jié)
以上是生活随笔為你收集整理的CSS基础语法和盒模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 基于物联网的室内环境监测系统的背景描述
- 下一篇： CSS学习笔记 01、CSS3基础知识学