# CSS基础知识 ### CSS简介 <img width="600" height="138" alt="Image" src="https://github.com/user-attachments/assets/4454f9a7-70c8-4a47-bd46-9cb4c25ef63a" /> <img width="479" height="164" alt="Image" src="https://github.com/user-attachments/assets/2dade072-e1b5-435b-a0c7-2b358bd6039f" /> <img width="478" height="84" alt="Image" src="https://github.com/user-attachments/assets/f497273c-b1d0-4e28-8c4b-9e1bb19160ae" /> <img width="478" height="297" alt="Image" src="https://github.com/user-attachments/assets/3668af04-6a56-4e51-9aaf-9b127b9fb41b" /> 语法规范： 选择器 { 样式; } ### CSS代码风格 #### 1、样式格式书写 <img width="900" height="500" alt="Image" src="https://github.com/user-attachments/assets/32bc7c32-8310-4348-80c7-bb8a8e050214" /> #### 2、样式大小写 提倡用小写字母书写 <img width="900" height="248" alt="Image" src="https://github.com/user-attachments/assets/5541d1cd-5def-4724-ad57-bf55641a42ac" /> #### 3、空格规范 <img width="343" height="91" alt="Image" src="https://github.com/user-attachments/assets/1405001f-683c-4734-920a-4acbf65440f9" /> ### CSS选择器的作用 <img width="789" height="278" alt="Image" src="https://github.com/user-attachments/assets/e0bc62e4-5b48-4e65-b9b2-9980cb8e8d57" /> <img width="558" height="215" alt="Image" src="https://github.com/user-attachments/assets/c1ffc8e3-e6ae-4503-9746-d95b7fe17eff" /> ### 选择器的分类 #### 基础选择器 ##### 标签选择器 <img width="754" height="177" alt="Image" src="https://github.com/user-attachments/assets/faa3d06c-d634-4d5e-a5b0-30b9bcdd8d5a" /> <img width="825" height="400" alt="Image" src="https://github.com/user-attachments/assets/c99c33db-b5a8-43f8-b6d7-85a39eecd5c0" /> ##### 类选择器 <img width="795" height="490" alt="Image" src="https://github.com/user-attachments/assets/6cae3aba-ede4-4d32-9389-75f4d5137515" /> <img width="661" height="231" alt="Image" src="https://github.com/user-attachments/assets/84f0a9b9-0a75-4771-b786-6f07099184be" /> 多类名 <img width="771" height="267" alt="Image" src="https://github.com/user-attachments/assets/b9f8b947-7fb9-4ee3-8bd0-67580ab52bb6" /> <img width="775" height="274" alt="Image" src="https://github.com/user-attachments/assets/7c987a68-2e26-43df-8218-e64cf8597ec8" /> <img width="800" height="387" alt="Image" src="https://github.com/user-attachments/assets/18eddd3a-0666-4b54-bf49-57450c4b9a9c" /> ##### id选择器 <img width="533" height="142" alt="Image" src="https://github.com/user-attachments/assets/fad536bd-70cf-44b1-9d6c-6598d900a377" /> <img width="900" height="411" alt="Image" src="https://github.com/user-attachments/assets/31126fc6-657b-4aeb-8c51-5869343b8a85" /> ##### 通配符选择器 <img width="775" height="293" alt="Image" src="https://github.com/user-attachments/assets/1a3ac20e-bb94-4e93-886b-3a4592a2ca3a" /> ### 选择器总结 <img width="846" height="449" alt="Image" src="https://github.com/user-attachments/assets/032f3151-dbbb-4e56-b410-904e7c0b98b3" /> ### CSS引入方式 <img width="631" height="317" alt="Image" src="https://github.com/user-attachments/assets/db642a2c-090e-49a0-94b6-451f85bc1780" /> ##### 行内样式表 <img width="900" height="277" alt="Image" src="https://github.com/user-attachments/assets/0c1b0228-1400-469e-9fb5-a911c35e52e8" /> ##### 内部样式表 <img width="781" height="288" alt="Image" src="https://github.com/user-attachments/assets/76c772f2-9c91-43ab-aee2-2d24e9f96f3a" /> <img width="697" height="150" alt="Image" src="https://github.com/user-attachments/assets/d38b7aca-47c2-4ebf-8119-8f3350a545a6" /> ##### 外部样式表 <img width="840" height="551" alt="Image" src="https://github.com/user-attachments/assets/143e339c-35b1-4793-8a92-1b1090926c06" /> <img width="798" height="242" alt="Image" src="https://github.com/user-attachments/assets/52199d3b-52aa-415e-a81b-6a4292144f99" /> ### emmet语法 <img width="809" height="200" alt="Image" src="https://github.com/user-attachments/assets/98d284fa-67d9-41b0-87d2-079dab13cf15" /> <img width="693" height="313" alt="Image" src="https://github.com/user-attachments/assets/7e4e8637-f13f-467d-b2b8-b61742becb71" /> ### 元素显示模式 <img width="823" height="227" alt="Image" src="https://github.com/user-attachments/assets/ff392676-f0ed-4e8d-a89a-e3a188485010" /> <img width="879" height="445" alt="Image" src="https://github.com/user-attachments/assets/fd48fb08-699f-46a4-9356-2d64e00d2164" /> <img width="868" height="445" alt="Image" src="https://github.com/user-attachments/assets/8cf3046b-f770-4ae2-8f0e-e330ad646166" /> <img width="798" height="331" alt="Image" src="https://github.com/user-attachments/assets/c7100285-f112-44e9-96d5-8ed7a62bb4ef" /> <img width="854" height="337" alt="Image" src="https://github.com/user-attachments/assets/080b4845-4f94-4ddb-9cf3-492c43b8a89b" />
CSS基础知识
CSS简介
语法规范：
选择器 {
样式;
}
CSS代码风格
1、样式格式书写
2、样式大小写
3、空格规范
CSS选择器的作用
选择器的分类
基础选择器
标签选择器
类选择器
多类名
id选择器
通配符选择器
选择器总结
CSS引入方式
行内样式表
内部样式表
外部样式表
emmet语法
元素显示模式