JAVAWeb之CSS学习

前引

CSS,层叠样式表(Cascading Style Sheets),能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有网页对象和模型样式编辑的能力,简单来说,美化页面。

1.引入css的方式有三种

一.引入css的方式有三种:1.行内式在标签内使用style属性来设置css样式语法:style="样式名:样式值;样式名;样式值;......<div style="width: 100px; height: 100px; background-color: red;"></div>优点:1.直接在标签内引入css样式,方便查看和修改2.优先级高,可以覆盖其他css样式3.可以快速查看效果,不需要刷新页面4.可以快速修改样式,不需要修改其他文件缺点:总结: 代码复用度低,不利于维护 css样式和html结构代码交织,影响阅读,性能1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码6.不利于兼容,如果需要兼容不同浏览器,需要手动添加兼容代码8.不利于优化,如果需要优化代码,需要手动添加优化代码2.嵌入式在html页面中,通过head标签创建style标签,在style标签中编写css样式,定义本页面公共样式需要通过选择器确定样式的作用元素语法:选择器{样式名:样式值;样式名:样式值;......}<选择器 {样式名:样式值;样式名:样式值;......}>优点:1.代码复用度高,可以复用样式2.可以维护,如果需要修改样式,只需要修改style标签中的样式缺点:1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码4.不利于优化,如果需要优化代码,需要手动添加优化代码注意:style标签必须放在head标签中注意:style标签可以引入多个css文件注意:style标签引入的css文件会覆盖之前的css文件3.外部式在html页面中创建link标签,在link标签中引入外部的css文件<link rel="stylesheet" href="css文件路径">注意:link标签必须放在head标签中注意:link标签可以引入多个css文件注意:link标签引入的css文件会覆盖之前的css文件

行内式与嵌入式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css引入</title><!--	嵌入式--><style>/*元素选择器,通过标签名确定样式的作用元素*/input{width: 100px;height: 100px;background-color: turquoise;color: violet;font-size: 20px;font-family: '微软雅黑';border: 2px solid #00d9ff;border-radius: 5px;}</style></head>
<body>
<!--
一.引入css的方式有三种:1.行内式在标签内使用style属性来设置css样式语法:style="样式名:样式值;样式名;样式值;......<div style="width: 100px; height: 100px; background-color: red;"></div>优点:1.直接在标签内引入css样式,方便查看和修改2.优先级高,可以覆盖其他css样式3.可以快速查看效果,不需要刷新页面4.可以快速修改样式,不需要修改其他文件缺点:总结: 代码复用度低,不利于维护 css样式和html结构代码交织,影响阅读,性能1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码6.不利于兼容,如果需要兼容不同浏览器,需要手动添加兼容代码8.不利于优化,如果需要优化代码,需要手动添加优化代码2.嵌入式在html页面中,通过head标签创建style标签,在style标签中编写css样式,定义本页面公共样式需要通过选择器确定样式的作用元素语法:选择器{样式名:样式值;样式名:样式值;......}<选择器 {样式名:样式值;样式名:样式值;......}>优点:1.代码复用度高,可以复用样式2.可以维护,如果需要修改样式,只需要修改style标签中的样式缺点:1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码4.不利于优化,如果需要优化代码,需要手动添加优化代码注意:style标签必须放在head标签中注意:style标签可以引入多个css文件注意:style标签引入的css文件会覆盖之前的css文件3.外部式在html页面中创建link标签,在link标签中引入外部的css文件<link rel="stylesheet" href="css文件路径">注意:link标签必须放在head标签中注意:link标签可以引入多个css文件注意:link标签引入的css文件会覆盖之前的css文件
-->
<h1>行内式</h1>
<input type="button" value="原神启动"style="width: 100px;height: 100px;background-color: turquoise;color: violet;font-size: 20px;font-family: '微软雅黑';border: 2px solid #00d9ff;border-radius: 5px;"><h1>嵌入式</h1><input type="button" value="崩铁启动">
<input type="button" value="崩坏3启动">
<input type="button" value="鸣潮启动"></body>
</html>

 外部式引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01.1.外部式引入</title><link href="/CSS学习/CSS表文件/外部式.css" rel="stylesheet">
</head>
<body>
<h1>外部式</h1>
<input type="button" value="崩铁启动">
<input type="button" value="崩坏3启动">
<input type="button" value="鸣潮启动">
</body>
</html>

 

2.CSS选择器

CSS选择器
/*主要*/1.元素选择器语法:<style>标签名{}</>style>例如:p{}  h1{}  div{}  span{}2.类选择器语法:.类名{}例如:.box{}  .red{}  .blue{}  .green{}3.id选择器语法:#id名{}例如:#box{}  #red{}  #blue{}  #green{}/*次要*/4.属性选择器语法:[属性名]{}例如:[title]{}5.伪类选择器语法:元素名:伪类名{}例如:a:hover{}6.伪元素选择器语法:元素名::伪元素名{}例如:p::first-letter{}7.组合选择器语法:元素名1 元素名2{}例如:p span{}8.群组选择器语法:选择器1,选择器2,选择器3{}例如:p,h1,div{}9.继承选择器语法:元素名1 元素名2{}例如:p span{}10.后代选择器语法:元素名1 元素名2{}例如:p span{}11.子元素选择器语法:元素名1 > 元素名2{}例如:p > span{}12.相邻兄弟选择器语法:元素名1 + 元素名2{}例如:p + span{}13.通用兄弟选择器语法:元素名1 ~ 元素名2{}例如:p ~ span{}14.否定选择器语法:元素名1:元素名2{}例如:p:元素名2{}15.优先级选择器语法:元素名1:元素名2{}例如:p:元素名2{}16.通配符选择器语法:元素名1:元素名2{}例如:p:元素名2{}17.属性选择器语法:元素名1:元素名2{}例如:p:元素名2{}18.伪类选择器语法:元素名1:元素名2{}例如:p:元素名2{}

 元素选择器

语法格式:标签名{ }

在{ }中的css样式会作用到所有标签名对应的标签上

缺点:若某些同名标签的元素不希望使用某些样式,不能与其他同名标签的元素区分

1.元素选择器 根据标签名确定作用元素
语法:
<style>标签名{}
</style>
缺点:同名元素不希望使用一些样式,或不同名元素希望使用该样式都无法使用  

类选择器 

class选择器根据元素的class属性值确定样式的作用元素

元素的class属性值可以重复,而且一个元素的class属性可以有多个值,多个属性之间用空格分开

语法:.class属性值{ }

类选择器语法:.类名{}class属性值可以有一个,也可以有n个,不同标签可以使用同一个class

 id选择器

id选择器根据标签的id值确定样式的作用元素

一般每个元素都有id值,但是在一个页面中,id的值不应该相同,应该具有唯一性

语法格式:#id值{ }

缺点:因为id值有唯一性,通过id选择器指定的样式只能作用到一个元素上

id选择器 根据id值确定作用元素一般每个元素都有id属性。但每个页面中不应该相同,所有id具有唯一性
语法:#id名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><!--1.元素选择器 根据标签名确定作用元素语法:<style>标签名{}</style>缺点:同名元素不希望使用一些样式,或不同名元素希望使用该样式都无法使用  --><style >input {width: 220px;height: 80px;background-color: chartreuse;color: white;border: 3px solid green;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}</style><!--3.id选择器 根据id值确定作用元素一般每个元素都有id属性。但每个页面中不应该相同,所有id具有唯一性语法:#id名{}--><style>#id1 {width: 220px;height: 80px;background-color: #00c4ff;color: #1d4d53;border: 3px solid #806600;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}#id2 {width: 220px;height: 80px;background-color: #00c4ff;color: #1d4d53;border: 3px solid #806600;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}#id3 {width: 220px;height: 80px;background-color: #00c4ff;color: #1d4d53;border: 3px solid #806600;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}</style><!--2.类选择器语法:.类名{}class属性值可以有一个,也可以有n个,不同标签可以使用同一个class--><style>.colorClass{background-color: springgreen;color: violet;border-color: wheat;}.dxClass{width: 300px;height: 100px;font-size: 50px;line-height: 50px;border-radius: 10px;}.字体class{font-family: 楷体;border: 6px solid red;}
</style></head>
<body>
<!--CSS选择器
/*主要*/1.元素选择器语法:<style>标签名{}</>style>例如:p{}  h1{}  div{}  span{}2.类选择器语法:.类名{}例如:.box{}  .red{}  .blue{}  .green{}3.id选择器语法:#id名{}例如:#box{}  #red{}  #blue{}  #green{}<h1>元素选择器</h1>
<input type="button" value="崩铁启动"/>
<input type="button" value="崩坏3启动"/>
<input type="button" value="鸣潮启动"/><h1>id选择器</h1>
<input  id="id1" type="button" value="崩铁启动"/>
<input  id="id2" type="button" value="崩坏3启动"/>
<input  id="id3" type="button" value="鸣潮启动"/>
</body><h1>class选择器</h1>
<input  class="colorClass 字体class dxClass" type="button" value="崩铁启动"/>
<input   class="dxClass colorClass 字体class" type="button" value="崩坏3启动"/>
<input   class="dxClass colorClass 字体class"type="button" value="鸣潮启动"/>
</html>

 

3.CSS浮动

css的浮动使得元素脱离文档流,按照指定的方向(左或右发生移动),直到它的边缘碰到包含框或另一个浮动框的边框为止。

浮动后一定不会将文字挡住,文字会被挤到别的方向,就像水一样。

文档流是文档中可显示对象在排列时所占用的位置,脱离文档流就是在页面中不占位置了。

一个元素脱离文档流后,它在文档流中的下一个元素就会占用它的位置。


浮动float:right:右left:左

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css浮动</title><style>.outerDiv{width: 500px;height: 300px;border: 1px solid green;background-color: beige;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;}.d1{background-color: aqua;float: right;}.d2{background-color: rgb(255, 0, 0);}.d3{background-color: rgb(255, 255, 0);}</style>
</head>
<body><div class="outerDiv"><div class="innerDiv d1">diva</div><div class="innerDiv d2">divb</div><div class="innerDiv d3">divc</div></div>
</body>
</html>

注:浮动后的元素不会覆盖其他元素。 

 4.CSS定位

css定位要用到的样式有position、left、right、top、bottom

绝对定位代表定位只根据页面来定位

relative相对定位会相对其原本的位置来定位

fixed相对定位会相对浏览器窗口来定位,即如果页面较长,可以向下拖拽,但是不论如何拖拽,都会显示在窗口的同一个位置,一些广告就是如此。

一般left和right之中只用其中一个,top和bottom之中只用其中一个。

position:static:   默认absolute: 绝对relative   相对元素原本位置fixed      相对页面(动态小广告)

 

5.CSS盒子

对于一个块元素,width和height表示横向和纵向的容量,border是在容量的边缘外再加上指定像素的空间的厚度的空间,就像给此块元素套了层细胞壁。而内边距和外边距是根据border的内外,指定一定的区域留空,内边距的大小不会影响容量,而是将border项外扩张,就像扩大细胞壁和细胞膜的间距。

Margin(外边距)   - 清除边框外的区域,外边距是透明的;
Border(边框)    - 围绕在内边距和内容外的边框;
Padding(内边距) - 清除内容周围的区域,内边距是透明的;
Content(内容)   - 盒子的内容,显示文本和图像;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><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><!--Margin(外边距)   - 清除边框外的区域,外边距是透明的;Border(边框)    - 围绕在内边距和内容外的边框;Padding(内边距) - 清除内容周围的区域,内边距是透明的;Content(内容)   - 盒子的内容,显示文本和图像;-->
<div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div>
</div>
</body></html>

 

以margin为例,margin: 10px; 表示上下左右都是10px的外边距。margin: 10px 20px; 表示上下外边距是10px,左右外边距是20px。margin: 10px 20px 30px 40px表示上外边距是10px,右外边距是20px,下外边距是30px,左外边距是40px,即按顺时针上右下左的顺序。当然也可以使用margin-right,margin-top等方法分别指定大小。

padding也是同理。

margin-auto和padding-auto即自动居中。

 

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

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

相关文章

基于PHP的香水销售系统的设计与实现

摘 要 时代科技高速发展的背后&#xff0c;也带动了经济的增加&#xff0c;人们对生活质量的要求也不断提高。香水作为一款在人际交往过程中&#xff0c;给对方留下良好地第一印象的产品&#xff0c;在生活中也可以独自享受其为生活带来的点缀。目前香水市场体量庞大&#xff…

3. STM32_串口

数据通信的基础概念 什么是串行/并行通信&#xff1a; 串行通信就是数据逐位按顺序依次传输 并行通信就是数据各位通过多条线同时传输。 什么是单工/半双工/全双工通信&#xff1a; 单工通信&#xff1a;数据只能沿一个方向传输 半双工通信&#xff1a;数据可以沿两个方向…

网络安全相关证书资料

网络安全相关证书有哪些&#xff1f; 网络安全相关证书有哪些呢&#xff1f;了解一下&#xff01; 1. CISP &#xff08;国家注册信息安全专业人员&#xff09; 说到CISP&#xff0c;安全从业者基本上都有所耳闻&#xff0c;算是国内权威认证&#xff0c;毕竟有政府背景给认证…

【目标检测】YOLO:深度挖掘YOLO的性能指标。

YOLO 性能指标 1、物体检测指标2、性能评估指标详解2.1 平均精度&#xff08;mAP&#xff09;2.2 每秒帧数&#xff08;FPS&#xff09;2.3 交并比&#xff08;IoU&#xff09;2.4 混淆矩阵&#xff08;Confusion Matrix&#xff09;2.5 F1-Score2.6 PR曲线&#xff08;Precisi…

基于rpcapd与wireshark的远程实时抓包的方法

基于rpcapd与wireshark的远程实时抓包的方法 服务端安装wireshark侧设置 嵌入式设备或服务器上没有图形界面&#xff0c;通常使用tcpdump抓包保存为pcap文件后&#xff0c;导出到本地使用wireshark打开分析&#xff0c;rpcapd可与wireshark配合提供一种远程实时抓包的方案&…

如何从 Hugging Face 数据集中随机采样数据并保存为新的 Arrow 文件

如何从 Hugging Face 数据集中随机采样数据并保存为新的 Arrow 文件 在使用 Hugging Face 的数据集进行模型训练时&#xff0c;有时我们并不需要整个数据集&#xff0c;尤其是当数据集非常大时。为了节省存储空间和提高训练效率&#xff0c;我们可以从数据集中随机采样一部分数…

深入解析 MySQL 启动方式:`systemctl` 与 `mysqld` 的对比与应用

目录 前言1. 使用 systemctl 启动 MySQL1.1 什么是 systemctl1.2 systemctl 启动 MySQL 的方法1.3 应用场景1.4 优缺点优点缺点 2. 使用 mysqld 命令直接启动 MySQL2.1 什么是 mysqld2.2 mysqld 启动 MySQL 的方法2.3 应用场景2.4 优缺点优点缺点 3. 对比分析结语 前言 MySQL …

会议直击|美格智能亮相2024紫光展锐全球合作伙伴大会,融合5G+AI共拓全球市场

11月26日&#xff0c;2024紫光展锐全球合作伙伴大会在上海举办&#xff0c;作为紫光展锐年度盛会&#xff0c;吸引来自全球的众多合作伙伴和行业专家、学者共同参与。美格智能与紫光展锐竭诚合作多年&#xff0c;共同面向5G、AI和卫星通信为代表的前沿科技&#xff0c;聚焦技术…

本地学习axios源码-如何在本地打印axios里面的信息

1. 下载axios到本地 git clone https://github.com/axios/axios.git 2. 下载react项目, 用vite按照提示命令配置一下vite react ts项目 npm create vite my-vue-app --template react 3. 下载koa, 搭建一个axios请求地址的服务端 a.初始化package.json mkdir koa-server…

7、递归

一、概念/理解 递归&#xff1a;某个函数直接或者间接的调用自身。--->函数调用 函数调用&#xff1a;创建副本 递归函数&#xff1a;直接或者间接调用自身的函数叫 递归函数: 边界条件/递归出口&#xff1a;递归调用的终止条件。避免出现死循环或者爆栈的情况。//报错显…

【python】图像、音频、视频等文件数据采集

【python】图像、音频、视频等文件数据采集 先安装所需要的工具一、Tesseract-OCRTesseract-OCR环境变量设置验证是否配置成功示例语言包下载失败 二、ffmpeg验证是否安装成功示例 先安装所需要的工具 一、Tesseract-OCR Tesseract是一个 由HP实验室开发 由Google维护的开源的…

【青牛科技】2K02 电动工具专用调速电路芯片描述

概述&#xff1a; 2K02 是电动工具专用调速电路。内置稳压电路&#xff0c;温度系数好&#xff0c;可以调节输出频率以及占空比的振荡输出&#xff0c;广泛的应用于小型电钻&#xff0c;割草机等工具。 主要特点&#xff1a; ● 电源电压范围宽 ● 占空比可调 ● 温度系数好 …

内网穿透步骤

步骤 第一次需要验证token window和linux的方法不同。 然后 启动 cpolar 服务&#xff1a; 在命令窗口中输入 cpolar.exe htttp 8080&#xff0c;启动内网穿透服务。确保命令窗口保持开启状态&#xff0c;以维持穿透效果。 cpolar.exe hhttp 8080 成功后 注意事项 命令窗口…

FreeRTOS之vTaskStartScheduler实现分析

FreeRTOS之vTaskStartScheduler实现分析 1 FreeRTOS源码下载地址2 函数接口2.1 函数接口2.2 函数参数简介3 vTaskDelete的调用关系3.1 调用关系3.2 调用关系示意图 4 函数源码分析4.1 vTaskStartScheduler4.2 prvCreateIdleTasks4.2.1 prvCreateIdleTasks4.2.2 xTaskCreate 4.3…

基于群晖搭建个人图书架-TaleBook based on Docker

前言 在群晖Container Manager中部署失败&#xff0c;转通过ssh部署。 一、准备工作 名称备注群晖SSH“终端机和SNMP”中启用SSH软件secureCRT等docker-compose.ymlGithub下载并修改 二、过程 2.1 创建本地文件夹 本地路径为&#xff1a; /docker/Calibre/data 2.2 下载d…

Ubuntu24.04初始化教程(包含基础优化、ros2)

将会不断更新。但是所有都是基础且必要的操作。 为重装系统之后的环境配置提供便捷信息来源。记录一些错误的解决方案。 目录 构建系统建立系统备份**Timeshift: 系统快照和备份工具****安装 Timeshift****使用 Timeshift 创建快照****还原快照****自动创建快照** 最基本配置换…

【论文笔记】A Token-level Contrastive Framework for Sign Language Translation

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: A Token-level Contrastiv…

yolov5 解决:export GIT_PYTHON_REFRESH=quiet

当我们在第一次运行YOLOv5中的train.py程序时&#xff1a;可能会出现以下报错&#xff1a; This initial warning can be silenced or aggravated in the future by setting the $GIT_PYTHON_REFRESH environment variable. Use one of the following values: - quiet|q|silen…

基于springboot中小型制造企业质量管理系统源码和论文

信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古以来的…

【实验13】使用预训练ResNet18进行CIFAR10分类

目录 1 数据处理 1.1 数据集介绍 1.2数据处理与划分 2 模型构建- Pytorch高层API中的Resnet18 3 模型训练 4 模型评价 5 比较“使用预训练模型”和“不使用预训练模型”的效果&#xff1a; 6 模型预测 7 完整代码 8 参考链接 1 数据处理 1.1 数据集介绍 数据规模&…