柚子快報(bào)邀請(qǐng)碼778899分享：前端 初始CSS
柚子快報(bào)邀請(qǐng)碼778899分享：前端 初始CSS
1. CSS 簡介
CSS 是用于定義網(wǎng)頁樣式和布局的樣式表語言；
通過 CSS，你可以指定頁面中各個(gè)元素的顏色、字體、大小、間距、邊框、背景等樣式，實(shí)現(xiàn)更精確的頁面設(shè)計(jì)；
舉個(gè)栗子，HTML 就好像房子的搭建，CSS 就好像房子的裝修；
2. CSS 語法
CSS 通常由選擇器、屬性和屬性值組成，多個(gè)規(guī)則可以組合在一起，以便同時(shí)應(yīng)用多個(gè)樣式；
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
}
注：
選擇器的聲明中可以寫無數(shù)條屬性；聲明中的每一行以分號(hào)結(jié)尾；聲明中的所有屬性和屬性值以鍵值對(duì)的形式存在；
示例：
這是一個(gè)應(yīng)用了CSS樣式的文本段落
效果圖：
3. CSS 三種導(dǎo)入方式
內(nèi)聯(lián)樣式 – 直接在標(biāo)簽的 style 屬性中設(shè)定樣式；內(nèi)部樣式表 – 在 HTML 文件的 head 標(biāo)簽中設(shè)定對(duì)應(yīng)標(biāo)簽的樣式；外部樣式表 – 在一個(gè)單獨(dú)的 CSS 文件中設(shè)置各種標(biāo)簽的樣式，然后在 head 標(biāo)簽中 link 進(jìn)來；
優(yōu)先級(jí)：
內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表
示例：
這是一個(gè)應(yīng)用了CSS樣式的文本段落
這是一個(gè)一級(jí)標(biāo)題，使用內(nèi)聯(lián)樣式
這是一個(gè)二級(jí)標(biāo)題，使用內(nèi)部樣式
這是一個(gè)三級(jí)標(biāo)題，使用外部樣式
/* CSS 文件 */
h3 {
color: palevioletred;
}
效果：
4. CSS 選擇器
選擇器是 CSS 中的關(guān)鍵部分，它允許你針對(duì)特定元素或一組元素定義樣式；
常見的選擇器有：
元素選擇器類選擇器ID 選擇器通用選擇器子元素選擇器后代選擇器（包含選擇器）并集選擇器（兄弟選擇器）偽類選擇器
一些快捷方法：
標(biāo)簽.class 可以快速生成一個(gè)帶有指定類的標(biāo)簽；
標(biāo)簽#id 可以快速生成一個(gè)帶有指定 ID 的標(biāo)簽；
示例：
不同類型的 CSS 選擇器
這是一個(gè)元素選擇器
這是一個(gè)類選擇器
這也是一個(gè)類選擇器
這是一個(gè) ID 選擇器
這是一個(gè)子元素選擇器
這是一個(gè)后代選擇器
這是一個(gè)普通的 p 標(biāo)簽
這是一個(gè)相鄰兄弟選擇器
這是另一個(gè)普通的 p 標(biāo)簽
這是一個(gè)偽類選擇器
不同類型的 CSS 選擇器
這是一個(gè)元素選擇器
這是一個(gè)類選擇器
這也是一個(gè)類選擇器
這是一個(gè) ID 選擇器
顯示效果：
5. CSS 常用屬性
CSS 的屬性很多，詳細(xì)可以參考菜鳥教程；
示例：
這是一個(gè)復(fù)合屬性
《原神》是由米哈游自主研發(fā)的一款全新開放世界冒險(xiǎn)游戲。
游戲發(fā)生在一個(gè)被稱作「提瓦特」的幻想世界，在這里，被神選中的人將被授予「神之眼」，導(dǎo)引元素之力。
你將扮演一位名為「旅行者」的神秘角色，在自由的旅行中邂逅性格各異、能力獨(dú)特的同伴們，
和他們一起擊敗強(qiáng)敵，找回失散的親人——同時(shí)，逐步發(fā)掘「原神」的真相。
這是一個(gè)行內(nèi)元素
這是一個(gè)轉(zhuǎn)換為行內(nèi)塊元素的 span 標(biāo)簽
這是一個(gè)轉(zhuǎn)換為塊元素的 span 標(biāo)簽
顯示效果：
5. 盒子模型
說明：
屬性名說明內(nèi)容 Content盒子包含的實(shí)際內(nèi)容，例如文本、圖片等內(nèi)邊距 Padding內(nèi)容與邊框之間的空間邊框 Border盒子的邊界外邊距 Margin盒子與其他元素之間的空間
示例：
顯示效果：
6. 浮動(dòng)
傳統(tǒng)網(wǎng)頁布局方式：
標(biāo)準(zhǔn)流（普通流、文檔流）：網(wǎng)頁按照元素的書寫順序依次排列；浮動(dòng)定位Flexbox 和 Grid（自適應(yīng)布局）
浮動(dòng)的三大特性：
脫離標(biāo)準(zhǔn)流；一行顯示，頂部對(duì)齊；具備行內(nèi)塊元素特性；
簡單來說，浮動(dòng)就是讓元素水平無縫銜接，示例如下：
顯示效果：
7. 定位
定位布局可以精確定位，但是缺乏靈活性；
定位方式：
相對(duì)定位：相對(duì)于元素在文檔流中的正常位置進(jìn)行定位；絕對(duì)定位：相對(duì)于其最近的已定位祖先元素進(jìn)行定位，不占據(jù)文檔流；固定定位：相對(duì)于瀏覽器窗口進(jìn)行定位。不占據(jù)文檔流，固定在屏幕上的位置，不隨滾動(dòng)而移動(dòng)；
示例代碼：
相對(duì)定位
絕對(duì)定位
固定定位
顯示效果：
柚子快報(bào)邀請(qǐng)碼778899分享：前端 初始CSS
相關(guān)鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Sendo速達(dá)外貿(mào)棧
