CSS基础：样式表分类与选择器详解
需积分: 9 159 浏览量
更新于2024-08-30
收藏 349KB PDF 举报
“YK-Day04笔记.pdf”涵盖了CSS基础知识，包括CSS的定义、分类（内联样式、内部样式和外部样式）以及常用选择器的介绍。
CSS（层叠样式表）是用于美化和控制HTML网页外观的重要工具。它允许开发者通过定义不同的样式规则来改变文本、颜色、布局和其他视觉元素。CSS的三大类应用方式：
1. 内联样式（行内样式）：这是最直接的方法，将样式属性直接写在HTML标签的`style`属性内，如`<h1 style="color:red;font-size:7px;">标题一</h1>`。这种方式限制了样式的应用范围，仅对当前标签及其部分子元素有效。
2. 内部样式：在HTML文档的`<head>`标签内的`<style>`标签中定义样式，如`<style>h1{color:red;font-size:7px;}</style>`。这种方式的样式可被整个HTML文档中的相应标签访问。
3. 外部样式：样式定义在独立的.css文件中，然后通过在HTML文件中使用`<link>`标签引入，如`<link rel="stylesheet" type="text/css" href="css/mycss.css"/>`。外部样式文件可以被多个HTML文档共享，实现样式复用。
学习多种选择器的原因是为了更高效地管理和组织HTML元素的样式。以下是一些常用的选择器：
1. 标签选择器：直接针对特定HTML标签设置样式，如`h1{color:red;font-size:7px;}`，将所有`<h1>`标签的字体颜色设为红色，字体大小设为7像素。
2. 类选择器：通过类名定位元素，如`.myClass{color:green;}`，选择所有class为`myClass`的元素并设置其颜色为绿色。类选择器适用于同一样式应用于不同标签的情况。
3. ID选择器：使用`#`标识符定位特定ID的元素，如`#myID{background-color:blue;}`，将ID为`myID`的元素背景色设为蓝色。ID选择器具有唯一性，每个页面中只能有一个元素拥有相同的ID。
4. 通配符选择器：`*{margin:0;padding:0;}`，应用于所有元素，通常用于初始化元素的默认样式。
5. 后代选择器：使用空格分隔，如`div p{font-size:14px;}`，选择`div`元素内的所有`p`元素。
6. 子元素选择器：使用`>`分隔，如`div > p{color:black;}`，只选择`div`的直接子元素`p`。
7. 相邻兄弟选择器：使用`+`分隔，如`div + p{font-weight:bold;}`，选择紧跟在`div`后面的`p`元素。
8. 伪类选择器：如`:hover`、`:active`、`:focus`等，用于在特定交互状态下改变元素样式。
了解和熟练掌握这些选择器能够帮助开发者更加精准地控制网页的样式，提高代码的可读性和维护性。在实际开发中，通常会结合使用各种选择器，以实现复杂和灵活的布局效果。
CSS
1、定义：
css，层叠样式表，主要用来修饰网页（html）
2、分类：
1、内联样式/行内样式：
直接在标签中使用，作用域与当前使用它的标签元素及部分子元素。
举例：
1 原始写法：<h1><fontcolor="red"size="7">标题一</font></h2>
2 内联样式：<h1style="color:red;font‐size:7px;">标题一</h1>
2、内部样式：
在<head>标签中定义一个<style></style>标签，写在这里的样式，该html文件
中所有的标签都
可以访问到。
举例：
1 <html>
2 <head>
3 <title>内部样式测试</title>
4 <!‐‐使用内部样式‐‐>
5 <style>
6 h1{
7 color:red;
8 font‐size:7px;
9 }
10 </style>
11 </head>
12 <body>
13 <h1>标题一1</h1>
14 <h1>标题一2</h1>
15 </body>
16 </html>
3、外部样式：
在外部单独定义一个后缀名为.css的文件，在css文件中写样式，再在需要css样式
的.html文件
中引用样式。作用域与所有的html文件，只要html文件引用了该样式，都可以使用。
举例：
下载后可阅读完整内容，剩余4页未读，立即下载
2022-01-30 上传
2022-01-17 上传
2021-05-08 上传
2021-07-15 上传
2019-07-10 上传
2019-05-14 上传
wyq9058
- 粉丝: 0
- 资源: 1
我的内容管理
展开
