JavaWeb——CSS3的使用

news2024/12/24 10:22:31

目录

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.coloradmin.cn/o/1209128.html

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

相关文章

pycharm pro v2023.2.4（Python编辑开发)

pycharm pro v2023.2.4（Python编辑开发)

PyCharm2023是一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门为Python编程语言设计。以下是PyCharm2023的一些主要功能和特点&#xff1a; 代码编辑器&#xff1a;PyCharm2023提供了一个功能强大的代码编辑器&#xff0c;支持语法高亮、自动补全、代码调试、版…
阅读更多...
CleanMyMac4.14中文免费版mac系统管理软件

CleanMyMac4.14中文免费版mac系统管理软件

许多小伙伴使用Mac后都反馈电脑不如想象中的流畅&#xff0c;甚至有点卡顿的现象&#xff0c;原因可能是因为无用的应用占据了过多的内存&#xff0c;或者是系统盘垃圾过多&#xff0c;导致的电脑卡顿现象。 今天小编教给大家几招&#xff0c;让自己的Mac能够一键重生&#xf…
阅读更多...
7个UI设计师都在看的高质量SVG图标素材网站分享！

7个UI设计师都在看的高质量SVG图标素材网站分享！

之前已经给大家分享过一些图标资源及素材灵感网站&#xff0c;大家的反响是不错的&#xff0c;想着你们可能好需要来点新鲜的高质量SVG图标素材网站&#xff0c;直接就是一整套统一设计风格的图标库&#xff0c;来一个图标系列大合集&#xff0c;帮你更快更好的找到风格适配的图…
阅读更多...
Java版B/S架构云his医院信息管理系统源码（springboot框架）

Java版B/S架构云his医院信息管理系统源码（springboot框架）

一、技术框架 ♦ 前端&#xff1a;AngularNginx ♦ 后台&#xff1a;JavaSpring&#xff0c;SpringBoot&#xff0c;SpringMVC&#xff0c;SpringSecurity&#xff0c;MyBatisPlus&#xff0c;等 ♦ 数据库&#xff1a;MySQL MyCat ♦ 缓存&#xff1a;RedisJ2Cache ♦ 消息队…
阅读更多...
保序回归：拯救你的校准曲线（APP）

保序回归：拯救你的校准曲线（APP）

保序回归&#xff1a;拯救你的校准曲线&#xff08;APP&#xff09; 校准曲线之所以是评价模型效能的重要指标是因为&#xff0c;校准曲线衡量模型预测概率与实际发生概率之间的一致性&#xff0c;它可以帮助我们了解模型的预测结果是否可信。一个理想的模型应该能够准确地预测…
阅读更多...
超实用的公众号排版保姆级教程，纯干货

超实用的公众号排版保姆级教程，纯干货

公众号排版的重要性首先体现在能够提高阅读体验。一个好的排版可以让读者在阅读过程中感觉舒适、流畅&#xff0c;降低阅读压力。 公众号的排版风格也是品牌形象的一部分。一个专业的排版&#xff0c;不仅可以提高读者的信任度&#xff0c;也可以增强品牌的独特性。例如&#…
阅读更多...
无需数据库服务器部署脚本，全能型开源数据库监控平台lepus

无需数据库服务器部署脚本，全能型开源数据库监控平台lepus

Lepus 是一款开源的数据库监控平台&#xff0c;目前已经支持 MySQL、Oracle、SQLserver、MongoDB、Redis 等数据库的基本监控和告警。 Lepus 在监控数据库时&#xff0c;无需在每台数据库服务器上部署脚本或 Agent&#xff0c;只需要在数据库中创建授权账号后&#xff0c;即可…
阅读更多...
DM8读写分离集群安装部署_手动切换

DM8读写分离集群安装部署_手动切换

一、安装前准备 1.1 硬件环境建议 读写分离集群安装部署前需要额外注意网络环境和磁盘 IO 配置情况&#xff0c;其他环境配置项建议请参考安装前准备工作。 1.1.1 网络环境 心跳网络对 mal 通讯系统的影响非常大&#xff0c;如果网络丢包或者延迟较大&#xff0c;则会严重影…
阅读更多...
解决 vue3 element 表格和图片预览样式有冲突

解决 vue3 element 表格和图片预览样式有冲突

查看表格中的预览出现样式问题冲突 <el-image:src"${realSrc}"fit"cover":style"width:${realWidth};height:${realHeight};":preview-src-list"realSrcList":append-to-body"true"><template #error><div c…
阅读更多...
用placement label代替keep margin解决绕线问题

用placement label代替keep margin解决绕线问题

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 通常我们用keepout margin去降低多pin cell类型的密度&#xff0c;这里提供一种替代方案&#xff0c;即使用placement label。好处是只限制多pin cell彼此间距&#xff0c;不会…
阅读更多...
No202.精选前端面试题，享受每天的挑战和学习

No202.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…
阅读更多...
【MySQL系列】 第四章 · 约束

【MySQL系列】 第四章 · 约束

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…
阅读更多...
Django视图层（）

Django视图层（）

视图层 django视图层&#xff1a;Django项目下的views.py文件&#xff0c;它的内部是一系列的函数或者是类,用来处理客户端的请求后处理并返回相应的数据 三板斧 HttpResponse # 返回字符串 render # 返回html页面&#xff0c;并且在返回浏览器之前还可以给html文件…
阅读更多...
java springboot2.7 JSR303与Hibernate进行Bean的数据校验

java springboot2.7 JSR303与Hibernate进行Bean的数据校验

我们如果对数据能进行格式校验 做个安全检查就会容易很多 其实 各个系统中都必然后拥有数据校验&#xff0c;这也不是新东西 J2EE规范中JSR303就规范定义了一组有关数据校验的API 首先 我们在 pom.xml 中 注入依赖 <dependency><groupId>javax.validation</gr…
阅读更多...
vue day1（主要是指令）

vue day1（主要是指令）

1、引包 或者&#xff1a;cdn网址 2、创建实例&#xff0c;初始化渲染 3、插值表达式 {{}} 表达式&#xff1a;可以被求值的代码 4、响应式数据&#xff1a;数据发生变化&#xff0c;视图自动更新&#xff08;底层是dom操作&#xff09; data中数据会被添加到实例上&#x…
阅读更多...
【机器学习】朴素贝叶斯算法：多项式、高斯、伯努利，实例应用（心脏病预测）

【机器学习】朴素贝叶斯算法：多项式、高斯、伯努利，实例应用（心脏病预测）

1. 朴素贝叶斯模型 对于不同的数据&#xff0c;我们有不同的朴素贝叶斯模型进行分类。 1.1 多项式模型 &#xff08;1&#xff09;如果特征是离散型数据&#xff0c;比如文本这些&#xff0c;推荐使用多项式模型来实现。该模型常用于文本分类&#xff0c;特别是单词&#xf…
阅读更多...
Java实现身份证号校验，最后一位校验码校验

Java实现身份证号校验，最后一位校验码校验

中国居民身份证号码编码规则 第一、二位表示省&#xff08;自治区、直辖市、特别行政区&#xff09;。 第三、四位表示市&#xff08;地级市、自治州、盟及国家直辖市所属市辖区和县的汇总码&#xff09;。其中&#xff0c;01-20&#xff0c;51-70表示省直辖市&#xff1b;21-5…
阅读更多...
《AI超级个体：ChatGPT与AIGC实战指南 》书籍分享

《AI超级个体：ChatGPT与AIGC实战指南 》书籍分享

前言 ChatGPT是一款通用人工智能&#xff08;AI&#xff09;工具&#xff0c;使用过它的人都能感受到它的魅力。AI并不是一个新事物&#xff0c;它在全世界都发展很多年了&#xff0c;但在ChatGPT诞生之前&#xff0c;我们的AI只能算垂直AI&#xff0c;比如AlphaGo&#xff0c…
阅读更多...
刘家窑中医医院：鲁卫星主任团队走进社区，免费义诊送健康＂

刘家窑中医医院：鲁卫星主任团队走进社区，免费义诊送健康＂

北京丰台刘家窑中医医院&#xff0c;前身为中国医学会航空医学会专家门诊&#xff0c;是一家医保单位&#xff0c;无需定点即可享受医保服务。这是一家集医疗、科研、预防、保健为一体的国家非营利性特色中医院。为了更好地服务社区群众&#xff0c;提高社区居民对健康的关注&a…
阅读更多...
Python爬虫程序网络请求及内容解析

Python爬虫程序网络请求及内容解析

以下是一个简单的Python爬虫程序&#xff0c;用于爬取商户的内容。这个程序使用了requests和BeautifulSoup库来进行网络请求和内容解析。 import requests from bs4 import BeautifulSoup# 爬虫爬虫IP信息 proxy_host duoip proxy_port 8000# 请求URL url 目标网站# 创建一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023