常见的CSS属性(一)——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值

一、字体

二、文本

三、边框

四、外边距

五、内边距

六、背景

七、行高

八、圆角

九、透明度

九、颜色值


        元素的继承性是指给父元素设置了某些属性,子元素或后代元素也会有作用。

一、字体

        “font-*”是字体相关的属性,具有继承性。代码如下:

.box-1 {/* 设置字体大小 */font-size: 20px;/* 设置字体样式(normal/italic/...) */font-style: italic;/* 设置字体粗细(lighter/bold/100/200/...) */font-weight: bold;/* 设置字体(宋体/微软雅黑/...) */font-family: 宋体;
}

二、文本

        text-* 是文本相关的属性,具有继承性,代码如下:

.box-2 {/* 修饰文本线:line-through 、underline 、 overline*/text-decoration: line-through;/* 设置文本水平对齐方式 left、 center 、right  */text-align: center;/* 字体颜色 (具有继承性)*/color: deeppink;
}

三、边框

        border-*属性是与边框相关的属性,边框可以撑开盒子大小。 一个标签有四个边,每个边可以有大小、样式、颜色组成。这些属性分别是border-width、border-style: solid (实线 、虚线、点线)、border-color等。还可以设置每一个边框的样式,如border-top/border-bottom等。

.box-3 {/* border-width: 10px; *//* border-style: solid; *//* border-color: green; *//* border: 10px solid green; *//* 上边框 */border-top: 30px solid purple;/* 右边框 */border-right: 30px solid orange;/* 下边框 */border-bottom: 30px solid blue;/* 左边框 */border-left: 30px solid green;
}

        也可以直接写为一行,设置边框粗细、线条和颜色,一般情况下常用的就是这些属性。

border: 1px solid #ccc;

四、外边距

        margin-*是外边距属性,外边距是指元素作用于浏览器或其他元素之间的间距,不会撑开盒子大小。 

        margin:值1,值2,值3,值4;对应的四个值分别为上、右、下、左方向,也可以直接设置“margin-right”、“margin-top”、“margin-bottom”、“margin-left”的值,其中——

        margin-left 正数往右边移动,负数往左边移动,margin-right反之

        margin-top 正数往下边移动,负数往上边移动,margin-bottom反之

.box-1 {/* margin-top: 50px; *//* margin-right: 100px; *//* margin-bottom: 100px; *//* margin-left: 50px; *//*上  右    下    左 */margin: 50px 100px 100px 50px;
}

五、内边距

        padding-*是内边距属性,内边距是指边框与内容之间的间距,可以撑开盒子大小,与外边距类似,有上右下左四个方向,分别写作padding-top、padding-right、padding-bottom和padding-left,也可以直接写为一行,padding:值1,值2,值3,值4,分别表示上右下左四个方向。

        padding-left 正数往右边移动,负数往左边移动,padding-right反之

        padding-top 正数往下边移动,负数往上边移动,padding-bottom反之

.box-5 {border: 5px solid #000;/* padding-left: 50px;padding-top: 80px;padding-right: 40px;padding-bottom: 30px; *//* 上  右   下   左 */padding: 80px 40px 30px 50px;
}

        遇到多行文本垂直居中,可以通过内边距居中。代码如下:

<style>.demo {background-color: blue;font-size: 40px;/* 遇到多行文本垂直居中,可以通过内边距居中 */padding-top: 80px;padding-bottom: 80px;}
</style>
<div class="demo">xfgj  hello world <br>xfgj  hello world <br>xfgj  hello world <br>xfgj  hello world 
</div>

六、背景

        background-*是背景系列属性,这一系列的属性不具有继承性,代码如下:

.box-3 {width: 400px;height: 400px;/* 背景颜色 */background-color: skyblue;/* 背景图片 */background-image: url(./images/sanguo.jpeg);/* 背景图片是否平铺 no-repeat 不平铺*/background-repeat: no-repeat;/* 背景图片的位置 background-position: x  y ;x为负数,背景图片水平向左移动,为正数,水平向右移动y为负数,背景图片垂直向上移动,为正数,垂直向下移动top  right left bottom center*//* background-position: 100px 50px; */background-position: center center;/* 背景图片的尺寸 (cover 把图片自动填充满整合标签)*//* background-size: 100% 100%; *//* contain 这个属性由原图片的尺寸(宽度 * 高度)来决定。如果宽度大于高度,就是以横向填充标签(水平方向)如果高度大于宽度,就是以纵向填充标签(垂直方向)*/background-size: contain;
}

七、行高

        line-height属性是行高,是文本行与行之间的间距,具体来说,是指每行文本基线与基线之间的间距,如下图:

        

        给line-height属性可以设置px(像素)或者倍数,代码如下:

<style>.text {background-color: red;font-size: 40px;/* 属性值: 倍数 / px */line-height: 1.75;}
</style><div class="text">xfgj  hello world
</div>

         遇到一行文本(单行文本)垂直居中,可以设置行高等于标签的高度,代码如下: 

<style>.box {font-size: 40px;background-color: green;height: 200px;/* 遇到一行文本(单行文本)垂直居中,可以设置行高等于标签的高度 */line-height: 200px;}
</style>
<div class="box">xfgj  hello world
</div>

八、圆角

        border-radius属性是圆角,对应的是边框四个角的属性,通过设置圆角可以让边框的四个角变圆,设置100%可以将盒子变成圆形。

        可以给圆角设置像素或者百分比,可以直接给border-radius设置,或者给四个边设置。代码如下:

属性名称含义

border-top-left-radius

左上方圆角

border-top-right-radius

右上方圆角

border-bottom-left-radius

左下方圆角

border-bottom-right-radius

右下方圆角
<style>.box {width: 200px;height: 200px;background-color: blue;/* 圆角属性 */border-radius: 100px;}</style>
<div class="box"></div><style>.demo {width: 200px;height: 300px;background-color: green;/* 分别设置不同的圆角 */border-top-left-radius: 40px;border-top-right-radius: 40px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
</style>
<div class="demo"></div>

        将盒子设置为圆形:

<body><style>.box {width: 100px;height: 100px;background-color: red;border-radius: 100%;}</style><div class="box"></div>
</body>

        效果如下:

九、透明度

        opacity可以设置元素透明,范围是[0.0--1.0],这个值越小,透明度越高,如果值为0,则元素透明,看不见元素,但此时元素仍然占位置。写法如下:

<style>.box-2 {width: 300px;height: 100px;font-size: 40px;background-color: rgb(0,0,255);/* 设置标签透明,标签和文本都变透明了 *//* 完全透明,但标签不是消失,还是占位置的。 */opacity: 0;opacity: .5;}
</style>
<div class="box-2">hello abc
</div>

九、颜色值

        设置文本的颜色使用color属性,背景颜色使用background-color属性,CSS中的颜色值有四种写法,如下:

<style>.box {width: 100px;height: 100px;/* 1) 英文词汇 white black  red green blue pink purple lightgreen .... *//* 2)  十六进制 #ffffff  #000000  (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f) *//* 3)  rgb(0,255,255) 或者 rgba(255,255,255,.5)  *//* 4)  hsl(色调,饱和度,亮度) */background-color: #d70a0a;}
</style>
<div class="box"></div>

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

浅谈监听器之简单数据写入

浅谈监听器之简单数据写入 “简单数据写入”&#xff08;Simple Data Writer&#xff09;监听器便是其中之一&#xff0c;它提供了一种简便的方式来将测试结果直接输出到文件中&#xff0c;便于后续的数据分析与处理。 简单数据写入监听器概述 “简单数据写入”监听器&#…

pdf压缩在线免费 pdf压缩在线免费网页版 在线pdf压缩在线免费 免费pdf压缩工具 压缩到最小几种方法详细步骤分享

PDF是当前最为常见的电子文档格式&#xff0c;它可以保护文档不被篡改或复制格式可以保持原格式。然而&#xff0c;因为市面上积攒的PDF文件数量过多&#xff0c;也容易因为体积太大的缘故&#xff0c;致使后面对磁盘存储造成很大的压力&#xff0c;压缩PDF文件能有效缩小其体积…

海上导航技术介绍

导航的目的主要是帮助人们或设备确定自己在地理空间中的位置&#xff0c;从而能够引导飞机、舰船、车辆等沿着设定路线安全、准确地到达目的地。 导航可以提供两类信息&#xff1a;第一类信息为载体自身的运动参数&#xff0c;如用户自己的三维坐标和速度矢量、航向、姿态等信…

【python】PyQt5中QPushButton的用法详细解析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

苍穹外卖浏览器前端界面修改

背景&#xff1a; 客户原始方案是期望做一个Spring Boot Vue的饿了么系统&#xff0c;但时间上太仓促&#xff0c;所以建议选择开源的苍穹外码目作为作业提交。 客户接受了建议的方案后&#xff0c;期望对前端页面做一些个性化的定制修改。 过程&#xff1a; 苍穹外卖简单介…

Java面试八股之后Spring、spring mvc和spring boot的区别

Spring、spring mvc和spring boot的区别 Spring, Spring Boot和Spring MVC都是Spring框架家族的一部分&#xff0c;它们各自有其特定的用途和优势。下面是它们之间的主要区别&#xff1a; Spring: Spring 是一个开源的轻量级Java开发框架&#xff0c;最初由Rod Johnson创建&…

git实践汇总【配置+日常使用+问题解决】

**最初配置步骤&#xff1a;** git config --global user.name "yournemae" git config --global user.email "yourmail" git config -l ssh-keygen -t rsa -C “xxx.xxxx.EXTcccc.com” git config --global ssh.variant ssh $ git clone git仓库路径 git…

Python + PyQt 搭建可视化页面(PyCharm)

Python PyQt 搭建可视化页面&#xff08;PyCharm&#xff09; 配置PyQt5环境 1.1 安装PyQt5和PyQt5-tools pip install PyQt5pip install PyQt5-tools1.2 QtDesigner和PyUIC环境的配置 配置QTDesigner&#xff0c;用来打开QT可视化开发工具 在PyCharm中依次打开&#xff1a…

docker 构建 mongodb

最近需要在虚拟机上构建搭建mongo的docker容器&#xff0c;搞了半天老有错&#xff0c;归其原因&#xff0c;是因为现在最新的mango镜像的启动方式发生了变化&#xff0c;故此现在好多帖子&#xff0c;就是错的。 ok&#xff0c;话不多说&#xff1a; # 拉取最新镜像&#xf…

传统存储市场份额首次跌破50%,对中国企业意味着什么?

近日&#xff0c;《IDC China Enterprise Storage System Market Overview&#xff0c;2024Q1》报告发布&#xff0c;其中一个结论令人瞩目&#xff1a;中国的SDS&#xff08;软件定义存储&#xff09;和 HCI&#xff08;超融合基础设施&#xff09;的市场份额首次超越TESS&…

【JavaScript】`Map` 数据结构

文章目录 一、Map 的基本概念二、常见操作三、与对象的对比四、实际应用场景 在现代 JavaScript 中&#xff0c;Map 是一种非常重要且强大的数据结构。与传统的对象&#xff08;Object&#xff09;不同&#xff0c;Map 允许您使用各种类型的值作为键&#xff0c;不限于字符串或…

人工智能与机器学习原理精解【3】

文章目录 泰勒级数逼近基础海森矩阵一、定义与性质一、定义二、性质三、应用四、结论 一阶导数和二阶导数的几何意义一阶导数的几何意义二阶导数的几何意义应用示例 导数与微分的区别1. 定义与本质2. 几何意义3. 表达式与关系4. 应用场景 可微函数定义几何意义性质例子 导数导数…

动手学深度学习V2每日笔记(模型选择+过拟合和欠拟合)

本文主要参考沐神的视频教程 https://www.bilibili.com/video/BV1K64y1Q7wu/?spm_id_from333.788.recommend_more_video.0&vd_sourcec7bfc6ce0ea0cbe43aa288ba2713e56d 文档教程 https://zh-v2.d2l.ai/ 本文的主要内容对沐神提供的代码中个人不太理解的内容进行笔记记录&a…

机器学习 | 计算分类算法的ROC和AUC曲线以随机森林为例

受试者工作特征&#xff08;ROC&#xff09;曲线和曲线下面积&#xff08;AUC&#xff09;是常用的分类算法评价指标&#xff0c;本文将讨论如何计算随机森林分类器的ROC 和 AUC。 ROC 和 AUC是量化二分类区分阳性和阴性类别能力的度量。ROC曲线是针对不同分类阈值的真阳性率&…

python_面向对象程序设计

一、面向过程和面向对象两大编程思想 面向过程&#xff1a;功能上的封装 面向对象&#xff1a;属性和行为上的封装 二、类的定义 1、类&#xff1a;有N个对象抽取出像的属性和行为&#xff0c;从而归纳出来的一种类别。 自定义数据类型的语法结构&#xff1a; class 类名 …

华为OD机试 - 停车场车辆统计 - 贪心算法(Java 2024 D卷 200分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华…

手机电脑文件共享的方法 备忘录文字文件可实现共享

在这个数字化时代&#xff0c;手机与电脑之间的文件共享已成为我们日常工作和生活中的常态需求。想象一下&#xff0c;你在公司用电脑编辑了一份重要文件&#xff0c;急需在手机上查看或继续编辑&#xff0c;或者你在手机上拍摄了一段重要视频&#xff0c;想要快速传输到电脑上…

JAVA笔记十六

十六、异常Exception 1.概念 异常&#xff1a;非正常情况&#xff0c;包括空的引用、数组下标越界、内存溢出等 Java提供了异常对象描述这类异常情况。 Java提供了异常机制来进行处理&#xff0c;通过异常机制来处理程序运行期间出现的错误&#xff0c;可以更好地提升程序的…

C# 贪吃蛇游戏

贪吃蛇游戏可分为手动玩法和自动玩法 冯腾飞/贪吃蛇

钡铼网关实时数据互联,加速IEC104与MQTT云平台对接

随着工业4.0时代的到来&#xff0c;电力系统中的数据采集、监控与远程控制需求日益增长。IEC 104&#xff08;IEC 60870-5-104&#xff09;作为国际电工委员会&#xff08;IEC&#xff09;制定的电力自动化通信协议&#xff0c;广泛应用于电力系统的状态监测、数据采集和设备控…