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