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