常见的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://www.rhkb.cn/news/384248.html

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

相关文章

普乐蛙VR航天航空体验馆知识走廊VR体验带你登陆月球

VR航天航空设备是近年来随着虚拟现实&#xff08;VR&#xff09;技术的快速发展而兴起的一种新型设备&#xff0c;它结合了航天航空领域的专业知识与VR技术的沉浸式体验&#xff0c;为用户提供了前所未有的航天航空体验。以下是对VR航天航空设备的详细介绍&#xff1a; 一、设备…

nodejs编译报错 集合

目录 一、使用命令编译typescript时报错&#xff0c;报错文件tsconfig.json 二、npm start运行后报错&#xff0c;could not find module 一、使用命令编译typescript时报错&#xff0c;报错文件tsconfig.json npx tsc 报错&#xff1a; Specified include paths were [&…

PyTorch安装CUDA标准流程(可解决大部分GPU无法使用问题)

最近一段时间在研究PyTorch中的GPU的使用方法&#xff0c;之前曾经安装过CUDA&#xff0c;不过在PyTorch中调用CUDA时无法使用。考虑到是版本不兼容问题&#xff0c;卸载后尝试了其他的版本&#xff0c;依旧没有能解决问题&#xff0c;指导查阅了很多资料后才找到了解决方案。 …

uni-app声生命周期

应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发&#xff08;全局触发一次&#xff09; onShow:当uni-app启动&#xff0c;或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…

什么是设备运维管理系统?有什么作用?(6款设备运维管理系统推荐)

一、什么是设备运维管理系统&#xff1f; 设备运维管理系统是一种集成了监控、管理、维护和优化设备性能的软件平台。它旨在通过自动化的手段&#xff0c;提高设备运行的可靠性和效率&#xff0c;降低运维成本&#xff0c;并优化资源利用。 设备运维管理系统能够实时监控设备…

图片上传成功却无法显示:静态资源路径配置问题解析

1、故事的背景 最近&#xff0c;有个学弟做了一个简单的后台管理页面。于是他开始巴拉巴拉撘框架&#xff0c;写代码&#xff0c;一顿操作猛如虎&#xff0c;终于将一个简单的壳子搭建完毕。但是在实现功能&#xff1a;点击头像弹出上传图片进行头像替换的时候&#xff0c;卡壳…

Hyperledger Fabric 网络体验 - 网络启动过程概览

进入fabric-samples/test-network目录&#xff0c;执行指令&#xff1a; ./network.sh up -i 2.5执行完指令能看到fabric已经启动。 作为第一次Fabric网络体验&#xff0c;网络启动主要包含三个操作&#xff0c;分别是生成配置文件、启动网络和操作网络。 配置文件 使用cr…

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创建&…

基于 HTML+ECharts 实现的数据可视化大屏案例(含源码)

数据可视化大屏案例&#xff1a;基于 HTML 和 ECharts 的实现 数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示&#xff0c;数据可视化大屏能够帮助用户快速理解复杂的数据关系&#xff0c;发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实…

DBeaver Ultimate 22.1.0 连接数据库(MySQL+Mongo+Clickhouse)

前言 继续书接上文 Docker Compose V2 安装常用数据库MySQLMongo&#xff0c;部署安装好之后我本来是找了一个web端的在线连接数据库的工具&#xff0c;但是使用过程中并不丝滑&#xff0c;最终还是选择了使用 DBeaver &#xff0c;然后发现 mongo 还需要许可&#xff0c;又折…

Kafka快速入门+SpringBoot简单的秒杀案例

1. 主题相关 1.1 创建主题 kafka-topics.sh --create --bootstrap-server [服务器地址] --replication-factor [副本数] --partitions [分区数] --topic [主题名]liberliber-VMware-Virtual-Platform:/home/zookeeper$ docker-compose exec kafka /bin/bash #进入kafka容器 b…

vue3 常用的知识点

setup:容许在script当中书写组合式API 并且vue3的template不再要求唯一的根元素 <script setup>const name app; </script>组合式API的用法&#xff1a; 可以直接在script标签中定义变量或者函数&#xff0c;然后直接在template当中使用 <template>{{mes…

09 算术运算符

① 运算符除了用于算数加法以外&#xff0c;还可以用于列表、元组、字符串的连接&#xff0c;但不支持不同类型的对象之间的相加或连接。 print([1, 2, 3] [4, 5, 6]) # 连接两个列表 print((1, 2, 3) (4,)) # 连接两个元组 print(hello 123) # 连接字符串 print(Fa…

layui+thymeleaf+jquery实现多图片,多视频的上传、预览、放大、编辑功能

layuithymeleafjquery实现多图片&#xff0c;多视频的上传、预览、放大、编辑功能 html: <!--多图片上传--> <div class"layui-row layui-col-space10"><div class"layui-form-item"><div class"layui-form-item layui-form-te…

Redis+Lua脚本+AOP+反射+自定义注解,打造我司内部基础架构限流组件

定义注解 Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD}) Documented public interface RedisLimitAnnotation {/*** 资源的key,唯一* 作用&#xff1a;不同的接口&#xff0c;不同的流量控制*/String key() default "";/*** 最多的访问限制次数…

Ubuntu 24 PXE Server bios+uefi 自动化部署esxi 6 7 8

pxe server 前言 PXE(Preboot eXecution Environment,预启动执行环境)是一种网络启动协议,允许计算机通过网络启动而不是使用本地硬盘。PXE服务器是实现这一功能的服务器,它提供了启动镜像和引导加载程序,使得客户端计算机可以通过网络启动并安装操作系统或运行其他软件…

cesium海洋到站提示

项目地址:Every Admin: 用于快速搭建后台管理和其他页面的项目,组件化开发,以及大屏展示. <template> <div class"topbox"> xx海洋管理 </div> <div class"selectbox"> <div class"title"> 航线列表 </div>…

ChatGPT的原理和成本

ChatGPT就是人机交互的一个底层系统&#xff0c;某种程度上可以类比于操作系统。在这个操作系统上&#xff0c;人与AI之间的交互用的是人的语言&#xff0c;不再是冷冰冰的机器语言&#xff0c;或者高级机器语言&#xff0c;当然&#xff0c;在未来的十来年内&#xff0c;机器语…

iPhone 17系列取消17 Plus版本?新一代苹果手机迎来新变革

随着科技的飞速发展&#xff0c;苹果公司再次准备刷新我们的期待&#xff0c;即将推出的iPhone 17系列携带着一系列令人兴奋的升级。今年&#xff0c;苹果打破了常规&#xff0c;将四款新机型带入市场——iPhone 17、17 Pro、17 Pro Max&#xff0c;以及一款全新的成员&#xf…

Hadoop、HDFS、MapReduce 大数据解决方案

本心、输入输出、结果 文章目录 Hadoop、HDFS、MapReduce 大数据解决方案前言HadoopHadoop 主要组件的Web UI端口和一些基本信息MapReduceMapReduce的核心思想MapReduce的工作流程MapReduce的优缺点Hadoop、HDFS、MapReduce 大数据解决方案 编辑 | 简简单单 Online zuozuo 地址…