HTMLCSS 超简单的前端设计入门-2!
文章目錄
- 圖片元素
- img元素
- 和a元素連用
- 和map元素
- 和figure元素
- 多媒體元素
- video
- audio
- 列表元素
- 有序列表
- 無序列表
- 定義列表
- 容器元素
- `div`元素
- 語義化容器元素
- 元素包含關系
- 為網頁添加樣式CSS
- 術語解釋
- 選擇器
- 聲明塊
- CSS代碼書寫位置
- 常見樣式聲明
- 選擇器
- 簡單選擇器
- 選擇器的組合
- 選擇器的并列
- 層疊
- 1. 比較重要性
- 2. 比較特殊性
- 3. 比較源次序
- 應用
- 繼承
- 屬性值的計算過程
- 盒模型
- 盒子的組成部分
- 盒模型應用
- 改變寬高范圍
- 改變背景覆蓋范圍
- 溢出處理
- 斷詞規則
- 空白處理
- 行盒的盒模型
- 行盒顯著特點
- 行塊盒
- 空白折疊
- 可替換元素 和 非可替換元素
- 常規流
- 常規流布局
- 塊盒
圖片元素
img元素
- image縮寫, 空元素
- src屬性: 資源source
- alt屬性: 當圖片資源失效時, 將使用該屬性的文字信息
和a元素連用
和map元素
- map: 地圖
- map的子元素area
- 衡量坐標使用專業量圖工具
- ps, pxcook
和figure元素
- 通常用于把圖片, 圖片標題,描述包裹起來
- 子元素figcaption: 用于圖片標題
多媒體元素
- video: 視頻
- audio: 音頻
video
- controls: 控制空間的顯示, 取值為controls
- 布爾屬性: 某些屬性只有兩種狀態
-
- 不寫
- 值為屬性值
- autoplay: 布爾屬性
- muted: 靜音播放, 布爾屬性
- loop: 循環播放, 布爾屬性
audio
- 相同于video
列表元素
有序列表
-
ol: ordered list 表示整個列表
-
li: list item 表示列表里面的元素
-
reversed: 布爾屬性, 邏輯顛倒(僅是標號顛倒)
-
type: 標號方式
無序列表
- ul: unordered list
- 無序列表常用于制作菜單或者新聞列表
定義列表
- 用于一些術語的定義
- dl: definition list
- dd: definition description
- dt: definition title
容器元素
- 容器元素: 該元素代表一個區域, 區域內部用于放置其他元素
div元素
- 沒有語義, 劃分區域而已
語義化容器元素
- header: 通常用于表示頁頭,也用于表示文章的頭部
- footer: 通常用于表示頁腳,也用于文章的尾部
- article:通常用于表示整章文章
- section: 通常用于表示文章的章節
- aside: 通常用于表示側邊欄,附加信息
元素包含關系
-
元素的包含關系由元素的內容類別決定
-
查看: 某元素 mdn 百度上查看
-
容器元素中可以包含任何元素
-
a元素中幾乎可以包含任何元素
-
某些元素有固定的子元素(ul->li, ol->li, dl->dd,dt)
-
標題元素和段落元素不能相互嵌套, 并且不能包含容器元素
為網頁添加樣式CSS
術語解釋
-
CSS規則 = 選擇器 + 聲明塊
選擇器: 選中元素聲明塊: 放屬性
<style>h1{color: red;background-color: lightblue;text-align: center;}</style>
選擇器
聲明塊
- 出現在選擇器后面的大括號中 . 包含眾多聲明(屬性)
CSS代碼書寫位置
- 書寫在style元素中
- 直接書寫在元素的style屬性中
- 將樣式書寫到獨立的css文件中
- 外部樣式表可以解決多頁面重復問題
- 有利于瀏覽器緩存,提高頁面響應速度
- 有利于代碼(css, html)分離, 提高可讀性和維護
常見樣式聲明
color:文字顏色
預設值: 定義好的單詞
三原色: 色值, 每個顏色區間0~255
rgb(111, 120, 255) hex() #008c8c (16進制表示)淘寶紅 #ff4400 或者#f40 黑色 #000 白色 #fff 紅 #f00 綠 #0f0 藍 #00f 紫 #f0f 青 #0ff 黃 #ff0 灰色 #cccbackground-color: 元素背景顏色
font-size: 元素內部文字尺寸大小
-
單位px: 像素,理解為文字大小
-
em: 相對單位, 相對于父元素文字大小
-
每個元素必須有字體大小, 如果沒有繼承父元素字體大小,沒有父元素,用基準字號
user agent: UA, 用戶代理(瀏覽器)
font-weight: 文字粗細程度
- 取值: 數字,預設值(設置好的單詞)
font-family: 文字類型, 用戶計算機中存在的字體
- 可以設置多個字體
- san-serif: 非襯線字體, 通用字體, 放在最后
font-style: 字體樣式, 比如斜體
- i: 該元素默認字體樣式為傾斜字體, 通常表示圖標篇, em也是斜體
- strong, em: strong默認字體加粗, 前者表示重要的,不能忽略的內容, 后者表示強調的內容
- del: 表示錯誤的內容
- s: 表示過期的內容
text-decoration:給文本加線
text-indent: 首行文本縮進
line-height: 行高
- 設置行高為容器高度, 可以讓單行文本垂直居中
- 行高設置為純數字,表示相對于當前元素字體大小
width: 寬度
height: 高度
letter-space: 文字之間間隙
text-align: 元素內部文字水平排列方式
選擇器
簡單選擇器
- 網上搜索屬性選擇器 mdn
- *: 選中所有的元素
- 根據屬性名和屬性值選擇元素
- 選中某些元素的某種狀態
- link: 超鏈接未被訪問時的狀態
- visited: 超鏈接訪問過后的狀態
- hover: 鼠標懸停狀態
- active: 鼠標按下狀態
- 愛恨法則： love hate
- before:第一個元素
- after: 最后一個元素
選擇器的組合
選擇器的并列
- 多個選擇器用,分隔
層疊
- 聲明沖突: 同一個樣式, 多次應用到了同一個元素
- 層疊: 解決聲明沖突的過程,瀏覽器自動處理(又叫權重計算)
1. 比較重要性
-
重要性從高到低
作者樣式表: 開發者書寫的樣式
- 作者樣式表中的!important
- 作者樣式表中的普通樣式
- 瀏覽器默認樣式表中的樣式
2. 比較特殊性
- 總體規則: 看選擇器選中的范圍越小越特殊
- 具體規則: 通過選擇器計算出一個四位數
- 千位: 如果是內聯樣式記作1, 否則記0
- 百位: 等于選擇器中所有id選擇器的數量
- 十位: 等于選擇器中所有類選擇器,屬性選擇器,偽類選擇器的數量之和
- 個位: 等于所有元素選擇器,偽元素選擇器的數量之和
3. 比較源次序
- 代碼書寫靠后的勝出
應用
重置樣式表
- 書寫一些作者樣式, 覆蓋瀏覽器的默認樣式
- 重置樣式表覆蓋瀏覽器的默認樣式
常見的重置樣式表: normalize.css , reset.css, meyer.css
愛恨法則
- link > visited > hover > active
繼承
- 子元素可以繼承父元素的某些屬性
- 某些屬性: 一般指字體相關的屬性
屬性值的計算過程
-
一個一個元素依次渲染, 按照頁面文檔的樹形目錄進行
-
渲染每個元素的前提條件: 該元素所有CSS屬性必須有值
-
屬性的計算過程: 一個元素, 從所有屬性沒有值到所有屬性都有值
-
過程:
-
確定聲明值: 參考樣式表中沒有沖突的聲明作為css屬性值
-
a: 該元素默認聲明了樣式
- <style>p{color: red;}a{ /* 強制繼承 */color: inherit;}</style> </head> <body><p><a href="">21120</a><p>vsndikj</p></p> </body>
-
-
層疊沖突: 有沖突的使用層疊規則確定CSS屬性
- 依次比較重要性,特殊性,次序
-
使用繼承: 任然沒有值的屬性繼承父元素的值
-
使用默認值: 對仍然沒有值的屬性使用默認值
-
inherit: 手動強制繼承, 將父元素的值去除應用到該元素
-
initial: 初始值, 將該屬性設置為默認值
盒模型
-
box：盒子，每個元素在頁面中都會生成一個矩形區域（盒子）
-
盒子類型：
行盒，display等于inline的元素
塊盒，display等于block的元素
-
行盒在頁面中不換行、塊盒獨占一行
-
display默認值為inline
-
瀏覽器默認樣式表設置的塊盒：容器元素、h1~h6、p
-
常見的行盒：span、a、img、video、audio
盒子的組成部分
- 無論是行盒、還是塊盒，都由下面幾個部分組成，從內到外分別是：
內容 content
- width、height，設置的是盒子內容的寬高
- 內容部分通常叫做整個盒子的內容盒 content-box
填充(內邊距) padding
- 盒子邊框到盒子內容的距離
- padding-left、padding-right、padding-top、padding-bottom
- padding: 簡寫屬性
- padding: 上 右 下 左(順時針)
- 填充區+內容區 = 填充盒 padding-box
邊框 border
- 邊框 = 邊框樣式 + 邊框寬度 + 邊框顏色(這三種都是速寫屬性, 順時針)
- 邊框樣式：border-style
- 邊框寬度：border-width
- 邊框顏色：border-color
- 邊框+填充區+內容區 = 邊框盒 border-box
外邊距 margin
- 邊框到其他盒子的距離
- margin-top、margin-left、margin-right、margin-bottom
- 速寫屬性margin
盒模型應用
改變寬高范圍
- 默認情況下，width 和 height 設置的是內容盒寬高。
頁面重構師：將psd文件（設計稿）制作為靜態頁面
- 衡量設計稿尺寸的時候，往往使用的是邊框盒，但設置width和height，則設置的是內容盒
精確計算
CSS3：box-sizing
改變背景覆蓋范圍
-
默認情況下，背景覆蓋邊框盒
-
可以通過background-clip進行修改(內容盒,填充盒,邊框盒)
溢出處理
- overflow，控制內容溢出邊框盒后的處理方式(hidden, visible, scroll,auto)
斷詞規則
- word-break，會影響文字在什么位置被截斷換行, 下面三種取值:
- jw: 鍵入中文亂數假文(擴展Chinese Lorem)
- normal：普通。CJK(中日韓)字符（文字位置截斷），非CJK字符（單詞位置截斷）
- break-all：截斷所有。所有字符都在文字處截斷
- keep-all：保持所有。所有文字都在單詞之間截斷
空白處理
- white-space: nowrap, 不換行
- margin: 外邊距
- text-overflow: ellipsis, 文字溢出顯示省略號, 僅能控制單行文本,多行用js處理
- white-space: pre, 不會進行空白折疊
行盒的盒模型
-
常見的行盒：包含具體內容的元素
-
span、strong、em、i、img、video、audio
行盒顯著特點
盒子沿著內容沿伸, 內容多少盒子多大
行盒不能設置寬高
- 調整行盒的寬高，應該使用字體大小、行高、字體類型，間接調整。
- 水平方向有效，垂直方向不會實際占據空間。
- 水平方向有效，垂直方向不會實際占據空間。
- 水平方向有效，垂直方向不會實際占據空間。
行塊盒
- display：inline-block的盒子
不獨占一行
盒模型中所有尺寸都有效
空白折疊
- 空白折疊，發生在行盒（行塊盒）內部 或 行盒（行塊盒）之間
可替換元素 和 非可替換元素
- 大部分元素，頁面上顯示的結果，取決于元素內容，稱為非可替換元素
- 少部分元素，頁面上顯示的結果，取決于元素屬性，稱為可替換元素
- 可替換元素：img、video、audio
- 絕大部分可替換元素均為行盒。
- 可替換元素類似于行塊盒，盒模型中所有尺寸都有效。
- object-fit:contain, fill, cover 依次表示保持圖片尺寸, 填充(默認), 填充并且保持圖片尺寸
常規流
-
盒模型：規定單個盒子的規則
-
視覺格式化模型（布局規則）：頁面中的多個盒子排列規則
-
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
常規流
浮動
定位
常規流布局
-
又名: 常規流、文檔流、普通文檔流、常規文檔流
-
所有元素，默認情況下，都屬于常規流布局
-
總體規則：塊盒獨占一行，行盒水平依次排列
-
包含塊（containing block）：每個盒子都有它的包含塊，包含塊決定了盒子的排列區域。
-
絕大部分情況下：盒子的包含塊，為其父元素的內容盒
塊盒
-
width:寬度的默認值是auto
-
margin的取值也可以是auto，默認值0
-
auto：將剩余空間吸收掉
-
width吸收能力強于margin
-
若寬度、邊框、內邊距、外邊距計算后，仍然有剩余空間，該剩余空間被margin-right全部吸收
-
在常規流中，塊盒在其包含快中居中，可以定寬、然后左右margin設置為auto。
-
height:auto， 適應內容的高度
-
margin:auto， 表示0
-
padding、寬、margin可以取值為百分比
-
以上的所有百分比相對于包含塊的寬度。
-
高度的百分比：
1）. 包含塊的高度是否取決于子元素的高度，設置百分比無效
2）. 包含塊的高度不取決于子元素的高度，百分比相對于父元素高度
-
兩個常規流塊盒，上下外邊距相鄰，會進行合并。
-
兩個外邊距取最大值。
總結
以上是生活随笔為你收集整理的HTMLCSS 超简单的前端设计入门-2!的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CoreJava 笔记总结-第六章 接口
- 下一篇： nginx 带宽_前端工程师不可不知的N