CSS基础与选择器（一）：从入门到常见选择器

一、HTML与CSS概述1.1 HTML基本结构HTML超文本标记语言是网页的基础结构包含约40个常用标签负责定义页面的内容和骨架。1.2 CSS的作用CSS层叠样式表用于设置HTML元素的显示样式学习过程主要分为三步CSS语言写在哪里3种引入方式CSS选择器约30种常用10多种设置具体样式二、CSS基本语法2.1 基本样式语法样式名: 样式值;示例width: 300px; /* 设置宽度300像素 */ height: 300px; /* 设置高度300像素 */ background-color: red; /* 设置背景颜色红色 */ color: white; /* 设置字体颜色白色 */ font-size: 30px; /* 设置字体大小30像素默认16像素 */三、CSS的三种引入方式3.1 内联样式行内样式直接在HTML标签的style属性中编写CSS。div stylewidth: 200px; height: 200px; background-color: orange; 予一文者不何才爱。 /div特点说明优点直接、无需额外选择器缺点不易修改、不易复用、结构与样式耦合、优先级过高适用场景简单且基本不修改的样式3.2 内部样式表在head标签中使用style标签定义CSS。head style div { width: 200px; height: 200px; background-color: orange; } /style /head特点说明优点方便复用和修改结构与样式分离缺点页面间样式不易复用适用场景单个页面使用且CSS样式不多时3.3 外部样式表将CSS单独写在.css文件中通过link标签引入。head link relstylesheet hrefstyle.css /head特点说明优点方便页面间复用缺点需要新建CSS文件适用场景项目开发时基本使用3.4link与import的区别特性link标签import语言环境HTMLCSS作用连接CSS与HTML文件加载CSS到另一个CSS文件效率更高相对较低四、CSS选择器详解4.1 基本选择器4.1.1 标签选择器h1 { color: red; }作用选中对应标签名的所有结构注意慎用会影响多个相同标签结构4.1.2 ID选择器#myId { color: blue; }作用选中具有指定id属性的元素唯一注意ID在页面中必须唯一4.1.3 Class选择器.myClass { color: green; }作用选中具有指定class属性值的结构注意class不能以数字开头不建议用汉字可配置多个class属性值空格隔开最常用的选择器4.1.4 通配选择器* { margin: 0; padding: 0; }作用选中页面中所有标签注意优先级较低常用于设置基本公共样式4.2 复合选择器4.2.1 交集选择器div.myClass { color: purple; }语法选择器1选择器2选择器3...作用选中同时符合多个选择器条件的结构注意如有标签选择器必须放在第一位优先级是所有选择器优先级累加4.2.2 并集选择器群组选择器h1, h3 { color: orange; }语法选择器1选择器2...作用选中所有选择器对应的结构注意每个选择器的优先级各算各的4.3 关系选择器4.3.1 子元素选择器.cs .ss { color: red; }作用通过父元素选中直接子元素限制子元素范围注意常用选择器4.3.2 后代选择器.cs span { font-size: 30px; }作用通过祖先元素选中后代元素限制后代元素范围注意包含子选择器能用子选择器时不用后代选择器效率更高4.3.3 相邻兄弟选择器p .ss { background-color: pink; }作用通过兄元素找到紧跟其后的第一个符合条件的弟元素4.3.4 通用兄弟选择器p ~ .ss { background-color: aqua; }作用通过兄元素找到后面所有符合条件的弟元素前面的不选五、总结CSS的学习路径非常清晰三种引入方式根据需求选择合适的方式多种选择器灵活运用基本、复合和关系选择器精准定位元素样式设置掌握各种样式属性实现页面美化在实际开发中推荐使用外部样式表方式合理运用class选择器​ 和关系选择器保持代码的可维护性和复用性。