Java Web(三)--CSS

news2024/12/23 8:28:29

介绍

为什么需要:

  • 在没有 CSS 之前,想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性,费心费力;
  • CSS 可以让  html  元素(内容) + 样式(CSS)分离,提高web 开发的工作效率(针对前端开发),从而更好的控制页面。

CSS是什么:

  • CSS  指的是层叠样式表* (Cascading Style Sheets);
  •  在head标签内,出现<style type="text/css"></style>,表示要写css内容。
  • css的注释是 /* */ 
  • CSS 教程

注意:在调试css时,可以通过修改颜色,或者大小来看;

<head>
    <meta charset="UTF-8">
    <title>css 快速入门</title>

    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>

说明:

  • div{} 表示对HTML中的div<>元素进行样式的指定, 当运行页面时,div<>元素就会被 div{} 渲染、修饰;
  •  width: 200px(属性):表示对div样式的具体指定, 可以有多个; 如果有多个,使用; 分开即可。
  • 最后属性可以没有; 但是建议写上。

语法

CSS 语法可以分为两部分: 

说明:一般每行只描述一个属性;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <!--说明:元素选择器会修饰所有的对应的元素-->

    <!--元素选择器-->
    <style type="text/css">
        h1 {
            color: beige;
        }

        p {
            color: blue;
        }
    </style>

    <!--id选择器-->
    <style type="text/css">
        #hsp1 {
            color: gold;
        }

        #css2 {
            color: green;
        }
    </style>
    <!--组合选择器-->
    <style type="text/css">
        /*
            组合选择器的基本语法:
            选择器 1,选择器 2,选择器 n{ 属性:值; }
         */
        .class01, #id01 {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>

    <!--class选择器-->
    <style type="text/css">
        .css1 {
            color: red;
        }

        .css2 {
            color: sandybrown;
        }
    </style>

</head>
<body>
<h1>Java教育01</h1>
<p>hello, world~</p>

<h1 id="hsp1">Java教育02</h1>
<p id="css2">hello, world~</p>

<div class="class01">Java教育03</div>
<p id="id01">hello, world~</p>


<div class="css1">Java教育05</div>
<p class="css2">hello, world~</p>
</body>
</html>


常用样式

边框border

<style type="text/css">
        div {
            width: 50%; 
            height: 100px;
            border: 1px dashed blue;
        }
/style>

 说明:宽度/高度:        像素值: 100px;         也可以是百分比值: 50%;

背景颜色

   <style>
        div {
            width: 200px;
            height: 100px;
            background-color: #ff7d44;
        }
    </style>

字体样式

    <style type="text/css">
        div {
            color: #ff7d44;
        }
    </style>

    1. font-size: 指定大小, 可以按照像素大小

    2. font-weight : 指定是否粗体

    3. font-family : 指定类型

        指定字体颜色的3种方式

  •             1. 英文(red)
  •             2. 16 进制 #ff7d44    [使用最多]
  •             3. 三原色 rgb(1,1,1)

div居中:

  •     margin-left : auto      表示左居中
  •     margin-right : auto    表示右居中

文本居中:     text-align: center;

超链接去下划线:    text-decoration: none;

表格细线

  •     设置边框: border: 1px solid black
  •     将边框合并: border-collapse: collapse;
  •     指定宽度: width
  •     设置边框:给td, th 指定即可border: 1px solid black;

        1.table, tr, td  表示组合选择器

        2.table  和tr  还有td ,都用统一的样式指定,  可以提高复用性

列表去修饰:    list-style: none;

<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度: width
            设置边框: 给 td, th 指定即可 border: 1px solid black;

            1. table, tr, td 表示组合选择器
            2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
         */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
    <style type="text/css">
        ul {
            /*说明:list-style:none表示去掉默认的修饰*/

            list-style: none;
        }
    </style>

使用

方式一

在标签的 style 属性上设置 CSS 样式;

弊端

  •     标签多了。样式多了,代码量庞大
  •     可读性差
  •     CSS 代码没有复用性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在标签的 style 属性上设置CSS样式</title>
</head>

<body>

<div style="width: 300px;height: 100px;background-color: red">hello, 北京</div>
<br/>

<div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/>

<div style="width: 300px;height: 100px;background-color: red">hello, 天津</div>
<br/>

</body>

</html>

方式二

在 head 标签中, 使用 style 标签来定义需要的 CSS 样式;

弊端

  •     只能在同一页面内复用代码维护不方便,
  •     实际项目中会有很多页面,需要到对应页面去修改。工作量大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在 head 标签中,使用 style 标签来定义需要的 CSS 样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

方式三--推荐方式

把 CSS 样式写成单独的 CSS 文件, 再通过 link 标签引入;

语法:    <link rel="stylesheet" type="text/css" href="./css/my.css" />

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件</title>
    <link rel="stylesheet" href="./css/my.css" />
</head>

<body>
<div>hello, 北京~</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>

</html>


//my.css文件
div {
    width: 200px;
    height: 100px;
    background-color: red;
}
span {
    border: 2px dashed blue;
}

说明:

href 表示要引入的css文件的位置,可以是web的完整路径;

type="text/css" 可以有,也可以不写;

rel:relation 关联,它描述了当前页面与href所指定文档的关系;

  •         即指明你链进来的对象是个什么东西
  •         只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持;

各个属性值

  •     Alternate -- 定义交替出现的链接 /文档的替代版本(比如打印页、翻译或镜像)
  •     Stylesheet -- 定义一个外部加载的样式表 , 关联的是一个样式表(stylesheet)文档;       它表示这个link在文档初始化时将被使用
  •     Start -- 通知搜索引擎,文档的开始 
  •     Next -- 记录文档的下一页.(浏览器可以提前加载此页) 
  •     Prev -- 记录文档的上一页.(定义浏览器的后退键) 
  •     contents    文档的目录。
  •     index    文档的索引。
  •     glossary    在文档中使用的词汇的术语表(解释)。
  •     copyright    包含版权信息的文档。
  •     chapter    文档的章。
  •     section    文档的节。
  •     subsection    文档的小节。
  •     appendix    文档的附录。
  •     help    帮助文档。
  •     bookmark    相关文档。

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

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

相关文章

【Vue】父组件如何调用子组件的函数

【Vue】父组件如何调用子组件的函数 在Vue中&#xff0c;父组件可以通过多种方式调用子组件的函数。下面是几种常见的方法&#xff1a; 使用 ref 属性 这是调用子组件方法的最直接方式。首先&#xff0c;在父组件的模板中给子组件添加一个 ref 属性。然后&#xff0c;你可以通…

MongoDB之概述、命令

基础知识 是什么 概念 分布式文件存储数据库&#xff0c;提供高可用、可扩展、易部署的数据存储解决方案。 结构 BSON存储类型 类似JSON的一种二进制存储格式。相比于JSON&#xff0c;提供更丰富的类型支持。 优点是灵活&#xff0c;缺点是空间利用率不佳。 类型说明解释…

【极数系列】Flink环境搭建(02)

【极数系列】Flink环境搭建&#xff08;02&#xff09; 引言 1.linux 直接在linux上使用jdk11flink1.18.0版本部署 2.docker 使用容器部署比较方便&#xff0c;一键启动停止&#xff0c;方便参数调整 3.windows 搭建Flink 1.18.0版本需要使用Cygwin或wsl工具模拟unix环境…

数字图像处理(实践篇)二十六 使用cvlib进行人脸检测、性别检测和目标检测

目录 1 安装cvlib 2 涉及的函数 3 实践 4 其他 cvlib一个简单,高级,易于使用的开源Python计算机视觉库。 1 安装cvlib # 安装依赖pip install opencv-python tensorflow# 安装cvlibpip install cvlib</

macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例 一&#xff1a; 简介 Socket 是 网络传输的抽象概念。 一般我们常用的有Tcp Socket和 UDP Scoket&#xff0c; 和类Unix 系统&#xff08;包括Mac&#xff09;独有的 Unix Domain Socket&#xff08;UDS&#xff09;。 Tcp Socket 能够…

(2)(2.4) CRSF/ELRS Telemetry

文章目录 前言 1 ArduPilot 参数编辑器 前言 &#xff01;Note ELRS&#xff08;ExpressLRS&#xff09;遥控系统使用穿越火线协议&#xff0c;连接方式类似。不过&#xff0c;它不像穿越火线那样提供双向遥测。 TBS CRSF 接收机与 ArduPilot 的接口中包含遥测和遥控信息。…

【K8S 云原生】K8S之HPA自动扩缩容、命名空间资源限制、容器抓包

目录 一、HPA概述 1、概念 2、两个重要的组件&#xff1a; 3、HPA的规则&#xff1a; 4、pod的副本数扩容有两种方式&#xff1a; 4.1、手动扩缩容&#xff0c;修改副本数&#xff1a; 4.2、自动扩缩容HPA 二、实验部署&#xff1a; 1、部署HPA 2、实现自动扩缩容 三…

Studio One 6 mac 6.5.2 激活版 数字音乐编曲创作

PreSonus Studio One是PreSonus出品的一款功能强大的音乐创作软件。主要为用户提供音乐创作、录音、编辑、制作等功能。它可以让你创造音乐&#xff0c;无限的轨道&#xff0c;无限的MIDI和乐器轨道&#xff0c;虚拟乐器和效果通道&#xff0c;这些都是强大和完美的。 软件下载…

JVM工作原理与实战(二十五):堆的垃圾回收-垃圾回收算法

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、垃圾回收算法介绍 1.垃圾回收算法的历史和分类 2.垃圾回收算法的评价标准 二、垃圾回收算法详解 1.标记清除算法 2.复制算法 3.标记整理算法 4.分代垃圾回收算法 总结 前言…

打开json文件,读取里边的每一行数据,每一行数据是一个字典,使用matplotlib画图

这段代码的目的是读取 JSON 文件&#xff0c;提取关键信息&#xff0c;然后使用 Matplotlib 绘制四个子图&#xff0c;分别显示不同的指标随着 iter 变化的情况。这种图形化分析有助于直观地了解模型的性能。 画图结果如下&#xff1a; json文件格式如下&#xff1a;下面只粘贴…

Nacos源码下载与运行

早先在linux环境下搭建过nacos环境 即Centos安装部署nacos实战&#xff0c;本次是从官网上下载源码&#xff0c;本地运行看看&#xff0c;记录过程&#xff0c;方便备查。 第一步、Nacos源码下载 推荐到nacos官网下载 Github地址&#xff0c;本次选择最新版&#xff0c;1.4.7…

计算机毕业设计 基于SpringBoot的民宿租赁系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

解决vue 2.6通过花生壳ddsn(frp内网穿透)实时开发报错Invalid Host header和websocket

请先核对自己的vue版本&#xff0c;我的是2.6.14&#xff0c;其他版本未测试 起因 这两天在维护一个基于高德显示多个目标&#xff08;门店&#xff09;位置的项目&#xff0c;由于高德要求定位必须使用https服务&#xff0c;遂在本地无法获取到定位坐标信息&#xff0c;于是…

数藏潮玩开启元宇宙新空间(定制开发)

元宇宙给我们带来了很多的可能性&#xff0c;对于一个品牌或者是平台来说&#xff0c;越早抓住数藏也就越早抓住了元宇宙的早起红利&#xff0c;就能在未来式这个超空间里面占住商机。 而数藏潮玩的想象空间是巨大的&#xff0c;所以能创造的生态也是无限大。在通过对数藏平台…

一文读懂:D3.js的前世今生,以及与echarts的对比

D3.js&#xff08;Data-Driven Documents&#xff09;是一种用于创建动态、交互式数据可视化的JavaScript库。它通过使用HTML、CSS和SVG等Web标准&#xff0c;将数据与文档结合&#xff0c;使得数据可以以一种直观和易于理解的方式进行呈现。D3.js的重要性在于它赋予了开发者更…

SSM:Spring + Spring MVC + MyBatis 的整合

SSM 前言整合 前言 在完成 Spring 、Spring MVC 与 MyBatis 基础知识的学习后&#xff0c;下面简单介绍 SSM 框架的整合使用。 整合 SSM&#xff0c;是 Java 开发中常用的一个 Web 框架组合&#xff0c;用于构建基于 Spring 和 MyBatis 的 Web 应用&#xff08; Spring MVC …

桌面型物联网智能机器人设计(预告)

相关资料 桌面级群控机器人CoCube探索-2022--CSDN博客 视频&#xff1a; 能&#xff01;有&#xff01;多&#xff01;酷&#xff01;CoCube桌面级群控机器人 让我看看谁在SJTU里划水… 简要介绍 设计一个桌面型物联网智能机器人&#xff0c;以ESP32芯片为核心&#xff0c;配…

Spring Security 6 学习-1

什么是 Spring Security Spring Security文档 Spring Security中文文档 Spring Security 是 Spring 家族中的安全型开发框架&#xff0c;主要解决三大方面问题&#xff1a;认证&#xff08;你是谁&#xff09;、授权&#xff08;你能干什么&#xff09;、常见攻击保护&#xff…

vue项目中使用Element多个Form表单同时验证

一、项目需求 在项目中一个页面中需要实现多个Form表单&#xff0c;并在页面提交时需要对多个Form表单进行校验&#xff0c;多个表单都校验成功时才能提交。 二、实现效果 三、多个表单验证 注意项&#xff1a;多个form表单&#xff0c;每个表单上都设置单独的model和ref&am…

GPT4+Python近红外光谱数据分析及机器学习与深度学习建模

详情点击链接&#xff1a;GPT4Python近红外光谱数据分析及机器学习与深度学习建模 第一&#xff1a;GPT4入门基础 1、ChatGPT概述&#xff08;GPT-1、GPT-2、GPT-3、GPT-3.5、GPT-4模型的演变&#xff09; 2、ChatGPT对话初体验&#xff08;注册与充值、购买方法&#xff09…