日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

CSS基礎(chǔ)語(yǔ)法和盒模型

作者：Youth009 更新時(shí)間： 2022-07-18 編程語(yǔ)言

CSS基礎(chǔ)語(yǔ)法和盒模型

CSS簡(jiǎn)介

Cascading Style Sheet 層疊樣式表 用于給HTML標(biāo)簽添加樣式

CSS3是CSS的最新版本 增加了大量的樣式/動(dòng)畫/3D特效以及移動(dòng)端特性

前端三劍客 HTML/CSS/JS 結(jié)構(gòu)/樣式/行為

HTML 與 CSS 之間的綁定 -> 選擇器

CSS的書寫位置

①內(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)沒有樣式網(wǎng)頁(yè)的展現(xiàn)在用戶眼前的可能

④行內(nèi)式 直接給標(biāo)簽添加style屬性

CSS的基本語(yǔ)法

選擇器 {
	key : value;
}

ps:最后一條樣式可以不寫分號(hào)

CSS選擇器

	CSS2.1即存在
        標(biāo)簽選擇器
        	元素選擇器,類型選擇器,將選中頁(yè)面上所有該標(biāo)簽  通常用于標(biāo)簽初始化
        		標(biāo)簽名 {
					key : value;
				}
        id選擇器
        	id是標(biāo)簽的唯一標(biāo)識(shí)
        	id命名規(guī)則
        		只能由字母/數(shù)字/下劃線/短橫構(gòu)成
        		不能以數(shù)字開頭
        		區(qū)分大小寫(習(xí)慣上一般為小寫字母)
        		同一個(gè)頁(yè)面不能有相同id的標(biāo)簽
        		#id{
        			key: value;
        		}
        class選擇器
        	class 類名
        	命名規(guī)則與id相同
        	多個(gè)標(biāo)簽可以為相同類名
        	同一個(gè)標(biāo)簽可以同時(shí)屬于多個(gè)類
        		.class{
        			key:value
        		}
        	原子類 符合樣式的命名,如color-green , 文字顏色為綠色
        復(fù)合選擇器
        	后代選擇器
        		.box .spec 定位為類名為box的標(biāo)簽內(nèi)部的類名為spec的標(biāo)簽
        	交集選擇器
        		li.spec 標(biāo)簽為li,類名為spec的元素
        	并集選擇器
        		ul,ol 同時(shí)選擇所有ul和ol標(biāo)簽
        偽類
        	a標(biāo)簽的四個(gè)特殊狀態(tài) :
        		a:link 沒有被訪問(wèn)的鏈接
        		a:visited 已經(jīng)被采訪過(guò)的鏈接
        		a:hover 正被鼠標(biāo)懸停的鏈接
        		a:active 正被激活的鏈接(按下未松開)
    CSS3新增
    	元素關(guān)系選擇器
    		子選擇器 div>p div標(biāo)簽的子標(biāo)簽p(從ie7開始兼容)
    		相鄰兄弟選擇器 img+p 圖片后緊跟著的段落將被選中(ie7開始兼容)
    		通用兄弟選擇器 p~span p元素之后的所有同層級(jí)span元素(ie7開始兼容)
    	序號(hào)選擇器
    		:first-child 第一個(gè)子元素
    		:last-child 最后一個(gè)子元素
    		:nth-child(3) 第3個(gè)子元素
    		:nth-of-type(3) 第3個(gè)某類型子元素
    		:nth-last-child(3) 倒數(shù)第3個(gè)子元素
    		:nth-last-of-type(3) 倒數(shù)第3個(gè)某類型子元素
    	屬性選擇器(ie9兼容)
    		舉例 
    			img[alt] 具有alt屬性的img標(biāo)簽
    			img[alt = '故宮'] 具有alt屬性,且屬性值為故宮的img標(biāo)簽
    			img[alt^ = '故宮'] alt屬性以北京開頭
    			img[alt$ = '夜景'] alt屬性以夜景結(jié)尾
    			img[alt* = '美'] alt屬性含有美字
    			img[alt~ = '手機(jī)拍攝'] alt屬性中有空格隔開的手機(jī)拍攝字樣
    			img[alt | = '參賽作品'] alt屬性以參賽作品-開頭
    	CSS3新增偽類 
    		選中某元素,用戶賦予的狀態(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)簽
    	偽元素
    		無(wú)中生有,創(chuàng)造出的元素
                ::before 創(chuàng)建一個(gè)偽元素,其將成為匹配選中的元素的第一個(gè)子元素
                    content屬性 元素內(nèi)容,必須存在的屬性
                ::after 與before類似,但是為最后一個(gè)子元素
                ::selection 用于文檔中被用戶高亮的部分(鼠標(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開始兼容

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è)置文本的修飾線外觀
	none 沒有修飾線/underline 下劃線/line-through 刪除線
	
font-family 字體家族 用于設(shè)置字體格式 如 楷體等等

font屬性 font-style,font-weight,font-size,line-height,font-family 屬性的合寫
	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-

注意:繼承的情況下,選擇器權(quán)重計(jì)算失效,遵循就近原則

盒模型

所有HTML標(biāo)簽都可以看成矩形盒子,由width/height/padding/border構(gòu)成,稱為 盒模型

width/height 為 內(nèi)容的寬度/高度 padding 為內(nèi)容與邊框的距離 border 為邊框
盒子總寬度 = width + 左右padding + 左右border
高度同理

padding 屬性 內(nèi)邊距 四個(gè)方向
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
合寫 padding : 10px 20px 30px 40px 上右下左
padding : 10px 20px 30px 上 左右 下
padding : 10px 20px 上下 左右

margin 屬性 外邊距 與padding類似
豎直方向的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)撐滿
行內(nèi)塊元素 既能夠設(shè)置寬高,同時(shí)也能并排顯示
``

原文鏈接：https://blog.csdn.net/qq_53300975/article/details/125836463

欄目分類
最近更新