【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.rhkb.cn/news/464383.html

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

相关文章

RV1126-SDK学习之OSD实现原理

RV1126-SDK学习之OSD实现原理 前言 本文简单记录一下我在学习RV1126的SDK当中OSD绘制的原理的过程。 在学习OSD的过程当中&#xff0c;可能需要补充的基础知识&#xff1a; OSD是什么&#xff1f; BMP图像文件格式大致组成&#xff1f; 图像调色&#xff08;Palette&#…

Vehicle OS软件平台解决方案

在智能汽车快速迭代的趋势之下&#xff0c;广义操作系统Vehicle OS应运而生&#xff0c;针对应用软件开发周期缩短和底层硬件迭代速度加快的背景&#xff0c;Vehicle OS将应用软件开发和底层硬件迭代解耦。它降低了迭代工作量并节约成本&#xff0c;用标准化的接口来助力软件定…

Chromium Mojo(IPC)进程通信演示 c++(1)

网上搜索关于mojo教程 多数都是理论 加上翻译谷歌mojo文档的&#xff0c;但是如何自定义两个进程使用mojo通信呢&#xff1f;看下面的完整例子介绍&#xff1a;&#xff08;本人也是参考谷歌代码例子改编而成&#xff09; 本文演示了client.exe和service.exe 通过mojo::Incomin…

sparkSQL面试题

一、查询所有数学课程成绩大于语文课程成绩的学生学号 数据 1,yuwen,43 1,shuxue,55 2,yuwen,77 2,shuxue,88 3,yuwen,98 3,shuxue,65 3,yingyu,88 基本步骤&#xff1a; 进行行转列比较语文与数学的成绩 SQL代码&#xff1a; with t1 as(SELECT id,sum(if(name yuwen,sc…

算法|牛客网华为机试21-30C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试10-20C 文章目录 HJ21 简单密码HJ22 汽水瓶HJ23 删除字符串中出现次数最少的字符HJ24 合唱队HJ25 数据分类处理HJ26 字符串排序HJ27 查找兄弟单词HJ28 素数伴侣HJ29 字符串加解密HJ30 字符串合并处理 HJ21 简单密码 题目描…

浅谈QT中Tab键的切换逻辑

浅谈QT中Tab键的切换逻辑 无意中发现在输入界面中按下Tab键时&#xff0c;没有按照预想的顺序切换焦点事件&#xff0c;如下图所示 这个现象还是很有趣&#xff0c;仔细观察了下&#xff0c;默认的切换顺序是按照控件拖入顺序&#xff0c;那么知道了这个问题想要解决起来就很简…

科研绘图系列:R语言组合连线图和箱线图(linechart+boxplot)

文章目录 介绍加载R包数据数据预处理画图1画图2系统信息介绍 连线图(Line Chart)是一种常用的数据可视化图表,它通过将一系列数据点用直线段连接起来来展示数据随时间或有序类别变化的趋势。以下是连线图可以表示的一些内容: 时间序列数据:展示数据随时间变化的趋势,例如…

PKG_CHECK_MODULES(FUSE,fuse)

运行 ./configure 命令报错如下&#xff1a; ./configure: line 13934: syntax error near unexpected token FUSE,fuse ./configure: line 13934: PKG_CHECK_MODULES(FUSE,fuse)解决方案&#xff1a; 命令窗口运行如下命令&#xff0c;安装 pkg-config&#xff1a; sudo …

react18中redux-promise搭配redux-thunk完美简化异步数据操作

用过redux-thunk的应该知道&#xff0c;操作相对繁琐一点&#xff0c;dispatch本只可以出发plain object。redux-thunk让dispatch可以返回一个函数。而redux-promise在此基础上大大简化了操作。 实现效果 关键逻辑代码 store/index.js import { createStore, applyMiddlewar…

Lucene分析器的详细使用(5)

文章目录 第5章 分析器5.1 分析器的组成5.1.1 字符过滤器1&#xff09;HTMLStripCharFilter2&#xff09;PatternReplaceCharFilter3&#xff09;MappingCharFilter4&#xff09;Luke使用字符过滤器 5.1.2 分词器1&#xff09;StandardTokenzier2&#xff09;keywordTokenizer3…

selinux和防火墙

SElinux 1、selinux代表的什么&#xff1f; SELinux是Security-Enhanced Linux的缩写&#xff0c;意思是安全强化的linux。 SELinux 主要由美国国家安全局&#xff08;NSA&#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 SELinux是对程序、文件等权限设置依…

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…

Oracle OCP认证考试考点详解082系列11

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 51. 第51题&#xff1a; 题目 51.View the Exhibit and examine the description of the tables You execute this SQL statement Whi…

C#属性 Property

属性Property不是变量。 它们是由名为访问器方法来实现的一种方法。 实例属性表示的是实例的某个数据&#xff0c;通过这个数据反映实例当前的状态 静态属性表示的是类型的某个数据&#xff0c;通过这个数据反映类型当前的状态 意义&#xff1a; 防止恶意赋值(通过属性间接访问…

Spring框架的事务管理

目录 一、spring框架事务管理相关的类 1.PlatformTransactionManager接口 2.TransactionDefinition接口 二、spring框架声明式事务管理 1.配置文件的方式 &#xff08;1&#xff09;配置文件 &#xff08;2&#xff09;业务层 &#xff08;3&#xff09;持久层 &#…

angular实现list列表和翻页效果

说明&#xff1a;angular实现list列表和翻页效果 上一页 当前页面 下一页 效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\car\car.component.css .example-form-fields {display: flex;align-items: flex-start; }mat-list-item{background: antiquew…

PHP常量

PHP 中的常量是指一旦定义后将不能被改变的标识符。 常量可以用const和define&#xff08;&#xff09;来定义。 PHP常量的特性 不变性: 常量一旦定义&#xff0c;其值不能改变。全局作用域: 常量在定义后&#xff0c;可以在整个脚本的任何地方使用&#xff0c;无需使用 glo…

服务器作业(2)

架设一台NFS服务器&#xff0c;并按照以下要求配置 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 配置文件设置&#xff1a; [rootlocalhost ~]# vim /etc/exports 1、开放/nfs/shared目录&#xff0c;供所有用户查询资料 共享…

云轴科技ZStack在CID大会上分享VF网卡热迁移技术

近日&#xff0c;2024中国云计算基础架构开发者大会&#xff08;以下简称CID大会&#xff09;在北京举行。此次大会集中展示了云计算基础架构技术领域最前沿的科创成果&#xff0c;汇聚众多的技术专家和行业先锋&#xff0c;共同探讨云计算基础设施的最新发展和未来趋势。云轴科…

【Linux】命令行参数 | 环境变量

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 前几天在搞硬件&…