CSS(二):美化网页元素

目录

字体样式

文本样式

列表样式

背景图片


字体样式

字体相关的 CSS 属性:

  • font-family:设置字体
  • font-size:设置字体大小
  • font-weight:设置字体的粗细(如 normal, bold, lighter 等)
  • color:设置字体颜色

可以将多个字体属性写在一行:

font: <font-size> <font-weight> <font-family>;

例如:

p {
  font: 16px normal Arial, sans-serif; /* 设置字体大小、粗细和字体类型 */
  color: #333333; /* 字体颜色为深灰色 */
}

文本样式

常见的文本样式属性:

  • color:设置文本颜色
  • text-align:设置文本对齐方式
    • left:左对齐
    • center:居中对齐
    • right:右对齐
    • justify:两端对齐
  • text-indent:设置段落的首行缩进,常用于段落的美化
  • line-height:设置行高,可以帮助改善可读性,特别是对于多行文本
  • text-decoration:设置文本的装饰效果
    • underline:下划线
    • overline:上划线
    • line-through:中划线
    • none:去掉装饰(常用于去除链接下划线)
  • text-shadow:设置文本的阴影,通常是四个参数:阴影颜色、水平偏移量、垂直偏移量和阴影的模糊半径

例如:

h1 {
  color: #2c3e50;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.5;
}

列表样式

通过 list-style 属性可以自定义列表项的符号

  • list-style:控制列表项的样式,可以设置多个属性
    • none:去掉默认的项目符号
    • circle:空心圆
    • decimal:数字(有序列表的默认样式)
    • square:实心方块

例如:

ul {
  list-style: square; /* 使用正方形符号 */
}

ol {
  list-style: decimal; /* 使用数字 */
}

背景图片

常见的背景属性:

  • background-image:设置背景图片。语法:background-image: url("image.jpg");
  • background-position:设置背景图片的定位。语法:background-position: x% y%; 或者 background-position: top left;
  • background-repeat:控制背景图片是否重复,常见值:
    • repeat:默认,背景图片在水平方向和垂直方向上都重复
    • no-repeat:背景图片不重复
    • repeat-x:仅水平重复
    • repeat-y:仅垂直重复
  • background-size:用来控制背景图像的大小,常用的值有:
    • cover:保持背景图比例,自动填满背景区域,可能裁剪部分图片
    • contain:保持背景图比例,图片完整显示,但可能留白
    • 具体的 px% 数值。

合并写法:

background: <color> <image> <position> <size> <repeat>;

例如:

div {
  background: #ffcc00 url("image.jpg") no-repeat center center;
  background-size: cover;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IIC驱动EEPROM

代码参考正点原子 i2c_dri:主要是三段式状态机的编写 module iic_dri#(parameter SLAVE_ADDR 7b1010000 , //EEPROM从机地址parameter CLK_FREQ 26d50_000_000, //模块输入的时钟频率parameter I2C_FREQ 18d250_000 //IIC_SCL的时钟频率)( …

webrtc获取IceCandidate流程

在WebRTC(Web Real-Time Communication)中,ICECandidate是一个关键概念,它用于描述在建立点对点(P2P)连接时可以考虑的潜在通信端点。以下是关于WebRTC中ICECandidate的详细解释: 一、ICECandidate的定义 ICECandidate对象通常包含以下关键属性: foundation:用于唯一…

一文彻底拿捏DevEco Studio的使用小技巧

程序员Feri一名12年的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴&#xff01;君志所向,一往无前&#xff01; 0.安装DevEco Studio DevEco Studio面向HarmonyOS应用及元服务开发者提供的集成开…

基于openEuler22.09部署OpenStack Yoga云平台(一)

OpenStack Yoga部署 安装OpenStack 一、基础准备 基于OpenStack经典的三节点环境进行部署&#xff0c;三个节点分别是控制节点&#xff08;controller&#xff09;、计算节点&#xff08;compute&#xff09;、存储节点&#xff08;storage&#xff09;&#xff0c;其中存储…

新服务器ubuntu系统相关操作

1、查看驱动:驱动版本535.216.01能够支持cuda12.2,下面直接使用默认安装的cuda。 2、赋予用户管理员权限。 首先有超级用户(root)权限来编辑 /etc/sudoers 文件,visudo 是一个命令,用于安全地编辑 /etc/sudoers 文件。运行: sudo visudo 在 visudo 编辑器中,找到类似…

微机接口课设——基于Proteus和8086的打地鼠设计(8255、8253、8259)

原理图设计 汇编代码 ; I/O 端口地址定义 IOY0 EQU 0600H IOY1 EQU 0640H IOY2 EQU 0680HMY8255_A EQU IOY000H*2 ; 8255 A 口端口地址 MY8255_B EQU IOY001H*2 ; 8255 B 口端口地址 MY8255_C EQU IOY002H*2 ; 8255 C 口端口地址 MY8255_MODE EQU IOY003H*2 ; …

【C++数据结构——树】二叉树的遍历算法(头歌教学实验平台习题) 【合集】

目录&#x1f60b; 任务描述 相关知识 1. 二叉树的基本概念与结构定义 2. 建立二叉树 3. 先序遍历 4. 中序遍历 5. 后序遍历 6. 层次遍历 测试说明 通关代码 测试结果 任务描述 本关任务&#xff1a;实现二叉树的遍历 相关知识 为了完成本关任务&#xff0c;你需要掌…

简单园区网拓扑实验

1.实验拓扑 2.实验要求 1、按照图示的VLAN及IP地址需求&#xff0c;完成相关配置 2、要求SW1为VLAN 2/3的主根及主网关 SW2为vlan 20/30的主根及主网关 SW1和SW2互为备份 3、可以使用super vlan 4、上层通过静态路由协议完成数据通信过程 5、AR1为企业出口路由器 6、要求全网可…

USB接口实现CDC(usb转串口功能)

主控&#xff1a;stm32f429 PHY芯片&#xff1a;usb3320 Cubemx System Core-RCC connectivity-USB_OTG_HS Middleware and Software Packs-USB_DEVICE 时钟配置&#xff1a;根据自己使用的MCU工作频率设置 Generate Code Keil5 打开工程 usbd_cdc_if.c这个文件&…

C++---------动态内存管理

以下是对 C 中相关概念的详细说明及代码示例&#xff1a; 一、动态分配和堆 new 操作符&#xff1a; new 操作符用于在堆上动态分配内存。它会调用对象的构造函数&#xff08;如果是类对象&#xff09;并返回指向分配内存的指针。示例&#xff1a; #include <iostream&g…

企业该如何进行合格文件外发管理

随着信息技术的迅猛发展&#xff0c;企业间的文件交换变得越来越频繁。但是&#xff0c;如何确保文件传输的安全性与效率&#xff0c;成为企业管理者面临的一个重大挑战。镭速&#xff08;Raysync&#xff09;文件外发管理方案以其独特的优势&#xff0c;成为众多企业的首选。本…

Modbus数据网关在制造企业的应用与效果

Modbus是一种广泛应用于工业通信的协议&#xff0c;支持多种设备间的数据交换&#xff0c;如传感器、仪器仪表、PLC、工业机器人、数控机床等。Modbus数据网关则是一种网络通信转换设备&#xff0c;它能够将Modbus协议的数据转换为其他主流协议&#xff08;如MQTT、OPC UA、HTT…

解决集群Elasticsearch 未授权访问漏洞

1、ES集群配置 首先至少是三个节点 2、生成证书&#xff08;后面要用&#xff09; cd /home/elasticsearch-7.4.2/bin ./elasticsearch-certutil cert 回车&#xff0c;空密码&#xff08;可以输入密码&#xff09;&#xff0c;回车 3、将elastic-certificates.p12 复制到三…

mac启ssh服务用于快速文件传输

x.1 在mac上启SSH服务 方法一&#xff1a;图形交互界面启ssh&#xff08;推荐&#xff09; 通过sharing - advanced - remote login来启动ssh&#xff1b;&#xff08;中文版mac应该是 “系统设置 → 通用 → 共享”里打开“远程登录”来启动&#xff09; 查看自己的用户名和…

Jenkins 任意文件读取(CVE-2024-23897)修复及复现

Jenkins任意文件读取漏洞CVE-2024-23897修复及复现 漏洞详情影响范围漏洞复现修复建议 Jenkins是一个开源软件项目&#xff0c;是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行…

C语言数组查找

数组概念 就是一堆数的一个集合&#xff0c;包含于指针&#xff0c;但是与指针不同的是数组是开辟了空间的 char a[20] //开辟了20个空间 char *p //一个指针&#xff0c;并没有开辟空间 数组名作为指针&#xff1a; 在C语言中&#xff0c;数组名通常可以被看作是一…

HarmonyOS NEXT 实战之元服务:静态案例效果---最近播放音乐

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1完整代码案例如下&#xff1a; Index import { authentica…

CVPR2024 | DiffAM:基于扩散模型的对抗性化妆迁移用于面部隐私保护

DiffAM: Diffusion-based Adversarial Makeup Transfer for Facial Privacy Protection 摘要-Abstract引言-Introduction相关工作-Related Works人脸识别中的对抗攻击化妆迁移扩散模型和风格迁移 方法-Method问题表述DiffAM文本引导的化妆去除图像引导的对抗性化妆转移 实验-Ex…

ffmpeg之播放一个yuv视频

播放YUV视频的步骤 初始化SDL库&#xff1a; 目的&#xff1a;确保SDL库正确初始化&#xff0c;以便可以使用其窗口、渲染和事件处理功能。操作&#xff1a;调用 SDL_Init(SDL_INIT_VIDEO) 来初始化SDL的视频子系统。 创建窗口用于显示YUV视频&#xff1a; 目的&#xff1a;…

Java高级工程师1380道面试题(附答案)分享

Java 面试八股文有必要背吗&#xff1f; 我的回答是&#xff1a;很有必要。你可以讨厌这种模式&#xff0c;但你一定要去背&#xff0c;因为不背你就进不了大厂。现如今&#xff0c;Java 面试的本质就是八股文&#xff0c;把八股文面试题背好&#xff0c;面试才有可能表现好。…