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.mzph.cn/diannao/62731.shtml

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

相关文章

macos下brew安装redis

首先确保已安装brew&#xff0c;接下来搜索资源&#xff0c;在终端输入如下命令&#xff1a; brew search redis 演示如下&#xff1a; 如上看到有redis资源&#xff0c;下面进行安装&#xff0c;执行下面的命令&#xff1a; brew install redis 演示效果如下&#xff1a; …

element ui select绑定的值是对象的属性时,显示异常.

需要声明 value-key"value",如果还不行可能是数据类型不一致数字0和字符串0是不一致的. el-select v-model"value" clearable placeholder"Select" value-key"value" style"width: 240px"><!-- <el-option v-for&…

黑马程序员Java笔记整理(day06)

1.继承的特点 2.继承的权限 3. 4.小结 5.方法重写 6.子类构造器 7.兄弟构造器 8.多态 9.小结

VPC9527同步整流控制器,相对最大电压检测与强力自供电,与MP6908完全PIN TO PIN

VPC9527 是一款高性能的同步整流控制器,它兼容 CCM 和 DCM 两种模式,最大工作频率高达 700kHz;可 通过 SEL 引脚的逻辑电压来选择 400nS 或 800nS 两个关断检测的屏蔽时间;可通过 VLC 引脚来调整限压导通的 参数,以便与所选同步整流管的参数相匹配,获得适应的最优性能;它…

万字长文解读深度学习——多模态模型BLIP2

&#x1f33a;历史文章列表&#x1f33a; 深度学习——优化算法、激活函数、归一化、正则化 深度学习——权重初始化、评估指标、梯度消失和梯度爆炸 深度学习——前向传播与反向传播、神经网络&#xff08;前馈神经网络与反馈神经网络&#xff09;、常见算法概要汇总 万字长…

【Android】ARouter——强大的路由框架

引言 在我们使用组件化的时候&#xff0c;活动并不在一个模块当中&#xff0c;但是毕竟是一个程序我们需要在不同的模块之间进行跳转&#xff0c;我们会首先想到在需要进行通信的模块下都添加相应的依赖就可以解决这个问题&#xff0c;但这样无疑增加了各个组件之间的耦合性。…

Apache Doris 现行版本 Docker-Compose 运行教程

特别注意&#xff01;Doris On Docker 部署方式仅限于开发环境或者功能测试环境&#xff0c;不建议生产环境部署&#xff01; 如有生产环境或性能测试集群部署诉求&#xff0c;请使用裸机/虚机部署或K8S Operator部署方案&#xff01; 原文阅读&#xff1a;Apache Doris 现行版…

springboot363高校竞赛管理系统(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;高校竞赛管理系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解…

RAG数据拆分之PDF

引言RAG数据简介PDF解析方法及工具代码实现总结 二、正文内容 引言 本文将介绍如何将RAG数据拆分至PDF格式&#xff0c;并探讨PDF解析的方法和工具&#xff0c;最后提供代码示例。 RAG数据简介 RAG&#xff08;关系型属性图&#xff09;是一种用于表示实体及其关系的图数据…

labelimg每次标注的时候自动导入预设标签

背景说明 最近在做一个视频行为识别项目的时候&#xff0c;已经采集了视频样例片段&#xff0c;需要对视频的行为动作进行图片标注&#xff0c;自己很快完成了视频到图片的分割&#xff0c;在进行图片标注的时候&#xff0c;选用的标注工具是labelimg,由于视频转成图片后数量很…

Java对接AI大模型

随着AI大模型技术的升起,人们越来越感觉到生活上的便捷以及人机对话照进现实.什么是大模型呢? 大模型&#xff08;Large Model&#xff09;&#xff0c;通常是指参数量非常庞大的深度学习模型&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;、计算机视觉&#…

Java开发网络安全常见问题

1、敏感信息明文传输 用户敏感信息如手机号、银行卡号、验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输。 如下图中小红书APP 的手机短信验证码登录接口&#xff0c;此处没有对用户手机号和验证码等信息进行加密传输&#xff0c;可以很简单的截取并开展一些合法的…

【CSS in Depth 2 精译_063】10.2 深入理解 CSS 容器查询中的容器

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 ✔️ 10.2.1 容器的类型 ✔️10.2.2 容器的名称 ✔️10.2.3 容器与模块化 CSS ✔️ 10.3…

基于Springboot开发的时光兼职网

一、功能介绍 时光兼职网包含管理员、用户、商家三个角色以及前后台系统。 前台系统功能 首页、兼职信息推荐、查看更多等 职位申请、申请日期、上传简历、点击下载简历、留言反馈等 个人中心、上传图片、更新信息等 后台系统功能 用户登录&#xff1a; 个人中心、修改密码…

计算机的错误计算(一百七十一)

摘要 探讨 MATLAB 中秦九韶&#xff08;Horner&#xff09;多项式的错误计算。 例1. 用秦九韶&#xff08;Horner&#xff09;算法计算&#xff08;一百零七&#xff09;例1中多项式 直接贴图吧&#xff1a; 这样&#xff0c;MATLAB 给出的仍然是错误结果&#xff0c;因为准…

代码美学3:RGB转化+MATLAB制作渐变色

RGB颜色转化器&#xff08;转换成matlab可以读取的形式&#xff09; n input(请输入 n&#xff1a;); color_matrix cell(1, n); for i 1:nR input(请输入 R 值&#xff1a;);G input(请输入 G 值&#xff1a;);B input(请输入 B 值&#xff1a;);color_matrix{i} [R/2…

kafka数据在服务端时怎么写入的

学习背景 接着上篇&#xff0c;我们来聊聊kafka数据在服务端怎么写入的 服务端写入 在介绍服务端的写流程之前&#xff0c;我们先要理解服务端的几个角色之间的关系。 假设我们有一个由3个broker组成的kafka集群&#xff0c;我们在这个集群上创建一个topic叫做shitu-topic&…

rabbitmq原理及命令

目录 一、RabbitMQ原理1、交换机&#xff08;Exchange&#xff09;fanoutdirecttopicheaders&#xff08;很少用到&#xff09; 2、队列Queue3、Virtual Hosts4、基础对象 二、RabbitMQ的一些基本操作:1、用户管理2、用户角色3、vhost4、开启web管理接口5、批量删除队列 一、Ra…

Kali Linux怎么开python虚拟环境

相信很多朋友再学习的过程中都会遇到一些pip失效&#xff0c;或者报错的时候&#xff0c;他们要求我们要使用虚拟环境&#xff0c;但是不知道怎么搭建&#xff0c;下面这篇文章就来告诉你如何搭建虚拟环境&#xff0c;这个方法在所有Linux的服务器都通用&#xff0c;就两行命令…

【博主推荐】C# Winform 拼图小游戏源码详解(附源码)

文章目录 前言摘要1.设计来源拼图小游戏讲解1.1 拼图主界面设计1.2 一般难度拼图效果1.3 普通难度拼图效果1.4 困难难度拼图效果1.5 地域难度拼图效果1.6 内置五种拼图效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载结束语 前言 在数字浪潮汹涌澎湃的时代&#xff0c;程序开…