【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;我们不管这个异常&…

【MySQL】——数据库恢复技术

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

使用Django REST framework构建RESTful API

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

Straightforward Layer-wise Pruning for More Efficient Visual Adaptation

对于模型中冗余的参数&#xff0c;一个常见的方法是通过结构化剪枝方法减少参数容量。例如&#xff0c;基于幅度值和基于梯度的剪枝方法。尽管这些方法在传统训练上通用性&#xff0c;本文关注的PETL迁移有两个不可避免的问题&#xff1a; 显著增加了模型存储负担。由于不同的…

微服务架构面试内容整理-服务拆分的原则

服务拆分是微服务架构设计的关键步骤,以下是一些常见的拆分原则: 1. 单一职责原则 每个微服务应只负责一项特定的业务功能或领域,确保服务的简单性和易于理解。 2. 业务能力驱动 根据业务能力或功能进行拆分,确保每个服务能够独立实现特定的业务价值。<

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;被广泛认为是入门级和应用级的强大工具之一。无论是处理文本、…

从放弃985计科保研到秋招进大厂,我是怎么做的?【秋招经验分享】

从放弃985计科保研到秋招进大厂&#xff0c;我是怎么做的 先来介绍一下我自己&#xff0c;bg为985计算机本科&#xff0c;我在放弃了计科保研以后&#xff0c;成功拿到了美团等大厂研发岗的offer。目前秋招已经接近尾声了&#xff0c;我想记录一下这段时间的秋招感悟和经验&…

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…

C语言学习,标准库<locale.h>

<locale.h> 是 C 标准库中的一个头文件&#xff0c; 提供了本地化&#xff08;Localization&#xff09;和国际化&#xff08;Internationalization&#xff09;的支持。它提供了一组函数和宏来设置或查询程序的本地化信息&#xff0c;例如日期、时间、货币、数字格式等。…

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;具体下文会…

leetcode动态规划(二十六)-最长重复子数组

题目 718.最长重复子数组 给两个整数数组 nums1 和 nums2 &#xff0c;返回 两个数组中 公共的 、长度最长的子数组的长度 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,3,2,1], nums2 [3,2,1,4,7] 输出&#xff1a;3 解释&#xff1a;长度最长的公共子数组是 [3,2,…

万彪离职,荣耀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 …