第2章:CSS基本语法 --[CSS零基础入门]

ops/2024/12/26 1:52:27/

CSS(层叠样式表,Cascading Style Sheets)是用来描述HTML或XML(包括各种XML:SVG, MathML 或 XHTML)等文档的外观和格式的语言。以下是CSS的基本语法:

1.选择器

1.元素选择器

元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时,你是在告诉浏览器对页面中所有该类型的HTML元素应用特定的样式。以下是两个使用元素选择器的CSS示例:

示例 1: 修改所有段落的字体颜色和大小

假设你想改变网页上所有段落(<p> 标签)的文本颜色为蓝色,并且设置字体大小为16像素,你可以这样写:

css">p {color: blue;font-size: 16px;
}

在这里插入图片描述

这段CSS代码将应用于HTML文档中的每一个<p>元素,使得它们的文本颜色变为蓝色,字体大小变为16px。

示例 2: 设置所有链接的样式

如果你想更改所有超链接(<a> 标签)的默认样式,比如去掉下划线并且当鼠标悬停在链接上时改变背景颜色,你可以这样做:

css">a {text-decoration: none; /* 去掉下划线 */
}a:hover {background-color: yellow; /* 当鼠标悬停时背景变黄 */
}

在这个例子中,第一个规则去掉了所有链接的下划线,第二个规则设置了当用户将鼠标悬停在链接上时,链接的背景颜色会变成黄色。请注意,:hover 是一个伪类,它允许你定义当特定事件发生时元素的样式,在这个情况下,是指当用户的鼠标指针悬停在链接上方时。

这两个示例展示了如何使用元素选择器来快速地为同类型的所有HTML元素应用统一的样式。

2.类选择器

类选择器是通过在HTML元素中定义的class属性来选择元素,并为其应用特定样式的。使用类选择器可以让你更加灵活地控制页面上的样式,因为同一个类可以在多个元素上使用,而且不会像ID选择器那样限制为文档中的唯一实例。以下是两个使用类选择器的CSS示例:

示例 1: 使用类选择器设置文本对齐方式

假设你有一个网页,其中某些段落需要居中文本,而其他的则不需要。你可以创建一个名为.center-text的类,然后将这个类应用到需要居中显示的段落上。

<p class="center-text">这段文字将会居中。</p>
<p>这段文字保持默认对齐。</p>

对应的CSS代码如下:

css">.center-text {text-align: center;
}

这样,所有带有.center-text类的段落都会以居中的方式显示其文本内容。

在这里插入图片描述

示例 2: 使用类选择器更改按钮样式

如果你想为网页上的按钮添加自定义样式,比如改变背景颜色、字体颜色和边框圆角等,你可以定义一个类(例如.custom-button),并将其应用于各个按钮元素。

<button class="custom-button">点击我</button>
<button>普通的按钮</button>

对应的CSS代码如下:

css">.custom-button {background-color: #4CAF50; /* 绿色背景 */color: white;              /* 白色文字 */padding: 10px 20px;        /* 内边距 */border: none;              /* 无边框 */border-radius: 8px;        /* 圆角 */cursor: pointer;           /* 鼠标指针变为手型 */
}.custom-button:hover {background-color: #45a049; /* 当鼠标悬停时稍微深一点的绿色 */
}

在这个例子中,.custom-button类设置了按钮的外观,包括背景颜色、文字颜色、内边距、边框样式、圆角以及鼠标悬停效果。当用户将鼠标移到按钮上时,背景颜色会稍微变深,提供视觉反馈。

这两个示例展示了如何利用类选择器来有效地管理和重用样式规则,从而简化CSS代码的维护和扩展。

在这里插入图片描述

3.ID选择器

ID选择器用于根据元素的id属性来选择特定的HTML元素。每个页面中的id应该是唯一的,这意味着一个ID只能在一个页面中使用一次。因此,ID选择器非常适合用来为页面上的唯一元素定义样式。以下是两个使用ID选择器的CSS示例:

示例 1: 设置页面标题样式

假设你的网页有一个唯一的主标题,并且你想要为这个标题设置特别的样式,比如较大的字体、不同的颜色和一些下边距。你可以给这个标题分配一个唯一的ID(例如#main-title),然后在CSS中针对这个ID定义样式。

<h1 id="main-title">欢迎来到我的网站</h1>

对应的CSS代码如下:

css">#main-title {font-size: 2.5em;color: #333;margin-bottom: 20px;
}

这段代码将使得带有id="main-title"<h1>元素拥有指定的字体大小、颜色以及底部外边距。

在这里插入图片描述

示例 2: 创建一个固定的导航栏

如果你希望创建一个固定在页面顶部的导航栏,它不会随着页面滚动而消失,并且有特定的高度、背景颜色和内边距,你可以为导航栏赋予一个唯一的ID(例如#navbar)。

<nav id="navbar"><ul><li><a href="#home">首页</a></li><li><a href="#services">服务</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li></ul>
</nav>

对应的CSS代码如下:

css">#navbar {position: fixed;top: 0;width: 100%;background-color: #333;padding: 10px 0;z-index: 1000; /* 确保导航栏位于其他内容之上 */
}#navbar ul {list-style-type: none;margin: 0;padding: 0;text-align: center;
}#navbar ul li {display: inline;margin-right: 10px;
}#navbar ul li a {color: white;text-decoration: none;padding: 5px 10px;
}#navbar ul li a:hover {background-color: #575757;border-radius: 4px;
}

在这里插入图片描述

在这个例子中,#navbar ID选择器确保了样式仅应用于具有该ID的单个导航元素。通过设置position: fixed;,导航栏将固定在浏览器窗口的顶部,并且随着页面滚动保持可见。同时,还设置了链接的颜色、悬停效果等,以增强用户体验。

这两个示例展示了如何利用ID选择器为目标元素提供独特的样式规则,这有助于创建更加定制化的用户界面。

4.属性选择器

CSS 属性选择器允许你根据元素的属性或属性值来选择 HTML 元素。以下是两个使用 CSS 属性选择器的示例:

示例 1: 根据属性存在选择元素

如果你想选择所有带有 title 属性的元素,不论其值是什么,你可以使用以下选择器:

css">[title] {color: blue;
}

这段代码会将所有带有 title 属性的文本颜色设置为蓝色。例如,它会影响如下 HTML 元素:

<p title="这是一个段落">这段文字将会是蓝色。</p>
<a href="http://example.com" title="Example Domain">这个链接也会受影响。</a>

在这里插入图片描述

示例 2: 根据属性和特定值选择元素

如果你想要更具体一点,可以选择具有特定属性值的元素。比如,选择所有 input 元素,其中 type 属性的值为 text

css">input[type="text"] {background-color: yellow;
}

这段 CSS 代码会将所有 typetextinput 元素的背景色设置为黄色。这会影响到如下的 HTML 输入框:

<input type="text" name="username" />

在这里插入图片描述

但不会影响到其他类型的输入框,比如 submitcheckbox

这些只是属性选择器的基础用法。实际上,CSS 属性选择器支持更多复杂的匹配模式,包括部分匹配、精确匹配等,可以满足更精细的选择需求。

5.伪类和伪元素

CSS 伪类和伪元素用于向选择的元素添加特殊效果。它们允许你选择特定状态下的元素或元素的特定部分,而无需修改HTML。以下是两个分别使用伪类和伪元素的示例:

示例 1: 使用伪类 :hover

伪类用于选择元素的特定状态。:hover 是一个常见的伪类,当用户将鼠标悬停在元素上时应用样式。

css">button:hover {background-color: lightblue;cursor: pointer;
}

这段代码会改变所有 <button> 元素在用户鼠标悬停其上的时候的背景颜色为浅蓝色,并且将鼠标指针改为手型(pointer),以提示用户这是一个可交互的元素。

示例 2: 使用伪元素 ::before

伪元素用于在选定元素的内容之前或之后添加生成内容。::before 伪元素可以在元素内容之前插入内容。

css">blockquote::before {content: "“"; /* 引号 */color: gray;font-size: 2em;margin-right: 0.5em;
}

此段 CSS 代码会在所有的 <blockquote> 元素内容前添加一个大的灰色引号符号。这可以用来美化引用文本,使得页面更加美观和易读。

这两个例子展示了如何利用伪类和伪元素来增强网页设计,提供更好的用户体验,同时保持HTML结构的简洁性。

2.声明和属性

在 CSS 中,声明是由一个属性和该属性的值组成的。每个 CSS 规则由一个选择器和一组声明构成,而这些声明被包含在大括号 {} 内。以下是两个具体的 CSS 声明示例:

示例 1: 设置文本颜色和字体大小

css">p {color: darkblue; /* 设置段落文本的颜色为深蓝色 */font-size: 16px; /* 设置段落文本的字体大小为16像素 */
}

在这个例子中,我们选择了所有的 <p>(段落)元素,并对它们应用了两个声明:colorfont-size。这将使得所有段落中的文本显示为深蓝色,且字体大小为16像素。

示例 2: 使用边框和圆角

css">.box {border: 2px solid red; /* 设置边框宽度为2像素,样式为实线,颜色为红色 */border-radius: 10px; /* 设置圆角半径为10像素,使边框有圆角效果 */
}

这里我们定义了一个名为 .box 的类选择器,并对其应用了两个声明:borderborder-radius。任何带有 class="box" 的 HTML 元素都将有一个2像素宽的红色实线边框,并且四个角都是10像素的圆角。

这两个例子展示了如何通过CSS声明来控制网页上元素的外观。你可以根据需要组合不同的属性和值,以实现所需的样式效果。

3.注释

在 CSS 中,注释用于解释代码中的某些部分,帮助开发者理解代码的功能或结构。CSS 注释不会被浏览器解析,因此它们只对阅读代码的人可见。CSS 支持单行注释和多行注释,但需要注意的是,CSS 中并没有官方的单行注释语法(如在一些编程语言中使用的 //),所有注释都使用相同的语法。

示例 1: 单行注释

尽管 CSS 没有特定的单行注释语法,但你可以使用多行注释的语法来创建单行注释:

css">/* 设置页面标题的颜色为深蓝色 */
h1 {color: darkblue;
}

在这个例子中,注释解释了接下来的声明将要做什么:它会设置 <h1> 元素文本颜色为深蓝色。

示例 2: 多行注释

当你需要写一段较长的解释时,可以使用多行注释。多行注释以 /* 开始,并以 */ 结束,中间可以包含多行文字:

css">/*
以下规则应用于所有的段落元素,
设置了字体大小、行高和文本颜色。
这样做是为了确保所有正文内容具有一致的外观。
*/
p {font-size: 16px;line-height: 1.5;color: #333;
}

这段代码包含了关于样式规则目的的详细说明,指出了这些样式是应用到所有 <p>(段落)元素上的,并且具体描述了每个属性的作用。

请注意,虽然在实际开发中使用注释是非常好的实践,但应该避免过度使用注释。代码应当尽可能地自我解释,只有在必要时才添加注释,比如当代码逻辑复杂或不直观时。

4.优先级和继承

CSS 优先级(specificity)和继承是理解 CSS 样式如何应用到 HTML 元素上的两个重要概念。下面我将通过具体的例子来解释这两个概念。

示例 1: CSS 优先级

CSS 优先级决定了当多个样式规则应用于同一个元素时,哪一个规则会生效。优先级是由选择器的类型和组合决定的,具体来说,内联样式 > ID 选择器 > 类选择器、属性选择器和伪类 > 元素选择器和伪元素。

示例代码:
<div id="special" class="box">Hello World</div>
css">/* 规则1 */
.box {color: blue;
}/* 规则2 */
#special {color: red;
}

在这个例子中,尽管 .box 类选择器设置了文本颜色为蓝色,但 #special ID 选择器设置了红色,并且由于 ID 选择器的优先级高于类选择器,所以最终文本颜色将是红色。

在这里插入图片描述

示例 2: CSS 继承

某些 CSS 属性是可以继承的,这意味着子元素可以从父元素那里继承这些属性的值。例如,字体相关的属性(如 font-familycolor)通常会被子元素继承。

示例代码:
<div style="css language-css">color: green;">Parent text<p>Child paragraph text</p>
</div>
css">/* 父元素的样式 */
div {font-family: Arial, sans-serif;
}/* 子元素不会显式设置颜色,因此会继承父元素的颜色 */
p {font-weight: bold;
}

在这个例子中,<p> 标签内的文本不仅会使用粗体(因为我们在 p 选择器中定义了 font-weight: bold;),还会继承来自其父 <div> 的绿色文本颜色和 Arial 字体,即使我们没有在 p 中明确地指定这些属性。

在这里插入图片描述

这两个例子展示了 CSS 优先级和继承的基本原理。理解和正确利用这两者可以帮助你更有效地控制网页的设计和布局。


http://www.ppmy.cn/ops/139329.html

相关文章

手机实时提取SIM卡打电话的信令声音-蓝牙电话如何适配eSIM卡的手机

手机实时提取SIM卡打电话的信令声音 --蓝牙电话如何适配eSIM卡的手机 一、前言 蓝牙电话的海外战略中&#xff0c;由于海外智能手机市场中政策的差异性&#xff0c;对内置eSIM卡的手机进行支持是非常合理的需求。Android系列手机中&#xff0c;无论是更换通信运营商&#xf…

岩体力学的材质-力学等属性的自动划分.

#背景: 在力学求解过程中,我们往往会对目标物体进行网格划分, 那么如何做到自动完成这个过程呢? 这里使用岩体力学中的地下岩层进行举例,这里只是简单的导入了4种界面, 复杂的可以一次性导入几十种界面,都可以计算(你能分多细,这个计算方式就可以帮你分层多细) 这里我只是导…

46 基于单片机的烧水壶系统设计

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52RC单片机&#xff0c;采用四个按键&#xff0c;通过DS18B20检测温度&#xff0c;开机显示实时温度 第一个按键为切换功能按键&#xff0c;按下后&#xff0c;可以设置烧水温度的大小&…

51单片机教程(九)- 数码管的动态显示

1、项目分析 通过演示数码管动态显示的操作过程。 2、技术准备 1、 数码管动态显示 4个1位数码管和单片机如何连接 a、静态显示的连接方式 优点&#xff1a;不需要动态刷新&#xff1b;缺点&#xff1a;占用IO口线多。 b、动态显示的连接方式 连接&#xff1a;所有位数码…

UE5 C++ 不规则按钮识别,复选框不规则识别 UPIrregularWidgets

插件名称&#xff1a;UPIrregularWidgets 插件包含以下功能 你可以点击任何图片&#xff0c;而不仅限于矩形图片。 UPButton、UPCheckbox 基于原始的 Button、Checkbox 扩展。 复选框增加了不规则图像识别功能&#xff0c;复选框增加了悬停事件。 欢迎来到我的博客 记录学习过…

查询品牌涉及两张表(brand、brand_admin_mapping)

文章目录 1、BrandController2、AdminCommonService3、BrandApiService3、BrandCommonService4、BrandSqlService涉及的表SQL 查询逻辑参数处理执行查询完整 SQL 逻辑参数映射总结 查询指定管理员下的品牌所涉及的表有哪些&#xff1f; http://127.0.0.1:8087/brand/admin/list…

Vue2和Vue3的区别

响应式系统 Vue 2 技术基础&#xff1a;使用 Object.defineProperty 实现响应式。局限性&#xff1a; 无法监听新增属性&#xff1a;如果在创建实例后添加新属性&#xff0c;这些属性不会自动成为响应式的。数组变更检测问题&#xff1a;直接通过索引设置值或长度不会触发更新…

【计算机网络】实验9: 路由信息协议RIP

实验9 路由信息协议RIP 一、实验目的 本实验的主要目的是深入理解RIP&#xff08;路由信息协议&#xff09;的工作原理&#xff0c;以便掌握其在网络中的应用。通过对RIP的学习&#xff0c;我们将探讨该协议如何实现路由选择和信息传播&#xff0c;从而确保数据包能够在网络中…