当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/2301_80133875/article/details/143360172 2025/1/6 16:16:33

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

有上下左右像素单独设置，也可以什么都不加就是都设置

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

也可以单独选设置

设置前

设置后

padding

效果如下

相关文章：

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

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;CSS引入 二&#xff1a;CSS对元素进行美化 1&#xff1a;style修饰 2&#xff1a;选…...

编程日记 2024/10/31 10:47:02

LuaJIT源码分析（五）词法分析

LuaJIT源码分析&#xff08;五&#xff09;词法分析 lua虽然是脚本语言&#xff0c;但在执行时&#xff0c;还是先将脚本编译成字节码&#xff0c;然后再由虚拟机解释执行。在编译脚本时&#xff0c;首先需要对源代码进行词法分析&#xff0c;把源代码分解为token流。lua的toke…...

编程日记 2024/10/31 10:43:58

005 匿名信

005 匿名信 题目描述 电视剧《分界线》里面有一个片段&#xff0c;男主为了向警察透露案件细节&#xff0c;且不暴露自己&#xff0c;于是将报刊上的字剪下来&#xff0c;剪拼成一封匿名信。现在有一名举报人&#xff0c;希望借鉴这种方式&#xff0c;使用英文报刊完成举报操…...

编程日记 2024/10/31 10:41:54

聊聊Web3D 发展趋势

随着 Web 技术的不断演进&#xff0c;Web3D 正逐渐成为各行业数字化的重要方向。Web3D 是指在网页中展示 3D 内容的技术集合。近年来&#xff0c;由于 WebGL、WebGPU 等技术的发展&#xff0c;3D 内容已经能够直接在浏览器中渲染&#xff0c;为用户提供更加沉浸、互动的体验。以…...

编程日记 2024/10/31 10:37:40

【数据结构与算法】LeetCode： 贪心算法

文章目录 LeetCode&#xff1a; 贪心算法买卖股票的最佳时机 &#xff08;Hot100&#xff09;买卖股票的最佳时机 II跳跃游戏 &#xff08;Hot100&#xff09;跳跃游戏 II&#xff08;Hot100&#xff09;划分字母区间 &#xff08;Hot100&#xff09;分发饼干K次取反后最大化的…...

编程日记 2024/10/31 10:35:36

Date 日期类的实现（c++）

本文用c实现日期类 将会实现以下函数 bool operator<(const Date& d);bool operator<(const Date& d);bool operator>(const Date& d);bool operator>(const Date& d);bool operator(const Date& d);bool operator!(const Date& d);Date&…...

编程日记 2024/10/31 10:34:32

智能家居10G雷达感应开关模块，飞睿智能uA级别低功耗、超高灵敏度，瞬间响应快

在当今科技飞速发展的时代&#xff0c;智能家居已经逐渐成为人们生活中不可或缺的一部分。从智能灯光控制到智能家电的联动&#xff0c;每一个细节都在为我们的生活带来便利和舒适。而在众多智能家居产品中&#xff0c;10G 雷达感应开关模块以其独特的优势&#xff0c;正逐渐成…...

编程日记 2024/10/31 10:33:25

头歌——人工智能（机器学习 --- 决策树2）

文章目录 第5关&#xff1a;基尼系数代码 第6关&#xff1a;预剪枝与后剪枝代码 第7关&#xff1a;鸢尾花识别代码 第5关&#xff1a;基尼系数 基尼系数 在ID3算法中我们使用了信息增益来选择特征&#xff0c;信息增益大的优先选择。在C4.5算法中&#xff0c;采用了信息增益率…...

编程日记 2024/10/31 10:30:19

一七一、React性能优化方式

在 React 中进行性能优化可以通过多种手段来减少渲染次数、优化渲染效率并减少内存消耗。以下是常见的性能优化方法及示例&#xff1a; 1. shouldComponentUpdate shouldComponentUpdate 是类组件中的生命周期方法&#xff0c;它可以让组件在判断是否需要重新渲染时&#xff…...

编程日记 2024/10/31 10:28:16

编写dockerfile生成镜像，并且构建容器运行

编写dockerfile生成镜像&#xff0c;并且构建容器运行 目录 编写dockerfile生成镜像&#xff0c;并且构建容器运行 概述 一、dockerfile文件详解 Dockerfile的基本结构 Dockerfile的常用指令 二、构建过程 概述 随着微服务应用越来越多&#xff0c;大家需要尽快掌握dock…...

编程日记 2024/10/31 10:27:15

Java项目练习——学生管理系统

1. 整体结构 代码实现了基本的学生管理系统功能&#xff0c;包括登录、注册、忘记密码、添加、删除、修改和查询学生信息。 使用了ArrayList来存储用户和学生信息。 使用了Scanner类来处理用户输入。 2. 主要功能模块 登录 (logIn)&#xff1a;验证用户名和密码&#xff0c;…...

编程日记 2024/10/31 10:24:11

sqlserver、达梦、mysql的差异

差异项sqlserver达梦mysql单行注释---- 1、-- &#xff0c;--后面带个空格 2、# 包裹对象名称&#xff0c;如表、表字段等 [tableName] "tableName"tableName表字段自增IDENTITY(1, 1)IDENTITY(1, 1)AUTO_INCREMENT二进制数据类型IMAGEIMAGE、BLOBBLOB 存储一个汉字需…...

编程日记 2024/10/31 10:21:07

Spring AOP（定义、使用场景、用法、3种事务、事务失效场景及解决办法、面试题）

目录 1. AOP定义&#xff1f; 2.常见的AOP使用场景&#xff1a; 3.Spring AOP用法 3.1 Spring AOP中的几个核心概念 3.1.1 切面、切点、通知、连接点 3.1.2 切点表达式AspectJ 3.2 使用 Spring AOP 的步骤总结 3.2.1 添加依赖: 3.2.2 定义切面和切点&#xff08;切点和…...

编程日记 2024/10/31 10:18:05

Flutter鸿蒙next 封装对话框详解

✅近期推荐&#xff1a;求职神器 https://bbs.csdn.net/topics/619384540 &#x1f525;欢迎大家订阅系列专栏&#xff1a;flutter_鸿蒙next &#x1f4ac;淼学派语录&#xff1a;只有不断的否认自己和肯定自己&#xff0c;才能走出弯曲不平的泥泞路&#xff0c;因为平坦的大路…...

编程日记 2024/10/31 10:12:58

【项目实战】通过LLaMaFactory+Qwen2-VL-2B微调一个多模态医疗大模型

前言 随着多模态大模型的发展&#xff0c;其不仅限于文字处理&#xff0c;更能够在图像、视频、音频方面进行识别与理解。医疗领域中&#xff0c;医生们往往需要对各种医学图像进行处理&#xff0c;以辅助诊断和治疗。如果将多模态大模型与图像诊断相结合&#xff0c;那么这会…...

编程日记 2024/10/31 10:10:56

SCSI驱动与 UFS 驱动交互概况

SCSI子系统概况 SCSI&#xff08;Small Computer System Interface&#xff09;子系统是 Linux 中的一个模块化框架&#xff0c;用于提供与存储设备的通用接口。通过 SCSI 子系统&#xff0c;可以支持不同类型的存储协议&#xff08;如 UFS、SATA、SAS&#xff09;&#xff0c…...

编程日记 2024/10/31 10:09:54

软件工程实践项目：人事管理系统

一、项目的需求说明 通过移动设备登录app提供简单、方便的操作。根据公司原来的考勤管理制度&#xff0c;为公司不同管理层次提供相应的权限功能。通过app上面的各种标准操作&#xff0c;考勤管理无纸化的实现&#xff0c;使公司的考勤管理更加科学规范&#xff0c;从而节省考…...

编程日记 2024/10/31 10:08:53

不使用三方软件，win系统下禁止单个应用联网能力的详细操作教程

本篇文章主要讲解&#xff0c;在win系统环境下&#xff0c;禁止某个应用联网能力的详细操作教程&#xff0c;通过本教程您可以快速掌握自定义对单个程序联网能力的限制和禁止。 作者&#xff1a;任聪聪 日期&#xff1a;2024年10月30日 步骤一、按下win按键&#xff08;四个小方…...

编程日记 2024/10/31 10:07:52

近似线性可分支持向量机的原理推导

近似线性可分的意思是训练集中大部分实例点是线性可分的&#xff0c;只是一些特殊实例点的存在使得这种数据集不适用于直接使用线性可分支持向量机进行处理&#xff0c;但也没有到完全线性不可分的程度。所以近似线性可分支持向量机问题的关键就在于这些少数的特殊点。 相较于…...

编程日记 2024/10/31 9:57:41

Golang开发环境

Golang开发环境搭建 Go 语言开发包 国外&#xff1a;https://golang.org/dl/ 国内(推荐)&#xff1a; https://golang.google.cn/dl/ 编辑器 Golang:https://www.jetbrains.com/go/ Visual Studio Code: https://code.visualstudio.com/ 搭建 Go 语言开发环境&#xff0c;需要…...

编程日记 2024/10/31 9:56:40

测试华为GaussDB(DWS)数仓，并通过APISQL快速将（表、视图、存储过程）发布为API

华为数据仓库服务 数据仓库服务&#xff08;Data Warehouse Service&#xff0c;简称DWS&#xff09;是一种基于公有云基础架构和平台的在线数据处理数据库&#xff0c;提供即开即用、可扩展且完全托管的分析型数据库服务。DWS是基于华为融合数据仓库GaussDB产品的云原生服务&a…...

编程日记 2024/10/31 9:52:36

使用GetX实现GetPage中间件

前言 GetX 中间件&#xff08;Middleware&#xff09;是 GetX 框架中的一种机制&#xff0c;用于在页面导航时对用户进行权限控制、数据预加载、页面访问条件设置等。通过使用中间件&#xff0c;可以有效地控制用户的访问流程&#xff0c;并在适当条件下引导用户到所需页面。 这…...

编程日记 2024/10/31 9:50:34

Navicat 17 功能简介 | SQL 预览

Navicat 17 功能简介 | SQL 预览 随着 17 版本的发布&#xff0c;Navicat 也带来了众多的新特性&#xff0c;包括兼容更多数据库、全新的模型设计、可视化智能 BI、智能数据分析、可视化查询解释、高质量数据字典、增强用户体验、扩展MongoDB 功能、轻松固定查询结果、便捷URI …...

编程日记 2024/10/31 9:49:33

ubuntu、Debian离线部署gitlab

一、软件包下载 gitlab安装包下载链接 ubuntu&#xff1a; ubuntu/focal 适用于 ubuntu20系列 ubuntu/bionic 适用于 ubuntu18 系列 Debian&#xff1a; debian/buster 适用于 Debian10系列 debian/bullseye 适用于 Debian11、12系列 二、安装gitlab ubuntu需要安装一些环境…...

编程日记 2024/10/31 9:46:28

数据库编程 SQLITE3 Linux环境

永久存储程序数据有两种方式&#xff1a; 用文件存储用数据库存储 对于多条记录的存储而言&#xff0c;采用文件时&#xff0c;插入、删除、查找的效率都会很差&#xff0c;为了提高这些操作的效率&#xff0c;有计算机科学家设计出了数据库存储方式 一、数据库 数据库的基本…...

编程日记 2024/10/31 9:45:27

独孤思维：总有一双眼睛默默观察你做副业

01 独孤昨天在陪伴群&#xff0c;分享了近期小白做副业的一些困扰。 并且以自己经历作为案例&#xff0c;分享了一些经验和方法。 最后顺势推出xx博主的关于365条赚钱信息小报童专栏。 订阅后&#xff0c;可以开拓副业赚钱思路&#xff0c;避免走一些弯路。 甚至于&#x…...

编程日记 2024/10/31 9:44:26

医院信息化与智能化系统(10)

医院信息化与智能化系统(10) 这里只描述对应过程&#xff0c;和可能遇到的问题及解决办法以及对应的参考链接&#xff0c;并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图&#xff0c;可以试试PlantUML&#xff0c;告诉GPT你的文件结构&#xff0c;让他给你对应…...

编程日记 2024/10/31 9:43:25

基于YOLO11/v10/v8/v5深度学习的危险驾驶行为检测识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

编程日记 2024/10/31 9:42:22

Flink CDC系列之：学习理解核心概念——Transform

Flink CDC系列之&#xff1a;学习理解核心概念——Transform Transform参数元数据字段函数比较函数逻辑函数字符串函数时间函数条件函数 示例添加计算列参考元数据列使用通配符投影所有字段添加过滤规则重新分配主键重新分配分区键指定表创建配置分类映射用户定义函数已知限制 …...

编程日记 2024/10/31 9:41:13

MyBatis-Plus：简化 CRUD 操作的艺术

一、关于MyBatis-Plus 1.1 简介 MyBatis-Plus 是一个基于 MyBatis 的增强工具&#xff0c;它旨在简化 MyBatis 的使用&#xff0c;提高开发效率。 ​ ‍ ‍ ‍ ​ ‍ 关于Mybatis 简介 MyBatis 是一款流行的 Java 持久层框架&#xff0c;旨在简化 Java 应用程序与数…...

编程日记 2024/10/31 9:38:09

建设单位招聘用那个网站/网络服务商主要包括哪些

一、创建信用段 二、定义客户信贷组 三、为记分和信贷限额计算创建规则 四、创建风险类 五、定义检查规则 六、指定信用控制区域及信用部分 七、将销售范围分配到信用控制范围 八、定义信贷组 九、设置销售凭证类型的信用额度检查 十、设置交货类型的信用额度检查 十一、定义信…...

编程日记 2025/1/6 14:41:53

会员小程序怎么做/广州seo怎么做

目录 一、环境准备 二、真机测试 一、环境准备 1.脚本语言&#xff1a;Python3.x IDE&#xff1a;安装Pycharm 2.安装Java JDK 、Android SDK 3.adb环境&#xff0c;path添加E:\Software\Android_SDK\platform-tools 4.安装Appium for windows&#xff0c; 点击下载按钮…...

编程日记 2025/1/6 14:37:45

北京做网站建设公司排名/百度关键词代做排名

第一次给了cnblog了 哈&#xff0c;感谢cnblogs 这个blog将记录我的工作历程&#xff0c;学习历程&#xff0c;边工作&#xff0c;边学习 希望能起到监督我的作用。转载于:https://www.cnblogs.com/Peiwen-on-the-way/archive/2012/11/06/2757641.html...

编程日记 2025/1/6 9:31:42

定制型网站制作明细报价表/seo是什么东西

No module named MYSQLdb 问题解决 问题描述&#xff1a; 在Linux中写Python查询MySQL数据库时报错&#xff1a;ImportError: No module named MySQLdb 对于不同的系统和程序有如下的解决方法&#xff1a; easy_install mysql-python (mix os) pip install mysql-python (m…...

编程日记 2025/1/6 9:22:33

网站建设可行性的分析/品牌营销策划十大要点

作者&#xff1a;maxspeedwind 于 2010-4-13 14:13 根据不同的程序窗口设置输入法&#xff0c;如键盘默认布局为英语&#xff08;美国&#xff09;&#xff0c;运行脚本后&#xff0c;当开启Maxthon2&#xff0c;记事本&#xff0c;word&#xff0c;excel时&#xff0c;会设置…...

编程日记 2025/1/6 9:05:11

网站备案审核通过后/百度推广怎么使用教程

多态性来自于希腊语&#xff0c;意思是“有许多形态”。在面向对象的软件技术中&#xff0c;多态性是指子类对象可以像父类对象那样使用&#xff0c;同样的消息既可以发送给父类对象也可以发送给子类对象。也就是说&#xff0c;在类等级的不同层次中可以共享&#xff08;公用&a…...

编程日记 2025/1/6 5:35:33