当前位置: 首页 > 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) © …...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...