JavaWeb——CSS3的使用

目录

1. CSS概述

2. CSS引入方式

3. CSS颜色显示

4. CSS选择器

4.1. 元素（标签）选择器

4.2. id选择器

4.3. 类选择器

4.4. 三者优先级

5. 盒子模型

1. CSS概述

CSS，全称为“Cascading Style Sheets”，中文译为“层叠样式表”。

CSS是一种用于描述HTML或XML（包括SVG、MathML等衍生技术）文档样式的计算机语言。它被设计出来主要是为了分离文档的内容（written in HTML or a similar markup language）与文档的呈现样式（如更详细的布局和设计），并且有多种样式可以应用于在不同设备上浏览的网页。这种分离可以提高内容的可访问性，提供更多的布局和视觉效果的控制，并允许控制样式信息的复杂性，而不需要结构化的文档内容通过杂乱的样式信息进行展示。

具体来说，CSS能够：

  1. 对网页中元素的位置进行像素级的精确控制排版，使得设计师可以精确地确定元素的位置和大小。
  2. 支持几乎所有的字体和字号样式。这意味着设计师可以自由选择他们想要的字体样式，为网页设计提供更丰富的视觉效果。
  3. 拥有对网页对象和模型样式编辑的能力。设计师不仅可以改变元素的颜色、字体，还可以对其进行更复杂的3D变换、动画等效果。

一个有CSS和没有CSS的代码对比示例：

<!DOCTYPE html>  
<html>  
<head>  <title>没有CSS的示例</title>  
</head>  
<body>  <h1>欢迎来到我的网站</h1>  <p>这是一个没有CSS的段落。</p>  <p>这是另一个没有CSS的段落。</p>  
</body>  
</html>

<!DOCTYPE html>  
<html>  
<head>  <title>有CSS的示例</title>  <style>  body {  font-family: Arial, sans-serif;  background-color: #f2f2f2;  }  h1 {  color: #336699;  text-align: center;  }  p {  font-size: 16px;  line-height: 1.5;  color: #666666;  }  </style>  
</head>  
<body>  <h1>欢迎来到我的网站</h1>  <p>这是一个使用CSS美化的段落。</p>  <p>这是另一个使用CSS美化的段落。</p>  
</body>  
</html>

2. CSS引入方式

在HTML中，有三种常见的方式来引入CSS样式：

名称

语法描述

示例

行内样式

在标签内使用style属性，属性值是css属性键值对

<h1 style="xxx:xxx;">中国新闻网</h1>

内嵌样式

定义<style>标签，在标签内部定义css样式

<style> h1 {...} </style>

外联样式

定义<link>标签，通过href属性引入外部css文件

<link rel="stylesheet" href="css/news.css">

  1. 内联样式（Inline Styles）：直接在HTML元素中使用style属性来定义CSS样式。这种方式直接在元素上应用样式，不需要额外的样式表文件。例如：
<p style="color: red;">这是一个红色的段落。</p>

  1. 内部样式表（Internal Stylesheet）：在HTML文档的<head>部分使用<style>标签来包含CSS规则。这种方式适合单个页面的样式定义。例如：
<!DOCTYPE html>  
<html>  
<head>  <style>  p {  color: blue;  }  </style>  
</head>  
<body>  <p>这是一个蓝色的段落。</p>  
</body>  
</html>

  1. 外部样式表（External Stylesheet）：通过<link>标签在HTML文档中引入外部的CSS文件。这种方式适合多个页面共享相同样式的情况，因为样式被定义在一个独立的文件中，可以被多个页面引用。例如：
<!DOCTYPE html>  
<html>  
<head>  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  <p>这是一个有样式的段落。</p>  
</body>  
</html>

而在styles.css这个外部文件中：

p {  color: green;  
}

一般来说，外部样式表是最推荐的方式，因为它可以让样式和内容分离，提高代码的可维护性和复用性。但当样式仅在一个元素或少数元素上应用时，使用内联样式也是不错的选择。如果样式只在单个页面中使用，内部样式表是一个合适的选择。

3. CSS颜色显示

在前端程序开发中，颜色的表示方式常见的有如下三种：

表示方式

表示含义

取值

关键字

预定义的颜色名

red、green、blue...

rgb表示法

红绿蓝三原色，每项取值范围：0-255

rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)

十六进制表示法

#开头，将数字转换成十六进制表示

#000000、#ff0000、#cccccc，简写：#000、#ccc

  1. 关键字：
<!DOCTYPE html>
<html>
<head><style>.keyword-color {background-color: red;color: white;padding: 20px;}</style>
</head>
<body><div class="keyword-color">这个div的背景色是通过关键字（red）设置的</div>
</body> #这部分是解释文字，不需要放在代码中
</html>

  1. rgb表示法：
<!DOCTYPE html>
<html>
<head><style>.rgb-color {background-color: rgb(0, 255, 0);color: rgb(0, 0, 255);padding: 20px;}</style>
</head>
<body> #这部分是body标签的开始<div class="rgb-color">这个div的背景色和字体色是通过rgb表示法设置的</div>
</body> #这部分是body标签的结束
</html>

  1. 十六进制表示法：
<!DOCTYPE html>
<html>
<head><style>.hex-color {background-color: #00ff00; /* 绿色 */color: #0000ff; /* 蓝色 */padding: 20px;}</style>
</head>
<body><div class="hex-color">这个div的背景色和字体色是通过十六进制表示法设置的</div>
</body>
</html>

4. CSS选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。

选择器通用语法如下：

选择器名   {css样式名：css样式值;css样式名：css样式值;
}

下面所讲到的选择器只是常见的，选择器是有很多种的，CSS2中定义了15种不同的元素选择器，而CSS3则增加了7种。

4.1. 元素（标签）选择器

  • 选择器的名字必须是标签的名字，如p、div、h1....
  • 作用：选择器中的样式会作用于所有同名的标签上
<p>这是一个p元素</p>
p {  color: blue;  
}
<!--CSS样式将应用于所有<p>元素-->
h1, div {color: blue;
}
<!--将所有的<h1>和<div>元素的文本颜色设置为蓝色-->
<!DOCTYPE html>
<html>
<head><title>元素选择器示例</title><style type="text/css">/* 使用元素选择器选取所有的段落 */p {color: red;}</style>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p><p>这是另一个段落。</p>
</body>
</html>

4.2. id选择器

  • id选择器的名字前面需要加上#
  • 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
<div id="myID">这是一个带有ID的div元素</div>
#myID {  color: red;  
}

上述代码中，ID选择器使用#符号作为前缀，后面跟着元素的ID名称myID。CSS样式将应用于具有该ID的元素。

4.3. 类选择器

  • 选择器的名字前面需要加上 . 看清楚，这是一个点
  • 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
<p class="myClass">这是一个带有类的p元素</p>
.myClass {  font-size: 20px;  
}

上述代码中，类选择器使用.符号作为前缀，后面跟着元素的类名myClass。CSS样式将应用于具有该类的所有元素。

4.4. 三者优先级

  1. id选择器：优先级最高。id选择器通过HTML元素的id属性来选择元素，因此它非常精确且针对性强。由于id在HTML文档中应该是唯一的，所以使用id选择器可以非常准确地定位到特定的元素，并为其应用样式。
  2. 类选择器：优先级次之。类选择器使用HTML元素的class属性来选择元素。不同于id的唯一性，class可以在多个元素上使用，因此类选择器可以用来为一组具有相似样式的元素定义样式。它的优先级高于元素选择器，但低于id选择器。
  3. 元素选择器：优先级最低。元素选择器基于HTML元素的标签名来选择元素。例如，p选择器会选择所有的段落元素。元素选择器的优先级是最低的，当它与id选择器和类选择器同时存在时，它的样式规则将被覆盖。

5. 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）

  • 边距（Margin）：边距是盒子外部的空间，它代表着盒子与其他元素之间的距离。这个空间是透明的，意味着背景会延伸至边距区域。通过调整边距的大小，你可以控制元素间相互的空隙，从而决定它们之间的紧密程度或分离程度。
  • 边框（Border）：紧邻边距内侧的是边框，它为元素提供了一个外部的轮廓。这个边框围绕着内边距和内容。你可以根据设计需求设定边框的粗细、颜色及样式，使其更为突出或低调。
  • 填充（Padding）：填充位于边框的内侧，它代表了边框与内容之间的空间。这个空间同样是透明的，它的存在确保了内容与边框之间有一定的距离。调整填充的大小能够帮助你控制内容与边框之间的空隙，确保内容的呈现更为集中或分散。
  • 实际内容（Content）：实际内容是盒子的核心，它呈现了元素的真实信息，如文本、图片等。这个区域的大小和内容会根据实际内容的变化而变化。确保内容的呈现清晰、易读是设计的首要任务。

完整代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.outerDiv {width: 800px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);margin: 0px auto;}.innerDiv {width: 100px;height: 100px;border: 1px solid blue;float: left;/* margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px; */margin: 10px 20px 30px 40px;}.d1 {background-color: greenyellow;/* padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px; */padding: 10px 20px 30px 40px;}.d2 {background-color: rgb(79, 230, 124);}.d3 {background-color: rgb(26, 165, 208);}</style></head><body><div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div></div></body>
</html>

浏览器打开F12开发者工具台：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/142313.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenMediaVault控制台web页面密码重置

OpenMediaVault控制台web页面密码重置

要重置 OpenMediaVault&#xff08;OMV&#xff09;Web 控制台的密码&#xff0c;可以使用 omv-firstaid 命令行工具中的相应选项。按照以下步骤进行操作&#xff1a; 以管理员权限登录到 OMV 的命令行界面&#xff08;通过 SSH 或直接登录&#xff09;。 ssh登陆到root用户 运…
阅读更多...
【数据仓库】数仓分层方法详解与层次调用规范

【数据仓库】数仓分层方法详解与层次调用规范

文章目录 一. 数仓分层的意义1. 清晰数据结构。2. 减少重复开发3. 方便数据血缘追踪4. 把复杂问题简单化5. 屏蔽原始数据的异常6. 数据仓库的可维护性 二. 如何进行数仓分层&#xff1f;1. ODS层2. DW层2.1. DW层分类2.2. DWD层2.3. DWS 3. ADS层 4、层次调用规范 一. 数仓分层…
阅读更多...
25.4 MySQL 函数

25.4 MySQL 函数

1. 函数的介绍 1.1 函数简介 在编程中, 函数是一种组织代码的方式, 用于执行特定任务. 它是一段可以被重复使用的代码块, 通常接受一些输入(参数)然后返回一个输出. 函数可以帮助开发者将大型程序分解为更小的, 更易于管理的部分, 提高代码的可读性和可维护性.函数在编程语言…
阅读更多...
[01]汇川IMC30G-E系列运动控制卡应用笔记

[01]汇川IMC30G-E系列运动控制卡应用笔记

简介 IMC30G-E系列产品是汇川技术自主研制的高性能EtherCAT网络型运动控制器&#xff08;卡&#xff09;&#xff0c;同时兼容脉冲轴的控制&#xff1b;IMC30G-E支持点位/JOG、插补、多轴同步、高速位置比较输出、PWM等全面的运动控制功能&#xff0c;具备高同步控制精度。 开发…
阅读更多...
修改Openwrt软路由的web端口

修改Openwrt软路由的web端口

如何修改openwrt路由器的web访问端口号&#xff1f; 在OpenWrt路由器上&#xff0c;如何修改Web访问端口号&#xff0c;通常涉及到修改HTTP服务器的配置文件。默认情况下&#xff0c;OpenWrt使用的HTTP服务器是uHTTPd。 以下是修改Web访问端口号的步骤&#xff1a; 一、通过…
阅读更多...
Linux编辑器：vim的简单介绍及使用

Linux编辑器：vim的简单介绍及使用

目录 1.什么是vim 2.vim的基本概念 3.vim 的基本操作 4. 各模式下的命令集 4.1 正常模式命令集 4.2 末行模式命令集 5.补充 5.1 vim支持多文件编辑 5.2 vim 的配置 1.vim 配置原理 2. 常用简单配置选项&#xff1a; 3. 使用插件 1.什么是vim Vim 是从 vi 发展出…
阅读更多...
Easyui DataGrid combobox联动下拉框内容

Easyui DataGrid combobox联动下拉框内容

发票信息下拉框联动&#xff0c;更具不同的发票类型&#xff0c;显示不同的税率 专票 普票 下拉框选择事件 function onSelectType(rec){//选中值if (rec2){//普通发票对应税率pmsPlanList.pmsInvoiceTaxRatepmsPlanList.pmsInvoiceTaxRateT}else {//专用发票对应税率pmsPlan…
阅读更多...
nmap原理与使用

nmap原理与使用

kali的命令行中可以直接使用 nmap 命令&#xff0c;打开一个「终端」&#xff0c;输入 nmap 后回车&#xff0c;可以看到 nmap 的版本&#xff0c;证明 nmap 可用。 一、端口扫描 扫描主机的「开放端口」&#xff0c;在nmap后面直接跟主机IP&#xff08;默认扫描1000个端口&am…
阅读更多...
SQL使用

SQL使用

--天空会的像哭过&#xff0c;离开你以后 并没有更自由 SQL进行数据的删除 一、删除delete 语法 delete [from] 表名称 where 条件数据删除&#xff0c;不能删除某一列&#xff0c;因为删除是对记录而言 2.1 删除是一条一条删除&#xff0c;每次删除都会将操作写入日志文件 删…
阅读更多...
个体诊所电子处方系统设计，诊所电子处方模板，药店电子处方系统，佳易王电子处方管理系统V16.0下载

个体诊所电子处方系统设计，诊所电子处方模板，药店电子处方系统，佳易王电子处方管理系统V16.0下载

个体诊所电子处方系统设计&#xff0c;诊所电子处方模板&#xff0c;药店电子处方系统&#xff0c;佳易王电子处方管理系统V16.0下载 软件支持配方模板&#xff0c;病人病历记录查询等&#xff0c;软件打印处方单所用的纸张为 A5纸。软件可以下载试用&#xff0c;点击最下方官网…
阅读更多...
C++设计实现日志系统

C++设计实现日志系统

转载&#xff1a;C设计实现日志系统 - 知乎 (zhihu.com) 日志系统几乎是每一个实际的软件项目从开发、测试到交付&#xff0c;再到后期的维护过程中极为重要的 查看软件代码运行流程、 还原错误现场、 记录运行错误位置及上下文等的重要依据。一个高性能的日志系统&#xff0c…
阅读更多...
Windows上基于Tesseract OCR5.0官方语言库的LSTM字库训练

Windows上基于Tesseract OCR5.0官方语言库的LSTM字库训练

系列文章目录 Tesseract OCR引擎 文章目录 系列文章目录前言一、LSTM字库训练是什么&#xff1f;二、使用步骤1. 环境准备1.1下载Tesseract 程序并安装1.2下载Tesseract 训练字库1.3下载工具jTessBoxEditor 2. LSTM训练2.1 将要训练的图片(jpg/tif)合并成一个文件2.2 生成box文…
阅读更多...
未来之路：大模型技术在自动驾驶的应用与影响

未来之路：大模型技术在自动驾驶的应用与影响

本文深入分析了大模型技术在自动驾驶领域的应用和影响&#xff0c;万字长文&#xff0c;慢慢观看~ 文中首先概述了大模型技术的发展历程&#xff0c;自动驾驶模型的迭代路径&#xff0c;以及大模型在自动驾驶行业中的作用。接着&#xff0c;详细介绍了大模型的基本定义、基础功…
阅读更多...
springcloud旅游网站源码

springcloud旅游网站源码

开发技术&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;idea&#xff0c;nodejs&#xff0c;vscode springcloud springboot mybatis vue 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索景区&#xff0c;轮播图&#xff0c;旅游攻略列表 点击攻…
阅读更多...
dameng数据库数据id decimal类型，精度丢失

dameng数据库数据id decimal类型，精度丢失

问题处理 这一次也是精度丢失&#xff0c;但是问题呢还是不一样&#xff0c;这一次所有的id都被加一了&#xff0c;只有id字段被加一&#xff0c;还有的查询查出来封装成对象之后对象的id字段被减一了&#xff0c;数据库id字段使用的decimal&#xff08;20,6&#xff09;&…
阅读更多...
新版本Idea设置启动参数

新版本Idea设置启动参数

1.进入配置页面 2.点击下图红框的部分&#xff0c;会看到有很多操作可选 3.选择添加VM参数即可 此时就会多出一个可以输入参数的框了&#xff0c;如下&#xff1a;
阅读更多...
Postman for Mac(HTTP请求发送调试工具)v10.18.10官方版

Postman for Mac(HTTP请求发送调试工具)v10.18.10官方版

Postman for mac是一个提供在MAC设备上功能强大的开发&#xff0c;监控和测试API的绝佳工具。非常适合开发人员去使用。此版本通过Interceptor添加了对请求捕获的支持&#xff0c;修正了使用上下文菜单操作未复制响应正文的问题和预请求脚本的垂直滚动条与自动完成下拉列表重叠…
阅读更多...
计算机网络课后作业2023秋

计算机网络课后作业2023秋

计算机网络第三版吴功宜版 课后作业 第一章作业三、计算与问答3.73.8 第二章作业三、计算与问答3.23.53.6 第三章作业三、计算与问答3.13.53.73.8 第四章作业三、计算与问答3.13.2 第五章作业三、计算与问答3.13.33.4VLAN交换机模式模式切换重置交换机VLA&#xff2e;配置命令其…
阅读更多...
深入理解JVM虚拟机第二十四篇：详解JVM当中的动态链接和常量池的作用

深入理解JVM虚拟机第二十四篇：详解JVM当中的动态链接和常量池的作用

大神链接&#xff1a;作者有幸结识技术大神孙哥为好友&#xff0c;获益匪浅。现在把孙哥视频分享给大家。 孙哥链接&#xff1a;孙哥个人主页 作者简介&#xff1a;一个颜值99分&#xff0c;只比孙哥差一点的程序员 本专栏简介&#xff1a;话不多说&#xff0c;让我们一起干翻J…
阅读更多...
在虚拟环境下安装python包

在虚拟环境下安装python包

PyCharm可以自己给项目创建虚拟环境&#xff0c;示例如下&#xff1a; 首先通过File—>Setting—>Project&#xff1a;【项目名称】—>Project Interpreter—>设置—>add—>Virtuallenv Environment配置虚拟环境即可 添加解释器&#xff1a; 当创建虚拟环…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023