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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...