【CSS】——基础入门常见操作

8e19eee2be5648b78d93fbff2488137b.png

阿华代码,不是逆风,就是我疯

你们的点赞收藏是我前进最大的动力!!

希望本文内容能够帮助到你!!

目录

一:CSS引入

二:CSS对元素进行美化

1:style修饰

2:选择器

(1)标签选择器

(2)类选择器

效果①

效果②

(3)ID选择器

总结

(4)复合选择器

3:font-size

4:boder、width、height

5:margin、padding内外边距


一:CSS引入

CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和

结构分离.

CSS 可以理解为"东⽅四⼤邪术" 之化妆术.

对⻚⾯的展⽰进⾏"化妆"

二:CSS对元素进行美化

1:style修饰

对所有span标签都设置为了红色,这显然是不合适的

我们对span标签进行分类

2:选择器

(1)标签选择器

解释:对<span>的标签进行修饰

效果:

(2)类选择器

在center前加“.”     

解释:选择class为center的元素

效果①

效果②

(3)ID选择器

总结

(4)复合选择器

由多个单选择器组成

ul标签:unlist无序列表

ol标签:orderlist有序列表

①场景:不修改li,给ol标签中的li加修饰  

ol li

②效果

③变式:类选择器 + 标签选择器

.order li

④就近原则

你要改成红色,但我偏要用蓝 色

按照代码从上往下的顺序,谁离得近,就是什么颜色

效果

⑤样式

通常将样式放在header里面,保证页面加载时先出样式

1>行内样式

适合新手小白

2>内部样式

 

3>外部样式

herf外部链接,用ctrl+鼠标左击点进去。特点:非常简洁,适合企业开发

3:font-size

设置字体大小(chrome浏览器默认字体大小为16像素)

效果

4:boder、width、height

边框,边界 ;px是像素(可以理解为字体大小,数字越大像素越大,字体越大)

复合样式:由多个样式组成,没有先后顺序

①效果

②width

③height

重点:width、height只对块级元素生效,对行内元素不生效——例如对div标签生效,对span标签不生效(可以理解成div是一个箱子,span是一个袋子)

块级元素:h1~6、p、div

行内元素:span、a、

5:margin、padding内外边距

重点内外都是相对的,看是相对于谁!!

 

margin

有上下左右像素单独设置,也可以什么都不加就是都设置,也可以是两个参数(第一个表示上下,第二个表示左右)——margin(0,auto)居中的意思

遵循上右下左的顺序设置为不同值(也可以记为顺时针)

也可以单独选设置

设置前

设置后

padding

效果如下

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

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

相关文章

Chrome(谷歌浏览器中文版)下载安装(Windows 11)

目录 Chrome_10_30工具下载安装 Chrome_10_30 工具 系统&#xff1a;Windows 11 下载 官网&#xff1a;https://chrome.google-zh.com/&#xff0c;点击立即下载 下载完成&#xff08;已经下过一遍所以点了取消&#xff09; 安装 解压&#xff0c;打开安装包 点击下一步…

js中怎么把excel和pdf文件转换成图片打包下载

index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>文件转图片工具</title><!-- 本…

【Java】异常处理见解,了解,进阶到熟练掌握

各位看官早安午安晚安呀 如果您觉得这篇文章对您有帮助的话 欢迎您一键三连&#xff0c;小编尽全力做到更好 欢迎您分享给更多人哦 大家好我们今天来学习Java面向对象的的抽象类和接口&#xff0c;我们大家庭已经来啦~ 目录 1.(throws和throw&#xff09;我们不管这个异常&…

使用Django REST framework构建RESTful API

使用Django REST framework构建RESTful API Django REST framework简介 安装Django REST framework 创建Django项目 创建Django应用 配置Django项目 创建模型 迁移数据库 创建序列化器 创建视图 配置URL 配置全局URL 配置认证和权限 测试API 使用Postman测试API 分页 过滤和排序…

022集——统计多条线的总长度(CAD—C#二次开发入门)

如下图所示&#xff0c;选择多条线并统计长度&#xff1a; c#中不包含直接获取curve曲线长度 属性&#xff0c;需用如下方法&#xff1a;curve.GetDistanceAtParameter(item.EndParam) 附部分代码如下&#xff1a; using Autodesk.AutoCAD.ApplicationServices; using Autode…

W5100S-EVB-Pico2评估板介绍

目录 1 简介 2 硬件资源 2.1 硬件规格 2.2 引脚定义 2.3 工作条件 3 参考资料 3.1 RP2350数据手册 3.2 W5100S数据手册 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.4 尺寸图&#xff08;单位&#xff1a;mm&#xff09; 3.5 参考例程 认证 CE FCC …

【Python】自然语言处理神器:NLTK库初探与文本处理案例

自然语言处理神器&#xff1a;NLTK库初探与文本处理案例 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Python 的 NLTK&#xff08;Natural Language Toolkit&#xff0c;自然语言工具包&#xff09;被广泛认为是入门级和应用级的强大工具之一。无论是处理文本、…

STM32F103C8T6学习笔记4--模拟旋转编码器的按键中断

1、实验内容 通过旋转编码器正反转来计数&#xff0c;由对应的GPIO产生中断。但是我在Proteus里面没有找到相关的EC11旋转编码器元件&#xff0c;暂时通过电路模拟的方式实现。 S1按下引脚PB0产生低电平信号&#xff0c;触发中断&#xff0c;计数值减一。 S2按下引脚PB1产生低…

宝顶白芽,慢生活的味觉盛宴

在快节奏的生活中&#xff0c;人们愈发向往那种悠然自得、返璞归真的生活方式。白茶&#xff0c;以其独特的韵味和清雅的风格&#xff0c;成为了现代人追求心灵宁静与生活品质的象征。而在众多白茶之中&#xff0c;竹叶青茶业出品的宝顶白芽以其甘甜醇爽的特质&#xff0c;成为…

23.智能停车计费系统(基于springboot和vue的Java项目)

目录 1.系统的受众说明 2 相关概念和技术介绍 2.1 JAVA技术介绍 2.2 SpringBoot框架 2.3B/S架构 2.4 MySQL数据库 3 系统需求分析 3.1 问题定义 3.2 可行性分析 3.3系统用例分析 3.4 系统流程分析 3.4.1 登录流程 3.4.2 添加信息流程 3.4.3 删除信息流程 4…

Chrome 130 版本开发者工具(DevTools)更新内容

Chrome 130 版本开发者工具&#xff08;DevTools&#xff09;更新内容 一、网络&#xff08;Network&#xff09;面板更新 1. 重新定义网络过滤器 网络面板获新增了一些过滤条件&#xff0c;这些过滤条件是根据反馈重新设计的&#xff0c;特定于类型的过滤条件保持不变&…

清华双臂机器人扩散大模型RDT:先预训练后微调,支持语言、图像、动作多种输入(1B参数)

前言 通过上文介绍的GR2&#xff0c;我们看到了视频生成模型在机器人训练中的应用 无独有偶&#xff0c;和GR2差不多一个时期出来的清华RDT&#xff0c;其模型架构便基于视频生成架构DiT改造而成(当然&#xff0c;该清华团队其实也在DiT之前推出了U-ViT&#xff0c;具体下文会…

万彪离职,荣耀CEO赵明豪赌AI手机胜算几何?

"荣耀新的远方在哪里&#xff1f;" 作者 | 米 卢 编辑 | 卢旭成 10月30日晚&#xff0c;荣耀在深圳国际会展中心发布了AI旗舰手机mogic7系列&#xff0c;这意味着终于能真正独立操盘荣耀的CEO赵明&#xff0c;开始压上全部身家&#xff0c;豪赌AI手机。 赵明说&…

SpringBoot在线教育系统:集成第三方服务

5系统详细实现 5.1 普通管理员管理 管理员可以对普通管理员账号信息进行添加修改删除操作。具体界面的展示如图5.1所示。 图5.1 普通管理员管理界面 5.2 课程管理员管理 管理员可以对课程管理员进行添加修改删除操作。具体界面如图5.2所示。 图5.2 课程管理员管理界面 5.3 …

六、Go语言快速入门之数组和切片

文章目录 数组和切片数组:one: 数组初始化:two: 数组的遍历:three: 多维数组:four: 将数组传递给函数 切片(Slice):one: 切片的初始化:star: new和make区别 :two: 切片的使用:three: 将切片传递给函数:four: 多维切片:four: Bytes包:four: 切片和垃圾回收 &#x1f4c5; 2024年…

HFSS 3D Layout中Design setting各个选项的解释

从HFSS 3D LAYOUT菜单中&#xff0c;选择Design Settings打开窗口&#xff0c;会有六个选项&#xff1a;DC Extrapolation, Nexxim Options, Export S Parameters, Lossy Dielectrics, HFSS Meshing Method, and HFSS Adaptive Mesh. DC Extrapolation 直流外推 直流外推分为标…

大模型备案安全评估报告编写说明

一、语料安全评估 (一)评估内容 1.文本训练语料规模 训练语料存储规模&#xff0c;按文本格式存储时的语料大小。 训练语料数量&#xff0c;按词元(Token)计数。 2.各类型语料规模 训练语料中的中文文本、英文文本、代码、图片、音频、视频及其他语料的规模。 3.训练语料…

ElementUI<el-table></el-table>表格中固定列横向滚动条无法拖动解决

当表格有固定列会出现横向滚动条无法拖动问题&#xff0c;尤其是固定列固定在左边且表格没数据的时候。这可能是因为固定区域盖住了横向滚动条&#xff0c;不是视觉上的覆盖&#xff0c;是去拖动时没有触发效果。 解决方法如下&#xff1a; 1.修改层级 使用z-index&#xff0…

ctfshow web系列

声明: 本文章只适用于网络安全交流与学习,请读者遵循网络安全法,若读者从事一些与网络安全不相关的事情&#xff0c;结果均与本人无关&#xff01;&#xff01;&#xff01; 是ctfshow的web题:https://www.ctf.show/ web3: 开局提示使用php include get url include()函数是…

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子&#xff1a;对于模型文件&#xff0c;动辄就是好几个G&#xff0c;而有的仓库更是高达几十G&#xff0c;拉一个仓库到本地&#xff0c;稍不注意直接磁盘拉满都有可能。 比如&#xff1a;meta-llama-3.1-8b-instruct&#xff0c;拉到本地后发现居然占用了60G…