CSS 常用元素属性

CSS 属性有很多, 可以参考文档 CSS 参考手册

1. 字体属性

设置字体

  • 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
  • 如果字体名有空格, 使用引号包裹.
  • 建议使用常见字体, 否则兼容性不好.
    <style>.one {font-family:"Microsoft YaHei";}.two {font-family:"宋体";}</style><p class="one">这是微软雅黑</p><p class="two">这是宋体</p>

大小

p {font-size: 20px;
}
  • 可以给 body 标签使用
  • font-size 要注意单位 px 不要忘记
    <style>.one {font-size: larger;}.two {font-size: 10px;}</style><p class="one">大大大大大</p><p class="two">小小小小小</p>

粗细

p {font-weight: bold;font-weight: 700;
}

可以使用数字表示粗细，取值范围是 100 -> 900，700 == bold, 400 == normal 即不变粗。

    <style>.one {font-weight: 900;}.two {font-weight: 100;}</style><p class="one">粗粗粗</p><p class="two">细细细</p>

文字样式

p {
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;}
    <style>.one {font-style: italic;}.two {font-style: normal;}</style><p class="one">倾斜</p><p class="two">正常</p>

2. 文本属性

文本颜色

认识 RGB

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色. 我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果. 计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示 为 00-FF). 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.

设置文本颜色

color 属性值的写法:

  • 预定义的颜色值(直接是单词)
color: red;
  • [最常用] 十六进制形式
color: #ff0000;
  • RGB 方式
color: rgb(255, 0, 0);

鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.

文本对齐

控制文字图片等元素水平方向的对齐.

text-align: [值];
  • center: 居中对齐
  • left: 左对齐
  • right: 右对齐
    <style>.one {text-align: left;font-size: 40px;}.two {text-align:center;font-size: 40px;}.three {text-align:right;font-size: 40px;}</style><p class="one">左对齐</p><p class="two">居中对齐</p><p class="three">右对齐</p>

文本装饰

text-decoration: [值];
  • underline 下划线. [常用]
  • none 啥都没有. 可以给 a 标签去掉下划线.
  • overline 上划线. [不常用]
  • line-through 删除线 [不常用]
    <style>.one {text-decoration:underline;}.two {text-decoration:none;}.three {text-decoration:overline;}.four {text-decoration:line-through;}</style><p class="one">下划线</p><a class="two" href="#">啥都没有</a><p class="three">上划线</p><p class="four">删除线</p>

文本缩进

控制段落的 首行 缩进 (其他行不影响)

text-indent: [值];
  • 单位可以使用 px 或者 em，使用 em 作为单位更好，1 个 em 就是当前元素的文字大小.
  • 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
    <style>.one {text-indent: 2em;}.two {text-indent: -2em;}</style><p class="one">正常缩进</p><p class="two">反向缩进</p>

3. 背景属性

背景颜色

background-color: [指定颜色]
    <style>.one {background-color:red;}.two {background-color:green;}</style><div class="one">红色背景</div><div class="two">绿色背景</div>

背景图片

background-image: url(图片路径);

注意:

1. url 可以是绝对路径, 也可以是相对路径

2. url 上可以加引号, 也可以不加.

    <style>.one {background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);height:400px;}</style><div class="one"></div>

背景平铺

background-repeat: [平铺方式]
  • repeat: 平铺，默认是 repeat.
  • no-repeat: 不平铺
  • repeat-x: 水平平铺
  • repeat-y: 垂直平铺
    <style>.one {background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);height:200px;background-size:150px;background-repeat: no-repeat;font-size: 50px;text-align: center;}.two {background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);height:200px;background-size:150px;background-repeat:repeat-x;font-size: 50px;text-align: center;}.three {background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);height:200px;background-size:150px;background-repeat:repeat-y;font-size: 50px;text-align: center;}</style><div class="one">不平铺</div><div class="two">水平平铺</div><div class="three">垂直平铺</div>

背景位置

background-position: x y;

参数有三种风格:

  • 方位名词: (top, left, right, bottom)
  • 精确单位: 坐标或者百分比(以左上角为原点)
  • 混合单位: 同时包含方位名词和精确单位
    <style>.one {background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);height:200px;background-size:150px;background-repeat: no-repeat;background-position: center;}</style><div class="one">背景居中</div>

背景尺寸

background-size: length|percentage|cover|contain;
  • lenth:填具体的数值,如 40px 60px 表示宽度为 40px, 高度为 60px。
  • percentage:填百分比,按照父元素的尺寸设置。
  • cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。
  • contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4. 圆角矩形

基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

    <style>.one {height: 200px;width:400px;border: 2px solid red;border-radius: 10px;}</style><div class="one"></div>

生成圆形

让 border-radius 的值为正方形宽度的一半即可.

    <style>.one {height: 200px;width: 200px;border: 2px solid red;border-radius: 50%;}</style><div class="one"></div>

5. 盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"，这个盒子由这几个部分构成：

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

边框

基础属性

  • 粗细: border-width
  • 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
  • 颜色: border-color
    <style>.one {height: 200px;width:200px;border-width: 10px;border-color: blue;border-style: solid;</style><div class="one">边框测试</div>

支持简写, 没有顺序要求

border: 10px solid blue;

内边距

默认内容是顶着边框来放置的,用 padding 来控制这个距离。可以给四个方向都加上边距 padding-top, padding-bottom, padding-left, padding-right。也可以把多个方向的 padding 合并到一起：

padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

此时可以看到带有了一个绿色的内边距.

外边距

控制盒子和盒子之间的距离，可以给四个方向都加上边距 margin-top，margin-bottom，margin-left，margin-right。也可以把多个方向的 margin 合并到一起：

margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

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

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

相关文章

Machine Learning: A Probabilistic Perspective 机器学习：概率视角 PDF免费分享

Machine Learning: A Probabilistic Perspective 机器学习：概率视角 PDF免费分享

下载链接在博客最底部&#xff01;&#xff01; 之前需要参考这本书&#xff0c;但是大多数博客都是收费才能下载本书。 在网上找了好久才找到免费的资源&#xff0c;浪费了不少时间&#xff0c;在此分享以节约大家的时间。 链接: https://pan.baidu.com/s/1erFsMcVR0A_xT4fx…
阅读更多...
无人机遂行编队飞行中的纯方位无源定位（2022数模国赛B题）

无人机遂行编队飞行中的纯方位无源定位（2022数模国赛B题）

文章目录 论文项目地址 数模国赛前的练手题&#xff0c;实力不够&#xff0c;参考了好多论文才写出来&#xff0c;个人感觉思路应该没什么大问题&#xff0c;供大家参考 论文 项目地址 github&#xff1a;UAVFormationFlight gitee&#xff1a;UAVFormationFlight 项目包含 完…
阅读更多...
指针式仪表识别

指针式仪表识别

源码下载&#xff1a;小宅博客网 效果如下&#xff1a; 工程结构&#xff1a; 说明&#xff1a; 源码是针对下面这种刻度&#xff0c;并且单个指针的仪表的 如果是下面这种&#xff0c;刻度线被连接起来的&#xff0c;目前不支持转换成仪表单位&#xff0c;只能输出指针角度&…
阅读更多...
探索自动化的魔法：Python中的pyautogui库

探索自动化的魔法：Python中的pyautogui库

文章目录 探索自动化的魔法&#xff1a;Python中的 pyautogui 库背景&#xff1a;为什么选择pyautogui&#xff1f;pyautogui是什么&#xff1f;如何安装pyautogui&#xff1f;五个简单的库函数使用方法场景应用常见Bug及解决方案总结 探索自动化的魔法&#xff1a;Python中的 …
阅读更多...
【Linux】 LTG：移动硬盘部署Ubuntu24.04

【Linux】 LTG：移动硬盘部署Ubuntu24.04

Ubuntu To Go 是一种便携式的 Ubuntu 操作系统解决方案&#xff0c;允许用户将 Ubuntu 系统安装在 USB 驱动器或其他可移动存储设备上。这样&#xff0c;用户可以在任何支持 USB 启动的计算机上运行 Ubuntu&#xff0c;而无需在本地硬盘上进行安装。 准备工作 移动硬盘&#x…
阅读更多...
C++初阶：string类的模拟实现

C++初阶：string类的模拟实现

✨✨小新课堂开课了&#xff0c;欢迎欢迎~✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C&#xff1a;由浅入深篇 小新的主页&#xff1a;编程版小新-CSDN博客 前言&#xff1a; 前面已经对string类进行了…
阅读更多...
7系列FPGA HR/HP I/O区别

7系列FPGA HR/HP I/O区别

HR High Range I/O with support for I/O voltage from 1.2V to 3.3V. HP High Performance I/O with support for I/O voltage from 1.2V to 1.8V. UG865&#xff1a;Zynq-7000 All Programmable SoC Packaging and Pinout
阅读更多...
企业四要素核验是什么？如何应用

企业四要素核验是什么？如何应用

企业四要素核验是指对企业名称、社会统一信用代码&#xff08;或注册号&#xff09;、法人名称以及法人身份证号码等四项关键信息进行核验的过程。这一核验步骤是确保企业信息真实性和合法性的重要手段&#xff0c;广泛应用于各个行业领域&#xff0c;以防范企业身份被冒用、欺…
阅读更多...
Android 车联网——CarProperty使用实例（二十三）

Android 车联网——CarProperty使用实例（二十三）

在熟悉了 Car 下的相关 Manager 和 Service 后，这里我们通过需求来实现 CarProperty 的使用实例。 一、使用实例 1、需求分析 假如有这样一个需求，需要封装一个 SDK 为 APP 提供车辆信息、空调状态以及驾驶信息等相关属性的值及变化情况。这里我们首先需要确认各种属性对应…
阅读更多...
JVM锁的优化与逃逸分析

JVM锁的优化与逃逸分析

锁消除 是指JVM即时编译器在运行时&#xff0c;对一些代码上要求同步&#xff0c;但是被检测到不可能存在共享数据竞争的锁进行消除。锁消除的主要判定依据来源于逃逸分析的数据支持。JIT&#xff08;Just-In-Time&#xff0c;即时编译&#xff09;&#xff1a;是一种在程序运…
阅读更多...
【STM32 Blue Pill编程】-定时器计数模式

【STM32 Blue Pill编程】-定时器计数模式

定时器计数模式 文章目录 定时器计数模式1、定时器计数模式介绍2、硬件准备及接线3、模块配置3.1 定时器计数模式配置3.2 定时器中断配置3.3 串口配置4、代码实现在本文中，我们将讨论如何在计数器模式下配置 STM32 Blue Pill 定时器模块。 要将定时器用作计数器，我们将其配置…
阅读更多...
【mechine learning-六-supervise learning之线性回归模型】

【mechine learning-六-supervise learning之线性回归模型】

监督学习之线性回归模型 线性回归模型线性模型回归模型 如何使用线性模型实现智能化预测呢寻找数据训练模型输入、特征、目标、预测值、模型代价函数 线性模型是人工智能监督学习中最广泛的应用&#xff0c;所以有必要先学习一下这个基础模型&#xff0c;做好基石。 线性回归模…
阅读更多...
在 CentOS 中永久关闭防火墙的步骤

在 CentOS 中永久关闭防火墙的步骤

在 CentOS 中永久关闭防火墙的步骤 在 CentOS 系统中&#xff0c;防火墙通常由 firewalld 服务管理。如果你希望在系统中永久关闭防火墙&#xff0c;可以按照以下步骤操作&#xff1a; 1. 停止防火墙服务 首先&#xff0c;你需要停止当前正在运行的防火墙服务。可以使用以下…
阅读更多...
猎板PCB大讲堂：IPHONE16的线路板的升级猜测

猎板PCB大讲堂：IPHONE16的线路板的升级猜测

iPhone 16 系列与 iPhone 15 系列在 PCB (印刷电路板) 设计上的主要差异可能体现在材料和技术上。根据 TrendForce 的分析&#xff0c;iPhone 16 预计将采用树脂涂覆铜箔&#xff08;RCC&#xff09;作为新的印刷电路板&#xff08;PCB&#xff09;材料&#xff0c;这一改变将使…
阅读更多...
使用 ShuffleNet 模型在 CIFAR-100 数据集上的图像分类

使用 ShuffleNet 模型在 CIFAR-100 数据集上的图像分类

简介 在深度学习领域&#xff0c;图像分类任务是衡量算法性能的重要基准。本文将介绍我们如何使用一种高效的卷积神经网络架构——ShuffleNet&#xff0c;来处理 CIFAR-100 数据集上的图像分类问题。 CIFAR-100 数据集简介 CIFAR-100 数据集是一个广泛使用的图像分类数据集&…
阅读更多...
QT的绘画事件和网络通信

QT的绘画事件和网络通信

画一个时钟 #include "widget.h" #include "ui_widget.h" #include <QPainter> #include <QDebug> #include <QTime> #include <QTimer>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(…
阅读更多...
11_跳表（Skip List）

11_跳表（Skip List）

菜鸟: 老鸟&#xff0c;我最近在处理一个数据操作的时候遇到了性能问题。我在一个有序数组中查找元素&#xff0c;发现查找速度有点慢&#xff0c;尤其是数据量大的时候。你有什么好的建议吗&#xff1f; 老鸟: 这是个好问题&#xff0c;有许多数据结构可以优化查找操作。你听…
阅读更多...
Python爱心射线（完整代码）

Python爱心射线（完整代码）

目录 系列目录 写在前面​ 完整代码 下载代码 代码分析 写在后面 系列目录 序号直达链接表白系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3
阅读更多...
人工智能领域各方向顶级会议和期刊

人工智能领域各方向顶级会议和期刊

会议 人工智能基础与综合&#xff1a;AAAI、CICAI (!)、UAI、IJCAI 机器学习&#xff1a;COLT、ICLR、ICML、NeurIPS 模式识别与计算机视觉&#xff1a;ECCV、CVPR、ICCV 语言与语音处理&#xff1a;ACL、EMNLP 知识工程与数据挖掘&#xff1a;SIGKDD、SIGMOD、ICDE、SIGIR、V…
阅读更多...
web知识

web知识

sql注入的万能密码:1’ or true#如果页面没有什么东西可见&#xff0c;首先可以用diresearch看看有没有什么隐藏的目录&#xff0c;或者检查源代码&#xff0c;如果这些都没成功可以用 dirsearch如果没有找到东西&#xff0c;可能需要调低线程 dirsearch.py -u url -e * --ti…
阅读更多...
最新文章

Copyright @ 2022~2023