Java Web(三)--CSS

介绍

为什么需要:

  • 在没有 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.mzph.cn/news/644519.shtml

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

相关文章

论文翻译:On Bringing Robots Home

On Bringing Robots Home 关于引入机器人到家庭 文章目录 On Bringing Robots Home关于引入机器人到家庭1 Introduction1 引言2 Technical Components and Method2 技术组件与方法2.1 Hardware Design2.1 硬件设计2.2 Pretraining Dataset – Homes of New York2.2 预训练数据…

微信小程序开发创建component组件,报错WXML file not found解决方案

报错如下&#xff1a; 解决方案&#xff1a; 在组件.json文件加上"styleIsolation": "apply-shared",&#xff1a;

C++ 数论相关题目(欧拉函数)

欧拉函数 给定 n 个正整数 ai &#xff0c;请你求出每个数的欧拉函数。 欧拉函数的定义 1∼N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为 ϕ(N) 。 若在算数基本定理中&#xff0c;Npa11pa22…pamm &#xff0c;则&#xff1a; ϕ(N) Np1−1p1p2−1p2…pm−1pm 输…

人工智能的未来:机遇与挑战

人工智能的未来:机遇与挑战 0引言 随着科技的飞速发展,人工智能(AI)已经成为了我们生活中不可或缺的一部分。从智能手机、自动驾驶汽车到智能家居系统,人工智能的应用已经深入到各个领域。然而,尽管人工智能为我们带来了诸多便利,但它也引发了一系列关于隐私、安全和道…

Spring Security 之 表单登录

表单登录 Spring Security提供了支持通过HTML表单提供用户名和密码。本节详细介绍了Spring Security中表单身份验证的工作原理。 本节将介绍Spring Security中的基于表单的登录工作原理。首先,我们将看到用户如何被重定向到登录表单。 第1步,用户首先对其未经授权的资源(/…

【Spring】Spring AOP原理

文章目录 前言代理模式静态代理动态代理JDK动态代理CGLib 动态代理 总结 前言 前面我们学习了关于 Spring AOP 的使用&#xff0c;那么今天这篇文章&#xff0c;我们将深入理解 Spring AOP 的原理&#xff0c;也就是 Spring 是如何实现 AOP 的。 Spring AOP 是基于动态代理来…

matlab抽取与插值

什么是抽取&#xff1f; 我们假设一个数字信号 x ( n ) , n 1 , 2 , . . . , N x(n),n1,2,...,N x(n),n1,2,...,N共有 N N N个点&#xff0c;抽取就是每个几个点抽1个点&#xff0c;比如2倍抽取&#xff0c;那么抽取后的信号为 y ( n ) , y ( 1 ) x ( 1 ) , y ( 2 ) x ( 3 …

IO 专题

使用try-with-resources语句块&#xff0c;可以自动关闭InputStream [实践总结] FileIUtils 共通方法最佳实践 [实践总结] java 获取在不同系统下的换行符 [实践总结] StreamIUtils 共通方法最佳实践 斜杠“/“和反斜杠“\“的区别 路径中“./”、“…/”、“/”代表的含义…

你真的会数据结构吗:顺序表

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ 又和大家见面啦&#xff01;在大家看到这个标题的时候其实就已经发现了&#xff1a;我们的C语言的基础知识大…

【GitHub项目推荐--不错的 Go开源项目】【转载】

开源实时性能分析平台 Pyroscope 是基于 Go 的开源实时性能分析平台&#xff0c;在源码中添加几行代码 pyroscope 就能帮你找出源代码中的性能问题和瓶颈、CPU 利用率过高的原因&#xff0c;调用树展示帮助你理解程序&#xff0c;支持 Go、Python、Ruby 语言。 Pyroscope 可以…

java程序判等问题

注意 equals 和 的区别 对基本类型&#xff0c;比如 int、long&#xff0c;进行判等&#xff0c;只能使用 &#xff0c;比较的是直接值。因为基本类型的值就是其数值。对引用类型&#xff0c;比如 Integer、Long 和 String&#xff0c;进行判等&#xff0c;需要使用 equals 进…

智能解决方案——体脂秤芯片CSU18M91

现在的年轻人爱健身&#xff0c;十分关注身材、形体&#xff0c;减肥、健身成了生活日常&#xff1b;中老年人则关注健康指数、有无病症&#xff0c;实时把握身体情况。现在一台体脂称通过测试体重、体脂、BMI、水分等数据并给出相应提示&#xff0c;并且许多人都将体脂检测数据…

MySQL分组,获取组内最新的10条数据

一、记录 记录一次SQL&#xff0c;最近在项目中遇到了一个相对比较复杂的SQL。 要求依据分组&#xff0c;获取每个分组后的前10条数据。 分组查询最新的数据&#xff0c;应该都做过&#xff0c;但是获取前10条数据&#xff0c;还是没处理过的。 二、处理 2.1 前期数据准备 …

开发知识点-Flutter移动应用开发

支持 安卓 IOS Android 鸿蒙 第一章dart基础章节介绍 移动电商——Flutter-广告Banner组件制作 移动电商——Flutter实战课程介绍 Flutter实例——路由跳转的动画效果

Elment UI的el-table-column表头旁边有点击按钮类似的操作

Elment UI的el-table-column表头旁边有点击按钮类似的操作 <el-table-column fixed"right" label"操作" ><!-- 表头 --> {{-- <template slot"header" header"scope">--}} {{-- <span…

精通 VS 调试技巧,学习与工作效率翻倍!

​ ✨✨ 欢迎大家来到贝蒂大讲堂✨✨ ​ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; ​ 所属专栏&#xff1a;C语言学习 ​ 贝蒂的主页&#xff1a;Betty‘s blog 1. 什么是调试 当我们写代码时候常常会遇见输出结果不符合我们预…

单轴测径仪在线缆电缆测控中的应用

线缆电缆在生产中能进行品质测量与控制&#xff0c;对其生产模式而言&#xff0c;是更为合适的&#xff0c;毕竟其生产模式决定了其任何品质问题出现都会造成产品的品质下降或不合格。要想进行生产高品质的产品&#xff0c;对产线的要求较高。 单轴测径仪作为测控一体&#xff…

安卓开发之自动缩放布局

AutoScalingLayout 适用于 Android 的自动缩放布局。 替换布局&#xff1a; 我们只需要替换根布局所需的自动缩放&#xff0c;子布局也将实现自动缩放。 原始布局AutoScalingLayout相对布局ASRelativeLayout线性布局ASLinearLayoutFrameLayout&#xff08;框架布局&#xff…

项目一:踏上Java开发之旅

文章目录 一、实战概述二、实战步骤任务1&#xff1a;安装配置JDK并开发第一个Java程序步骤一&#xff1a;安装JDK步骤二&#xff1a;配置JDK环境变量步骤三&#xff1a;开发第一个Java程序 课堂练习任务1、打印个人信息任务2、打印直角三角形任务3、打印一颗爱心任务4、打印史…

Linux服务器系统修改SSH端口教程

修改端口号是通过修改SSH的配置文件实现的&#xff0c;在服务器终端先激活root用户&#xff0c;然后输入&#xff1a; vim /etc/ssh/sshd_config找到#Port 22这个位置 键盘按i进入编辑模式 删除掉Port 22前面的#&#xff0c;然后键盘按一下回车键&#xff08;如果没有#可不必…