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.rhkb.cn/news/197813.html

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

相关文章

影刀sqlite的插入方法

影刀sqlite的插入方法

影刀sqlite的插入方法 变量外面不用加‘’
阅读更多...
【开源】基于Vue.js的开放实验室管理系统的设计和实现

【开源】基于Vue.js的开放实验室管理系统的设计和实现

项目编号&#xff1a; S 013 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S013&#xff0c;文末获取源码。} 项目编号&#xff1a;S013&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…
阅读更多...
大语言模型的三阶段训练

大语言模型的三阶段训练

为了训练专有领域模型&#xff0c;选择LLaMA2-7B作为基座模型&#xff0c;由于LLaMA模型中文词表有限&#xff0c;因此首先进行中文词表的扩展&#xff0c;然后进行三阶段训练&#xff08;增量预训练&#xff0c;有监督微调&#xff0c;强化学习&#xff09;。 代码将全部上传…
阅读更多...
使用Redis实现分布式锁

使用Redis实现分布式锁

Hi, I’m Shendi 使用Redis实现分布式锁 需求场景 需要使用到分布式锁的场景非常多&#xff0c;例如抢单等并发场景&#xff0c;这里举一个例子。 有一个商品&#xff0c;限量出售100个&#xff0c;一个用户下单&#xff0c;数量就减少一个&#xff0c;当剩下最后一个时&…
阅读更多...
Verilog基础：仿真时x信号的产生和x信号对于各运算符的特性

Verilog基础：仿真时x信号的产生和x信号对于各运算符的特性

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 信号爆x也许是所有IC人的噩梦&#xff0c;满屏的红色波形常让人头疼不已&#xff0c;但x信号的产生原因却常常只有几种&#xff0c;只要遵循一定的代码规范&#…
阅读更多...
图像分类(五) 全面解读复现ResNet

图像分类(五) 全面解读复现ResNet

解读 Abstract—摘要 翻译 更深的神经网络往往更难以训练&#xff0c;我们在此提出一个残差学习的框架&#xff0c;以减轻网络的训练负担&#xff0c;这是个比以往的网络要深的多的网络。我们明确地将层作为输入学习残差函数&#xff0c;而不是学习未知的函数。我们提供了非…
阅读更多...
ubuntu中用docker部署jenkins，并和码云实现自动化部署

ubuntu中用docker部署jenkins，并和码云实现自动化部署

1.部署jenkins docker network create jenkins docker run --name jenkins-docker --rm --detach \--privileged --network jenkins --network-alias docker \--env DOCKER_TLS_CERTDIR/certs \--volume jenkins-docker-certs:/certs/client \--volume jenkins-data:/var/jen…
阅读更多...
美国服务器：全面剖析其主要优点与潜在缺点

美国服务器：全面剖析其主要优点与潜在缺点

​　　服务器是网站搭建的灵魂。信息化的今天&#xff0c;我们仍需要它来为网站和应用程序提供稳定的运行环境。而美国作为全球信息技术靠前的国家之一&#xff0c;其服务器市场备受关注。那么&#xff0c;美国服务器究竟有哪些主要优点和潜在缺点呢? 优点 数据中心基础设施&a…
阅读更多...
三十分钟学会Hive

三十分钟学会Hive

Hive的概念与运用 Hive 是一个构建在Hadoop 之上的数据分析工具&#xff08;Hive 没有存储数据的能力&#xff0c;只有使用数据的能力&#xff09;&#xff0c;底层由 HDFS 来提供数据存储&#xff0c;可以将结构化的数据文件映射为一张数据库表&#xff0c;并且提供类似 SQL …
阅读更多...
C语言 字符函数汇总，模拟实现各字符函数（炒鸡详细）

C语言 字符函数汇总，模拟实现各字符函数（炒鸡详细）

目录 求字符串长度 strlen 示例 模拟实现strlen 长度不受限制的字符串函数 strcpy 示例 模拟实现strcpy strcat 模拟实现strcat strcmp 示例 模拟实现strcmp 长度受限制的字符串函数介绍 strncpy 示例 模拟实现strncpy strncat 示例 模拟实现strncat s…
阅读更多...
行列式某一行所有元素除(i, j)元外都为0，则行列式等于(i, j)元与(i, j)元的代数余子式的乘积

行列式某一行所有元素除(i, j)元外都为0，则行列式等于(i, j)元与(i, j)元的代数余子式的乘积

阅读更多...
OpenCV C++ 图像处理实战 ——《OCR字符识别》

OpenCV C++ 图像处理实战 ——《OCR字符识别》

OpenCV C++ 图像处理实战 ——《OCR字符识别》 一、结果演示二、tesseract库配置2.1下载编译三、OCR字符识别3.1 文本检测方式3.1.1 RIL_BLOCK3.1.2 RIL_PARA3.1.3 RIL_TEXTLINE3.1.4 RIL_WORD3.1.5 RIL_SYMBOL3.2 英文文本检测3.3 中英文本检测四、源码测试图像下载总结一、结…
阅读更多...
随机过程-张灏

随机过程-张灏

文章目录 导论随机过程相关 学习视频来源&#xff1a;https://www.bilibili.com/video/BV18p4y1u7NP?p1&vd_source5e8340c2f2373cdec3870278aedd8ca4 将持续更新—— 第一次更新&#xff1a;2023-11-19 导论 教材&#xff1a;《随机过程及其应用》陆大絟.张颢 参考&…
阅读更多...
BatchNormalization:解决神经网络中的内部协变量偏移问题

BatchNormalization:解决神经网络中的内部协变量偏移问题

ICML2015 截至目前51172引 论文链接 代码连接(planing) 文章提出的问题 减少神经网络隐藏层中的”内部协变量偏移”问题。 在机器学习领域存在“协变量偏移”问题，问题的前提是我们划分数据集的时候，训练集和测试集往往假设是独立同分布（i.i.d）的，这种独立同分布更有利于…
阅读更多...
数据资产到底如何入表？

数据资产到底如何入表？

2024年1月1日起&#xff0c;财政部《企业数据资源相关会计处理暂行规定》正式施行&#xff0c;距离现在只有一个多月的时间。 数据资源入表意味着企业可以将数据资源确认为企业资产负债表中“资产”一项。对于拥有丰富数据资源的企业来说&#xff0c;有望在财务报表中体现其真…
阅读更多...
辅助解决小白遇到的电脑各种问题

辅助解决小白遇到的电脑各种问题

写这个纯属是为了让电脑小白知道一些电脑上的简单操作&#xff0c;勿喷&#xff01;&#xff01;&#xff01; 一&#xff1a;当小白遇到电脑程序不完全退出怎么办&#xff1f; 使用软件默认的退出方式 此处拿百度网盘举例&#xff1a; 用户登录网盘后&#xff1a; 如果直接点…
阅读更多...
C_12练习题

C_12练习题

一、单项选择题(本大题共20小题,每小题2分&#xff0c;共40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) C 风格的注释&#xff0c;也称块注释或多行注释&#xff0c;以&#xff08;&#xff09;…
阅读更多...
图论| 827. 最大人工岛 127. 单词接龙

图论| 827. 最大人工岛 127. 单词接龙

827. 最大人工岛 题目&#xff1a;给你一个大小为 n x n 二进制矩阵 grid 。最多 只能将一格 0 变成 1 。返回执行此操作后&#xff0c;grid 中最大的岛屿面积是多少&#xff1f; 岛屿 由一组上、下、左、右四个方向相连的 1 形成。 题目链接&#xff1a;[827. 最大人工岛](ht…
阅读更多...
2023年【广东省安全员C证第四批（专职安全生产管理人员）】考试题库及广东省安全员C证第四批（专职安全生产管理人员）考试试卷

2023年【广东省安全员C证第四批（专职安全生产管理人员）】考试题库及广东省安全员C证第四批（专职安全生产管理人员）考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 广东省安全员C证第四批&#xff08;专职安全生产管理人员&#xff09;考试题库根据新广东省安全员C证第四批&#xff08;专职安全生产管理人员&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将广东省安…
阅读更多...
前端调取摄像头并实现拍照功能

前端调取摄像头并实现拍照功能

前言 最近接到的一个需求十分有意思&#xff0c;设计整体实现了前端仿 微信扫一扫 的功能。整理了一下思路&#xff0c;做一个分享。 tips: 如果想要实现完整扫一扫的功能&#xff0c;你需要掌握一些前置知识&#xff0c;这次我们先讲如何实现拍照并且保存的功能。 一. wind…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发