HTML中CSS样式的三种应用方法与选择器详解

98 浏览量更新于2024-08-30 收藏 65KB PDF 举报

本文主要介绍了CSS样式的使用方式和选择器的详细知识，包括行内样式、内部样式、外部样式以及各种类型的选择器，如元素选择器、类选择器、ID选择器、通用选择器、分组选择器、后代选择器、子选择器、相邻兄弟选择器和后续兄弟选择器等。 CSS样式是用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档呈现的样式语言。它允许我们控制网页的布局、颜色、字体、大小、间距等视觉效果。CSS可以通过以下三种方式应用到HTML元素上： 1. 行内样式：这是将样式直接添加到HTML元素的`style`属性中，如`<p style="font-size:20px;color:red">hello</p>`。这种方式方便快捷，但不利于代码的组织和复用。 2. 内部样式：内部样式是在HTML的`<head>`部分的`<style>`标签内定义CSS规则，例如： ```html <style> p { font-size: 20px; color: red; } </style> ``` 这种方式可以应用于整个页面内的所有匹配元素，比行内样式更易于管理。 3. 外部样式：外部样式是指将CSS规则写入一个单独的`.css`文件中，然后在HTML文档的`<head>`部分通过`<link>`标签引入，如： ```html <link href="styles.css" rel="stylesheet" type="text/css"> ``` 这种方式可以实现样式在整个网站的复用，提高代码的可维护性。 CSS注释使用`/* ... */`包裹，如`/* 这是一个注释 */`，用来解释代码的功能或提供其他说明。 CSS选择器是CSS中用于选取元素的关键概念，包括： 1. 元素选择器：通过元素名称选取元素，如`p {color:red}`将所有段落文字设为红色。 2. 类选择器：通过`.`后跟类名选取元素，如`.red {color:red}`，需在元素`class`属性中引用该类。 3. ID选择器：通过`#`后跟ID名选取元素，如`#user {color:red}`，ID具有唯一性，只能在一个元素中使用。此外，还有其他选择器： - 通用选择器：`* {color:red}`将所有元素的文字设为红色。 - 分组选择器：`h1, .red {color:red}`将所有`h1`元素和具有`class="red"`的元素设为红色。 - 后代选择器：`div p {color:red}`选择`div`元素内的所有`p`元素。 - 子选择器：`div > p {color:red}`只选择作为`div`直接子元素的`p`。 - 相邻兄弟选择器：`div + p {color:red}`选择紧跟在`div`后面的`p`元素。 - 后续兄弟选择器：`div ~ p {color:red}`选择`div`后面的所有`p`元素。属性选择器如`[attr]`选取具有指定属性的元素，`[attr=value]`选取属性值等于`value`的元素。理解并熟练运用这些CSS样式和选择器，能够帮助开发者精确地控制网页的呈现效果，提升用户体验。

CSS 样式的使用方式、选择器样式的使用方式、选择器

在在html中使用中使用css的三种方式：的三种方式：

1、行内样式：同过元素的style属性来设置

<p style="font-size:20px; color:red">hello</p>

属性之间分号隔开。

2、内部样式：在<head>的<style>元素中定义css样式

<style>

p{font-size: 20px;color: red}

</style>

3、外部样式：在css文件中定义css样式，然后在html的<head>中通过<style>引入外部样式表

p{font-size: 20px;color: red}

css文件中不加<style>标签，直接写css样式就ok。

内部|外部样式的语法：选择器 {属性名1：属性值1; 属性名2：属性值2}

三种方式，属性之间都是分号隔开。

css注释：

/* 注释 */

css选择器

1、元素选择器、类选择器、id选择器

p{color: red} /* 元素选择器，给所有p元素设置样式*/

.red{color: red} /* 类选择器，在元素中通过class="red"引用 */

#user{color: red} /* id选择器，在元素中通过id="user"引用，最多只能使用1次 */

2、通用选择器、分组选择器

*{color: red} /*通用选择器，给所有元素设置样式 */

h1,.red{color: red} /*分组选择器，同时给多个选择器设置相同的样式 */

3、后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器

div p{color: red} /*后代选择器，选择<div>中所有的<p>元素，不管<p>是<div>的儿子、孙子、重孙......只要<p>是<div>的后代就行*/

div>p{color:red} /*子选择器，选择的是<p>，<p>必须是<div>的儿子*/

div+p{color:red} /*相邻兄弟选择器，选择的是<p>，<p>必须是<div>后面的第一个兄弟元素 */

div~p{color:red} /*后续兄弟选择器，选择<div>后面所有的<p>，<p>必须是<div>的兄弟元素 */

4、属性选择器

[attr] /*含有attr属性*/

[attr=value] /*有attr属性，且属性值为value*/

[attr^=value] /*有attr属性，且属性值以value开头(只要value是开头就ok*/

[attr|=value] /*有attr属性，且属性值以value开头、value和后面部分以-连接 */

[attr$=value] /*有attr属性，且属性值以value结尾*/

[attr*=value] /*有attr属性，且属性值中含有value（含有就ok）*/

[attr~=value] /*有attr属性，且属性值中含有单词value，value要是一个完整的单词（和其它单词以空格隔开）*/

属性选择器常和其它选择器一起使用，比如:

button[type="button"] /*选择所有type="button"的<button> */

属性选择器中，attr不能加引号，value可引可不引。

5、<a>链接

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38625599

粉丝: 8
资源: 867

HTML中CSS样式的三种应用方法与选择器详解

在HTML中如何隐藏某段文字具体该怎么实现

react-React组件的css选择器

css样式生成+颜色选择器

CSS3 样式选择器

css样式中的继承选择器

CSS2+CSS3的所有选择器和样式

CSS样式指南：选择器、规则与实战技巧

CSS基础教程：选择器、样式与应用方式

理解CSS样式表：选择器、应用方法与实例解析

CSS基础教程：选择器、样式与链接方式解析

最新资源