Loading... ## CSS的概念 * 级联样式表 (Cascading Style Sheet) * 表现HTML或XHTML文件样式的计算机语言 * 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定 ## CSS的优势 * 内容(网页元素)与表现(样式表)分离 * 网页的表现统一，容易修改 * 丰富的样式，使得页面布局更加灵活 * 减少网页的代码量，提升网页的浏览速度，节省网络带宽 * 运用独立于页面的CSS，有利于网页被搜索引擎收录 ## CSS的语法 语法结构: ```css 选择器 { 属性名称 : 属性值; 属性名称 : 属性值; } /*注意: 最后的一条声明,可以省略分号(;),但是为了样式的易扩展性,建议不要省略分号*/ /*选择器: 需要选择页面中的哪些元素实现哪些操作 */ 示例: h1{ color : red; } 解释: 选取页面中所有的h1标签,将文本颜色设定为红色 ``` ## 样式表的分类 ### 外部样式表 [优先级最低] [推荐] 1. 先要创建一个样式表文件 (*.css), 样式表文件一般存放在 css目录 或 style目录 2. 在需要使用到的页面中导入外部样式表 * 链接式 [ <link>标签需要定义在<head>标签中 ] * 语法: `<link rel="stylesheet" type="text/css" href="css/home.css"/>` * 属性解释 * **href : 外部样式表的相对路径 [req]** * **rel : 用于指定当前文档与外部样式表的关系 [req]** * type : 外部样式表的类型 [可以省略不写] * 导入式 [不推荐使用] ```html <style type="text/css"> <!-- @import url("css/home.css"); --> </style> ``` 链接式和导入式的区别 * `<link/>`标签属于XHTML，**@import** 是属于CSS2.1 * 使用 `<link/>`链接的CSS文件先加载到网页当中，再进行编译显示 * 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 * **@import** 是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的 ### 内部样式表 在`<head>`标签中创建一个`<style>`标签 ```html <style type="text/css"> h3{ font-size:15px; //设置字体大小 } </style> ``` ### 行内样式 [优先级最高] 直接写在标签中,需要使用style属性 ```html <p style="color: red; font-size: 20px;">这是一个段落文本</p> ``` ### 样式表的优先级 * 行内样式 > 内部样式 > 外部样式 * 需要考虑就近原则 ## CSS的选择器 ### 选择器的分类 * 基本选择器 * 标签选择器 * 类选择器 * ID选择器 * 高级选择器 * 层次选择器 * 结构伪类选择器 * 属性选择器 ### 基本选择器语法 * 标签选择器 ```css 标签名 { 属性名 : 属性值; ..... } ``` 标签名是页面中的标签名称,例如h1,h2,img,p... * 类选择器 ```css .类名{ //在声明的时候,类名前面必须要有点(.) 属性名 : 属性值; ..... } ``` 类选择器可以在页面中多次使用,使用的时候需要通过 class="类名" 实现调用,在调用的时候不需要写点(.) * ID选择器 ```css #ID名称{ 属性名 : 属性值; ..... } ``` ID选择在页面中优先级是最高的,同一个ID名称,在同一个页面中只能使用1次,不能重复使用,需要通过 id="ID名称"实现调用(ID名称必须是唯一的) * 基本选择器的优先级 * ID选择器 > 类选择器 > 标签选择器 [不考虑就近原则] ### 高级选择器语法 * 层次选择器 * 后代选择器 `h1 a{ color : red; }` * 获取h1标签里面所有的a标签 * 子选择器 `h1>a{ color : red; }` * 获取h1标签中所有子元素a标签 * 相邻兄弟选择器 `h1+p{ color : red; }` * 获取紧位于h1标签之后的同级p元素,只能获取1个,中间不能出现其他元素 * 通用兄弟选择器 `h1~p{ color : red;}` * 获取h1标签之后的同级p元素,能够获取多个,中间可以出现其他元素 * 结构伪类选择器 * **`E:first-child` 作为父元素的第一个子元素的元素E** * `**E:last-child` 作为父元素的最后一个子元素的元素E** * **`E F:nth-child(n) ` 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd** * **`E:first-of-type` 选择父元素内具有指定类型的第一个E元素** * `**E:last-of-type` 选择父元素内具有指定类型的最后一个E元素** * **`E F:nth-of-type(n)` 选择父元素内具有指定类型的第n个F元素** * 属性选择器 * `h1[id]` 选择页面中所有的h1元素并且需要具有id属性 * `h1[id=cc]` 选择页面中所有的h1元素并且需要具有id属性，且属性值为cc（属性值区分大小写） * `h1[id^=cc]` 选择页面中所有的h1元素并且需要具有id属性，且属性值以cc开头 * `h1[id$=cc]` 选择页面中所有的h1元素并且需要具有id属性，且属性值以cc结尾 * `h1[id*=cc]` 选择页面中所有的h1元素并且需要具有id属性，且属性值包含cc即可 --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - CSS3美化网页元素](https://jbea.cn/archives/518.html) </div> 最后修改：2022 年 09 月 04 日 © 允许规范转载 赞 5 都滑到这里了，不点赞再走！？
