使用 CSS 选择器和属性为网页设置主题样式
yund56 2025-04-22 08:31 25 浏览
层叠样式表 (CSS) 是一种编程语言,可用于确定电子文档的设计。 借助简单说明(以清晰的源代码形式呈现),可以根据需要调整布局、颜色和版式等网站元素。 由于级联样式表,文档的语义结构和内容不受影响。 CSS 出现于 20 世纪 90 年代中期,现在被认为是万维网上的标准样式表语言。
什么是 CSS?
CSS 与 HTML 一样,是万维网的核心语言之一。 当您使用 HTML 将文本添加到网站并按语义构建其结构时,您可以使用 CSS 定义其内容的设计。 虽然 HTML 和 CSS 结合使用,但 CSS 设计指令和 HTML 元素是分开存在的。 这意味着即使没有 CSS,机器也可以读取电子文档。 在 CSS 的帮助下,浏览器内容可以在视觉上准备好并以吸引人的方式呈现。
CSS 是一种“生活标准”,由万维网联盟继续开发。 因此,总是有新的功能和实际应用有待发现。 广泛应用的样式表语言出现于 20 世纪 90 年代。 使用样式表来显示 Web 内容的想法在当时已不再是全新的。 但 CSS 与 HTML 中已存在的其他面向显示的元素在一个重要方面有所不同:用户现在可以选择为跨多个文档和单个样式表的元素组定义设计规则。
定义:CSS(层叠样式表)
用于网站视觉设计的编程语言。 例如,使用层叠样式表,您可以确定显示 HTML 元素的字体、大小或颜色。
CSS 的优点和应用领域
一个成功的网站不仅取决于内容,还取决于良好的设计。 用户很快就会对不用户友好或结构良好的网站失去兴趣。 在这里,CSS 提供了一系列纯 HTML 中不提供的设计选项。
例如,CSS 允许您集中控制某些规范。 这意味着可以使用单个命令来识别单个文档中的相似元素(例如所有超链接或图像)并对其进行格式化。 设计指令不必采用 HTML 文档本身内部样式表的形式。 如果将 CSS 指令保存在外部样式表(即单独的文件)中,则这也可以用于其他文档。
除了与 HTML 元素的颜色、形状和排版相关的基本显示指令外,CSS 中现在还有更复杂的模块。 例如,使用这些,您可以根据输出媒体定义动画或不同的表示形式。 这样,可以为所有可能的媒体以相同的方式准备相同的 HTML 文档。 由于本文档中的内容和设计是分开的,因此网站的代码更加清晰。 相关的样式语言 SASS 提供了更多的可能性,但它并没有完全取代 CSS。
CSS 语句的结构
CSS 语句确定电子文档中的元素应具有的值或属性。 在其基本结构中,该指令由选择器和大括号组成。 声明列在括号内,并用分号分隔。 每个声明由名称、冒号和特定值组成。 在最终声明之后和右括号之前,可以添加另一个分号,但这不是强制性的。 例如,下面示例中的 CSS 指令要求标题 h1 以蓝色显示,字体大小为 12:
h1 {color:blue; font-size:12px}
如何将 CSS 集成到您的网站中?
可以使用内部和外部样式表将 CSS 合并到电子文档中。 此外,可以使用内联样式将属性直接放置在元素的 HTML 源代码中。 下面,我们概述了将 CSS 集成到 HTML 中的三种方法。
外部样式表
在外部样式表中,CSS 指令通过“.css”结尾在外部文件中定义,并通过“link”标签集成到 HTML 文件中。 这是最常见的方法,因为内容和设计完全分开,并且可以轻松进行更改。 该链接在 HTML 文档的“head”区域中创建,如下所示:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
内部样式表
您可以在此处将所有 CSS 指令添加到 HTML 文件中。 请注意,这些仅适用于相关文件。 对于内部样式表,将“style”元素插入 HTML 文档的“head”区域,如下所示:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}</style></head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
内联样式
与内部样式表一样,CSS 指令包含在 HTML 文件中。 然而,有一个重要的区别:相应的属性直接位于元素的开始标记中,并且不适用于任何其他元素。 如果您不想进行一般设计说明,则此方法特别有用。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
CSS 和 HTML 的交互
上面的例子表明 CSS 只能与经典的 HTML 结构结合使用。 由于 HTML 通过段落、列表和表格构建内容,而 CSS 负责视觉设计,因此这两种网络语言相辅相成,并以这种方式紧密相连。 编写级联样式表通常围绕设计“盒子”进行。 HTML 文档的结构基于嵌套原则,其中各个元素像盒子一样相互叠放。 网站上占用空间的每个“盒子”都具有以下属性:
- padding:元素内容周围的空间
- border:位于 padding 外部的线
- margin:边框外的空间
然后通过指定大小、形状和颜色来格式化这些“框”。 除了这些简单的属性之外,还有更复杂的 CSS 指令,用于在文本中插入阴影、添加图像过滤功能以及突出显示表单和其他元素。
一旦您了解了样式表语言的基本原理,它们的应用就足够简单了。 了解有关 CSS 顶级技巧的更多信息,这些技巧将使您的网站看起来更加专业。
相关推荐
- 如何在Office 中编辑 PDF?附详细化步骤
-
PDF很受欢迎,因为它能在不同的设备和操作系统上仍然保持原有格式。但是,这也意味着直接更改PDF文件比其他格式更难更复杂。值得庆幸的是,Microsoftoffice和UPDF帮你解决这一难题。一...
- 我的 Windows 装机必备软件清单
-
今天给大家分享下我的装机必备软件,都是用了好多年的软件神器。靠谱、好用、无广告,Windows电脑必备软件,收藏这一篇就够了!01.浏览器王者:Chromehttps://www.google.c...
- Docnet Core 是一个轻量级、高性能的 .NET PDF 操作库
-
DocnetCore介绍DocnetCore是一个轻量级、高性能的.NETPDF操作库,依托于PDFium渲染引擎,提供强大的PDF文档解析、渲染、操作等功能。它完全支持.NET...
- 分享三款好用的PDF编辑软件,轻松处理PDF
-
作为一名需要经常和PDF文件打交道的工作者,我来分享一下几款好用的PDF编辑软件,并详细分析了它们的优缺点,希望能帮你找到合适的工具。1.AdobeAcrobatDC作为PDF格式的发明者,Ado...
- PDF文档创建工具软件:novaPDF OEM 11.9 Build 432 for Windows
-
novaPDFOEM是一款实用高效的软件,从头开始设计,让您尽可能轻松地在应用程序中添加PDF打印功能。换句话说,这个实用程序是专门为应用程序开发人员设计的,可以直接在程序安装程序中集成为PDF打印...
- 线性表顺序存储结构求集合的并,交,补,差(源代码附上 超详细)
-
一:算法分析1)用数组A,B,C,E表示集合。假定A={1,3,4,5,6,7,9,10}, B={2,,3,4,7,8,10},E={1,2,3,4,5,6,7,8,9,10}, 输入数组A...
- 分享一套SpringBoot开发博客系统源码,包含完整开发文档和视频
-
基本信息项目名称:eblog摘要:eblog是一个基于Springboot2.1.2开发的博客学习项目,为了让项目融合更多的知识点,达到学习目的,编写了详细的从0到1开发文档。主要学习包括:自定义Fr...
- 通达信指标合集〔源码齐全〕
-
很多朋友问到我哪款指标好用,这里我说一下,之所以有很多不同的指标是因为我们在针对不同的盘面情况的时候使用的指标是不同的,我给到的指标一般来讲就目前的环境来讲都是比较适合的,今天我就把我平时自己常用的指...
- 巅峰对决!Spring Boot VS .NET 6
-
SpringBoot和ASP.NETCore都是企业中流行的Web框架,对于喜欢C#的人会使用ASP.NETCore,而对于Java或Kotlin等基于JVM的语...
- 在asp.net core 中控制访问权限的方法
-
Intro#由于项目需要,需要在基于asp.netmvc的Web项目框架中做权限的控制,于是才有了这个权限控制组件,最初只是支持netframework,后来dotnetcore2.0...
- ASP.NET是否无生存之地?
-
ASP.NET,这个已经很久的技术,总觉得已经被时代淘汰,我们公司是一个10人小公司,几个十年十五年的项目还是用ASP.NET开发的。这两年由于客户的需求变化,我们公司也顺势开始对这些项目重新开发,改...
- Spring Boot + Vue.js 实现前后端分离(附源码)
-
作者:梁小生0101链接:juejin.im/post/5c622fb5e51d457f9f2c2381SpringBoot+Vue.js前后端涉及基本概念介绍,搭建记录,本文会列举出用到环...
- ASP.NET Core 中的 Mapster 使用入门教程
-
在本文中,我们将学习如何在ASP.NETCore应用程序中使用Mapster。首先,我们将了解Mapster是什么以及如何将其安装到.NETCore应用程序中。然后,我们将在使用...
- Asp.net常用方法及request和response-a
-
asp.net教程asp.net常用方法:1、Request.UrlReferrer请求的来源,可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链,可以伪造(比如迅雷)。(使用全局一般处理...
- ASP.NET Core使用功能开关控制路由访问
-
前言在前面的文章,我们介绍了使用Middleware有条件地允许访问路由(《ASP.NETCore使用Middleware有条件地允许访问路由》)。而对于一些试验性的功能,我们并不希望用密码去控制是...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)
- 图片素材 (36)