常见的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.mzph.cn/news/875669.shtml

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

相关文章

Github 2024-07-26 Java开源项目日报 Top10

根据Github Trendings的统计,今日(2024-07-26统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目9HTML项目1TypeScript项目1非开发语言项目1JavaGuide - Java 程序员学习和面试指南 创建周期:2118 天开发语言:Java协议类型:Apache…

Matlab编程资源库(7)图形修饰处理

一、视点处理 MATLAB 提供了 设置视点 的函数 view &#xff0c;其调用格式 为&#xff1a; view(az,el) 其中 az 为 方位角 &#xff0c; el 为 仰角 &#xff0c;它们均以度为单位。 系统缺省的视点定义为方位角-37.5 , 仰角30 。 二、色彩处理 1 &#xff0e;颜色的向量…

c++网络编程实战——开发基于ftp协议的文件传输模块(三) 封装自己的ftp客户端

一.前言 在前面我们已经简单介绍过FTP协议的基本概念以及我们如何配置FTP服务和一些常用的ftp命令,这篇文章主要是介绍我们如何基于开源库去封装我们自己的ftp客户端。这篇文章也可以看做一篇介绍如何基于开源库去封装自己工具库的教程。 补充: 在上一篇文章中我犯了一个小错…

Python 和 Boto3 生成 Amazon S3 对象的 HTTPS URL

在使用 Amazon S3 存储服务时,我们经常需要获取存储桶中对象的 HTTPS URL。这篇博文将详细介绍如何使用 Python 和 Boto3 库来实现这一功能。 背景 Amazon S3(Simple Storage Service)是一种广泛使用的云存储服务。在许多场景中,我们需要获取 S3 存储桶中对象的公开访问 …

353_C++_Boost.Asio库来处理异步操作

逐行解析这段C++代码。该代码使用了Boost.Asio库来处理异步操作,并且使用了智能指针和线程相关的一些内容。 #include <boost/asio.hpp> #include <memory>这两行代码包含了Boost.Asio库和标准库中的智能指针std::shared_ptr的头文件。 /**********************…

[ABC279B] LOOKUP 题解

题目传送门 \color{orangered}\text{题目传送门} 题目传送门 题意 给出两个字符串 A , B A,B A,B&#xff0c;问 B B B 是否是 A A A 的子串。 分析 调用find函数&#xff0c; 用来查找 B B B 是否在 A A A 中出现过。 因为题目上说字符串的长度不大于100&#xff0c…

【前端学习】CSS三大特性

CSS三大特性 CSS的三大特性是为了化简代码、定位问题并且解决问题 继承性 继承性特点&#xff1a; 子级默认继承父级的文字控制属性。注意&#xff1a;如果标签自己有样式则生效自己的样式&#xff0c;不继承。 <!DOCTYPE html> <html lang"en"><…

Java整理12

1、前端工程化 概念&#xff1a;使用软件工程的方法来单独解决前端开发流程中模块化、组件化、规范化、自动化的问题&#xff0c;提高效率降低成本。 ECMA6Script&#xff08;VUE3的基础&#xff09; let&#xff1a;&#xff08;1&#xff09;let不能重复声明&#xff08;2&a…

windows USB 设备驱动开发- WinUSB 简介

WinUSB 是 Windows 随附的 USB 设备的通用驱动程序。WinUSB 包括&#xff1a; 内核模式驱动程序 (Winusb.sys)&#xff1b;公开 winusb.h 中所述的 WinUSB 函数的用户模式动态链接库 (Winusb.dll)。 借助这些函数&#xff0c;你可以使用用户模式软件管理 USB 设备&#xff1b;…

12 位运算符

位运算符只能用于整数&#xff0c;其内部执行过程为&#xff1a;首先将整数转换为二进制数&#xff0c;然后右对齐&#xff0c;必要时左侧补0&#xff0c;按位进行运算&#xff0c;最后再把计算结果转换为十进制数字返回。 ① 左移&#xff1a;高位丢弃&#xff0c;低位补0&…

Exponential Moving Average (EMA) in Stable Diffusion

1.Moving Average in Stable Diffusion (SMA&EMA) 1.Moving average 2.移动平均值 3.How We Trained Stable Diffusion for Less than $50k (Part 3) Moving Average 在统计学中&#xff0c;移动平均是通过创建整个数据集中不同选择的一系列平均值来分析数据点的计算。 …

React 常见的报错及解决方法

1、Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons&#xff08;无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一&#xff09; 原因&#x…

数据结构与算法-插入排序

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、插入排…

unity ui toolkit的使用

UIToolkitExamples (github)样例 GitHub - ikewada/UIToolkitExamples: チュートリアル動画「使ってみようUI Toolkit」のためのサンプルプロジェクトです官网 Unity - Manual: UI Toolkit视频教程 使用 UI Toolkit - 上集_哔哩哔哩_bilibili 使用 UI Toolkit - 下集_哔哩哔哩_…

Java | Leetcode Java题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution {public void moveZeroes(int[] nums) {int n nums.length, left 0, right 0;while (right < n) {if (nums[right] ! 0) {swap(nums, left, right);left;}right;}}public void swap(int[] nums, int left, int right)…

赋能未来教育,3DCAT助力深圳鹏程技师学院打造5G+XR实训室

随着国家对教育行业的重视&#xff0c;实训室建设已成为推动教育现代化的关键。《教育信息化2.0行动计划》、《职业教育示范性虚拟仿真实训基地建设指南》等政策文件&#xff0c;明确指出了加强虚拟仿真实训教学环境建设的重要性。 在这一大背景下&#xff0c;教育行业对于实训…

初识C++ · AVL树(1)

目录 前言&#xff1a; 1 AVL树的创建 2 部分成员函数 2.1 查找 2.2 中序遍历 2.3 插入 2.4 左旋转 2.5右旋转 前言&#xff1a; 上文&#xff0c;上上文提到了map set&#xff0c;二叉搜索树&#xff0c;其实都是为了近两文做铺垫的&#xff0c;虽然map的底层是红黑树…

YOLOv8目标检测网络评估指标介绍

本章主要介绍一下AP的计算方法, 其中会穿插介绍TP、TN、FP、FN、Precision和Recall等概念。 1.类别、置信度和IoU 先来了解下类别、置信度和IoU,这三者的定义很重要,因为在后面的计算过程中会借助这三者的值来计算AP值。 类别是指模型预测的类别概率中的最大的一个类别,置…

openFeign配置okhttp

原来的项目出现了性能问题&#xff0c;老大不知道怎么的&#xff0c;让我改openFeign线程池为okhttp&#xff0c;说原生的不支持线程池性能比较差。 原openFeign配置文章地址 一、pom文件 <dependency><groupId>org.springframework.cloud</groupId><arti…

设计模式实战:媒体播放器的设计与实现

问题描述 设计一个媒体播放器系统,用户可以播放、暂停、停止和切换媒体。系统需要支持多种媒体格式(如音频和视频),并允许在播放过程中应用不同的效果(如音量调节、均衡器等)。 设计分析 状态模式 状态模式允许对象在其内部状态改变时改变其行为。媒体播放器需要在不…