马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
1. CSS简介
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制HTML文档外观和格式的样式表语言。它通过界说HTML元素的样式规则，可以实现对网页结构、字体、颜色、间距等外观特性的统一控制，从而使网页更加美观、易读和具有个性化的风格。
1.2 CSS的引入方式
1.2.1 内联样式
- 界说：直接在HTML元素的style属性中界说样式。
- 示例：
- <p style="color: red; font-size: 16px;">这是一段红色的文本，字体大小为16px。</p>
- 优点：样式与HTML元素紧密关联，直观且易于理解；对单个元素的样式控制非常方便。
- 缺点：样式代码分散在HTML文档中，不利于维护和复用；假如多个元素必要类似的样式，必要重复编写代码，增长了代码冗余。
1.2.2 内部样式表
- 界说：在HTML文档的<head>部分使用<style>标签订义样式。
- 示例：
- <head>
- <style>
- p {
- color: blue;
- font-size: 14px;
- }
- </style>
- </head>
- <body>
- <p>这是一段蓝色的文本，字体大小为14px。</p>
- </body>
- 优点：样式代码集中在一个地方，便于管理和维护；可以对整个HTML文档中的元素进行统一的样式设置。
- 缺点：仅实用于单个HTML文档，无法在多个页面之间共享样式；假如必要修改样式，必要在每个HTML文档中分别修改。
1.2.3 外部样式表
- 界说：将样式代码写在一个独立的.css文件中，然后通过<link>标签引入HTML文档。
- 示例：
- CSS文件（styles.css）：
- p {
- color: green;
- font-size: 12px;
- }
- <head>
- <link rel="stylesheet" href="styles.css">
- </head>
- <body>
- <p>这是一段绿色的文本，字体大小为12px。</p>
- </body>
- 优点：样式代码完全独立于HTML文档，便于维护和复用；可以在多个HTML页面中共享同一套样式，提高开发效率；易于实现样式的全局修改和更新。
- 缺点：必要额外的文件管理和维护；假如CSS文件加载失败，大概会影响页面的显示结果。
2. CSS选择器
CSS选择器用于选择HTML文档中的元素，以便为其应用样式规则。选择器的种类繁多，每种选择器都有其特定的用途和特点。
2.1 标签选择器
- 界说：通过HTML标签名称选择元素。
- 示例：
- 特点：选择范围较广，实用于对全部类似标签的元素进行统一设置，但不够详细，大概会对页面中全部该标签的元素产生影响。
2.2 类选择器
- 界说：通过HTML元素的class属性选择元素。
- 示例
- .my-class {
- color: blue;
- }
- <p class="my-class">这是一段蓝色的文本。</p>
- 特点：具有较高的机动性和复用性，可以为多个元素指定类似的样式；通过类名可以更详细地选择元素，制止对其他元素产生影响。
2.3 ID选择器
- 界说：通过HTML元素的id属性选择元素。
- 示例：
- <p id="my-id">这是一段绿色的文本。</p>
- 特点：具有最高的选择器优先级，只能用于选择页面中具有唯一id的元素；在页面中id值必须是唯一的，因此可以精确地控制单个元素的样式。
2.4 属性选择器
- 界说：通过HTML元素的属性及其值选择元素。
- 示例：
- [type="text"] {
- border: 1px solid black;
- }
- 特点：可以根据元素的详细属性及其值进行选择，具有较强的针对性和机动性；实用于对具有特定属性的元素进行样式设置。
2.5 伪类选择器
- 界说：用于选择元素的特定状态或位置。
- 示例：
- 特点：可以为元素的差别状态或位置添加特殊的样式，增强页面的交互性和视觉结果；比方，:hover伪类可以为鼠标悬停状态的元素设置样式。
2.6 伪元素选择器
- 界说：用于选择元素的特定部分或创建假造元素。
- 示例：
- p::before {
- content: ">> ";
- color: blue;
- }
- 特点：可以在元素的前后插入假造内容或对元素的特定部分进行样式设置，丰富页面的结构和结果；比方，::before和::after伪元素可以用于添加装饰性内容。
2.7 分组选择器
- 界说：通过逗号分隔多个选择器，为它们应用类似的样式规则。
- 示例：
- h1, h2, h3 {
- color: purple;
- }
- 特点：可以减少重复的样式代码，提高样式的复用性。
2.8 子女选择器
- 界说：选择某个元素的子女元素。
- 示例：
- .container p {
- color: orange;
- }
- <div class="container">
- <p>这是一段橙色的文本。</p>
- </div>
- 特点：可以精确地选择特定上下文中的元素，制止对其他元素产生影响。
2.9 子代选择器
- 界说：选择某个元素的直接子元素。
- 示例：
- .container > p {
- color: pink;
- }
- <div class="container">
- <p>这是一段粉色的文本。</p>
- <div>
- <p>这段文本不会变色。</p>
- </div>
- </div>
- 特点：与子女选择器类似，但只选择直接子元素，不包罗更深层次的子女元素。
2.10 相邻兄弟选择器
- 界说：选择某个元素的紧邻兄弟元素。
- 示例：
- <h1>标题</h1>
- <p>这是一段青色的文本。</p>
- 特点：只能选择紧邻的兄弟元素，不包罗其他兄弟元素。
2.11 通用兄弟选择器
- 界说：选择某个元素的全部兄弟元素。
- 示例：
- <h1>标题</h1>
- <p>这是一段绿色的文本。</p>
- <p>这段文本也会变绿。</p>
- 特点：可以选择全部兄弟元素，而不光仅是紧邻的兄弟元素。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
