当前位置: 首页 > news >正文

CSS 美化网页元素【快速掌握知识点】

目录

一、为什么使用CSS

二、字体样式

三、文本样式

color属性

四、排版文本段落

五、文本修饰和垂直对齐

1、文本装饰

2、垂直对齐方式

六、文本阴影

七、超链接伪类

1、语法

2、示例

3、访问时,蓝色;访问后,紫色;

八、列表样式

九、网页背景

1、背景颜色:background-color

2、背景图像:background-image属性

3、背景重复方式

十、渐变


一、为什么使用CSS

有效的传递页面信息,使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户,可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容,具有良好的用户体验。

二、字体样式

属性名

含义

举例

font-family

设置字体类型

font-family:"隶书";

font-size

设置字体大小

font-size:12px;

font-style

设置字体风格

font-style:italic;

font-weight

设置字体的粗细

font-weight:bold;

font

在一个声明中设置所有字体属性

font:italic bold 36px "宋体";

font属性:字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

三、文本样式

属性

含义

举例

color

设置文本颜色

color:#00C;

text-align

设置元素水平对齐方式

text-align:right;

text-indent

设置首行文本的缩进

text-indent:20px;

line-height

设置文本的行高

line-height:25px;

text-decoration

设置文本的装饰

text-decoration:underline;

color属性

RGB

十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量

rgb(r,g,b) : 正整数的取值为0~255

RGBA

在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1

四、排版文本段落

说明

left

把文本排列到左边。默认值:由浏览器决定

right

把文本排列到右边

center

把文本排列到中间

justify

实现两端对齐文本效果

五、文本修饰和垂直对齐

1、文本装饰

text-decoration属性

2、垂直对齐方式

vertical-align属性:middle、top、bottom

说明

none

默认值,定义的标准文本

underline

设置文本的下划线

overline

设置文本的上划线

line-through

设置文本的删除线

六、文本阴影

text-shadow : color x-offset y-offset blur-radius;

七、超链接伪类

1、语法

标签名:伪类名{声明;}

2、示例

a:hover {color:#B46210;text-decoration:underline;
}

3、访问时,蓝色;访问后,紫色;

设置伪类的顺序:a:link->a:visited->a:hover->a:active

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9ef5f9;}

a:visited

单击访问后超链接样式

a:visited {color:#333;}

a:hover

鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;}

a:active

鼠标单击未释放的超链接样式

a:active {color:#999;}

八、列表样式

说明

语法示例

none

无标记符号

list-style-type:none;

disc

实心圆,默认类型

list-style-type:disc;

circle

空心圆

list-style-type:circle;

square

实心正方形

list-style-type:square;

decimal

数字

list-style-type:decimal

去除列表前面的小黑点

li {list-style:none;
}

九、网页背景

1、背景颜色:background-color

2、背景图像:background-image属性

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

3、背景重复方式

background-repeat属性

repeat:沿水平和垂直两个方向平铺

no-repeat:不平铺,即只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

十、渐变

linear-gradient ( position, color1, color2,…)

 

 

相关文章:

CSS 美化网页元素【快速掌握知识点】

目录 一、为什么使用CSS 二、字体样式 三、文本样式 color属性 四、排版文本段落 五、文本修饰和垂直对齐 1、文本装饰 2、垂直对齐方式 六、文本阴影 七、超链接伪类 1、语法 2、示例 3、访问时,蓝色;访问后,紫色; …...

Tableau连接openGauss实践

目录 一、摘要 二、什么是Tableau? 三、安装Tableau 四、安装ODBC驱动 1、openGauss数据库 2、连接前置条件 3、Tableau连接openGauss方式一 4、Tableau连接openGauss方式二 一、摘要 Tableau可以连接到多种数据库,包括关系型数据库&#xff0…...

RabbitMQ 实现延迟队列

业务场景&#xff1a;1.生成订单30分钟未支付&#xff0c;则自动取消&#xff0c;我们该怎么实现呢&#xff1f;2.生成订单60秒后,给用户发短信1 安装rabbitMqwindows安装ubuntu中安装2 添加maven依赖<!-- https://mvnrepository.com/artifact/org.springframework.boot/spr…...

Spring Bean 生命周期,好像人的一生

简单说说IoC和Bean IoC&#xff0c;控制反转&#xff0c;想必大家都知道&#xff0c;所谓的控制反转&#xff0c;就是把new对象的权利交给容器&#xff0c;所有的对象都被容器控制&#xff0c;这就叫所谓的控制反转。 控制反转 Bean&#xff0c;也不是什么新鲜玩意儿&#xf…...

C++算法基础课 05 —— 数据结构1_单链表/双链表/栈/单调栈/队列/单调队列/KMP

文章目录 1. 单链表(用数组模拟链表)1.1 模板1.1.1 插入操作1.1.2 删除操作1.2 习题1 —— 826.单链表2. 双链表2.1 模板2.1.1 插入操作2.1.2 删除操作2.2 习题1 —— 827.双链表3. 栈(用数组模拟栈)3.1 模板3.2 习题1 —— 828.模拟栈4. 单调栈4.1 模板4.2 习题1 —— 830.单调…...

小型水库大坝安全监测的主要对象

一、监测背景 大坝监测的目的分成两个大的方面&#xff0c;一方面是为了验证设计、指导施工、为科研提供必要的资料&#xff1b;另一方面&#xff0c;也可以说是更重要的方面&#xff0c;就是为了长期监视大坝的安全运行。因此&#xff0c;一个成功的监测设计者不仅要能充分领会…...

常见软件开源(alpha,beta等)版本介绍

一、开发期Alpha&#xff1a;是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用。Beta&#xff1a;也是测试版&#xff0c;这个阶段的版本会一直加入新的功能。在Alpha版之后推出。-RC(ReleaseCandidate)&#xff1a;最终测试版本&#xff1b;可能成为最终产品的…...

凌恩生物资讯|抗性宏基因组又一力作|抗性基因+可移动元件研究新成果!

凌恩生物合作客户&#xff1a;合肥工业大学崔康平老师团队利用凌恩生物宏基因组抗性基因研究解决方案&#xff0c;对污水处理厂活性污泥中的钆&#xff08;Gd&#xff08;III&#xff09;&#xff09;和抗生素磺胺甲噁唑&#xff08;SMX&#xff09;的联合污染情况进行了调查&a…...

常见前端基础面试题(HTML,CSS,JS)(二)

ES6 新增哪些东西 箭头函数字符串模板支持模块化&#xff08;import、export&#xff09;类&#xff08;class、constructor、extends&#xff09;let、const 关键字新增一些数组、字符串等内置构造函数方法&#xff0c;例如 Array.from、Array.of 、Math.sign、Math.trunc 等…...

按关键词搜索,商品详情采集,API接口

公共参数 名称类型必须描述keyString是 调用key&#xff08;必须以GET方式拼接在URL中&#xff09; 注册Key和secret测试&#xff1a; https://o0b.cn/anzexi secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,item_g…...

C++的纯虚函数使用与接口实现

虚函数主要是为了父类指针访问子类同名成员方法而引入的&#xff0c;即通过重写了父类的方法&#xff0c;从而实现多态。 01 为何引入纯虚函数 对于普通虚函数&#xff0c;如果子类没有重写相应的虚函数&#xff0c;那么父类指针就只能调用父类函数实现&#xff0c;然而父类有…...

Exception has occurred: ModuleNotFoundErrorNo module named ‘urllib3‘【已解决】

问题描述 实际上只是想要测试一下torch是否安装成功&#xff0c;输出相应版本。谁知道就报错了。 Exception has occurred: ModuleNotFoundError No module named urllib3 解决方案 &#xff08;1&#xff09;使用pip或者conda卸载urllib3 pip uninstall urllib3conda unin…...

CSS 盒子模型【快速掌握知识点】

目录 一、什么是盒子模型 二、边框border-color 三、边框粗细border-width 四、边框样式border-style 五、外边距margin 六、内边距padding 七、圆角边框 八、圆形 九、盒子阴影 一、什么是盒子模型 css盒子模型又称为框模型&#xff0c;盒子的最内部是元素的实际内容…...

公网远程连接Oracle数据库【内网穿透】

文章目录1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程OracleOracle&#xff0c;是甲骨文公司的一款关系数据库管理系…...

国内售价仅10元的鸭子滑梯玩具TK卖到20美元,相关视频获400万+播放!

在TikTok上玩具一直是增速极快的一个类目&#xff0c;不同于很多其他品类在疫情期间取得了巨大增长但在疫情后销售大幅下降的现象不同&#xff0c;全球玩具市场继续表现并保持稳定的较高的销售水平。美国市场研究机构NPD的统计&#xff0c;2021年&#xff0c;全球玩具市场的销售…...

直播平台的视频美颜sdk是什么?

直播平台的视频美颜sdk是什么&#xff0c;可以做什么&#xff1f;简而言之&#xff0c;直播美颜sdk是将直播平台的视频美颜效果做成一个sdk&#xff0c;给用户提供美颜效果选择&#xff0c;同时提供不同的视频分辨率&#xff0c;可以让用户在观看直播时有更好的体验。那么具体有…...

实现Vue组件库

实现Vue组件库 如何实现一个Vue组件库 Vue组件库是一种常见的前端工具&#xff0c;可以提供可复用的UI组件来简化应用程序的开发和维护。本文将介绍如何实现一个基本的Vue组件库。 步骤一&#xff1a;创建Vue项目 首先&#xff0c;我们需要使用Vue CLI创建一个Vue项目。打开…...

面试 | 移位妙解递归乘法【细节决定成败】

不用[ * ]如何使两数相乘❓一、题目明细二、思路罗列 & 代码解析1、野蛮A * B【不符合题意】2、sizeof【可借鉴】解析3、简易递归【推荐】① 解析&#xff08;递归展开图&#xff09;② 时间复杂度分析4、移位<<运算【有挑战性&#x1f4aa;】① 思路顺理② 算法图解…...

项目缓存问题处理

1、public/index.html文件头部配置 <meta http-equiv"pragram" content"no-cache"> <meta http-equiv"cache-control" content"no-cache,no-store,must-revalidate"> <meta http-equiv"expires" content&…...

DS期末复习卷(八)

一、选择题(30分) 1.字符串的长度是指&#xff08; C &#xff09;。 (A) 串中不同字符的个数 (B) 串中不同字母的个数 (C ) 串中所含字符的个数 (D) 串中不同数字的个数 2.建立一个长度为n的有序单链表的时间复杂度为&#xff08; C &#xff09; (A) O(n) (B) O(1) © …...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...