CSS的网页美化功能

<1>文字类

通常情况下,一般使用span对文字进行重点突出,用div来操作一段代码块。

字体的所有属性:
属性描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。
字体风格:

格式为:标签名.class名{font-style:属性值;}

三个属性:

效果属性值

 正常 - 正常显示文本

normal

斜体 - 以斜体字显示的文字

italic

倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)

oblique

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p.r1{font-style: normal;}p.r2{font-style: italic;}p.r3{font-style:oblique;}</style>
</head>
<body><p class="r1">p1正常字体</p><p class="r2">p2这是斜体</p><p class="r3">p3这是倾斜的文字</p>
</body>
</html>

 

字体粗细:

属性值:

属性值描述
normal默认系统的粗细
bold加粗字体
bloder更粗的字体
lighter比默认的字体更细
inherit继承父级标签的字体粗细
100~ 900300为lighter,400为normal,700为bold,900为bolder

格式:

                  1)标签名{font-weight: 属性值; }  【所有此标签都有效果】

                  2)标签名.class名{font-weight: 属性值;} 【作为类使用】

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-weight: bold;}</style>
</head>
<body><p>p1正常字体</p>
</body>
</html>
字体大小:

格式:

标签名{front-size:属性值;}

属性值:

预定义关键字,绝对单位,相对单位。

预定义关键字:

以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字font-size的时候,该元素 就不会继承父元素的字体大小。 【如下】

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size:x-large;}</style>
</head>
<body><p>p1正常字体</p>
</body>
</html>


绝对单位:

fone-size能被设置成下面得绝对大小

属性值举例
mm: 毫米10mm.
cm: 厘米1cm ( = 10mm).
in: 英寸(inch)0.39in ( ~= 10mm).
pt: point(点), 1pt 相当于 1/72 英寸12pt.
pc: pica(十二点活字), 1pc 是 12pt1pc
px: pixel(像素)14px.

注意事项:

一般说来上面得这些度量单位都有些问题。比如:毫米,厘米,英寸是对于不同媒体介质是不精确地,由于分辨率的设置不 同,pt和pc就是相对不可靠地。pix来起来是最合适的,但是它能导致一些辅助性问题:IE下不能重新调整字体的大小。

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size:5cm;}</style>
</head>
<body><p>p1</p>
</body>
</html>


相对单位:

ont-size属性能被设置成相对于父节点的字体大小的相对大小。

属性值:

属性值解释
em1em相当于当前字体的1倍大小的字体。2em相当于当前字体的2倍字体大小的字体
%100%相当于当前字体大小, 200% 相当于2倍字体的大小
xe1ex 相当于当前字体中字母 ‘x’高度值一样大小的字体

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size:4em;}</style>
</head>
<body><div><p>p1</p></div></body>
</html>

字体样式:

这个就类似于我们world文档中的字体样式了。【如下图】

格式:

font-family: 字体样式 (种类)【阿拉伯语属于英语类】

种类的详细可以看这里:点此跳转

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-family: Georgia, 'Times New Roman', Times, serif;}</style>
</head>
<body><div><p>p1</p></div></body>
</html>


<2>文本

颜色的应用:

颜色的应用方面使用color来进行使用,其中属性值有 英文字母、RGB表示法、RGBa表示法和十六进制表示法。

属性值表示含义,以及范围举例
英文字母预定义的颜色名red、grenn、blue、yellow
RGB红绿蓝三原色,取值范围在0~255rgb(0,0,0)、rgb(223,233,233)
RGBaRGB的三项+a,a表示透明度,a的取值范围为0~1rgba(233,233,0.3),rgba(225,0,0,0.2)
十六进制以#作为开头,转化为十六进制来表示

#000000,#ff0000

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;}div{color: rgb(11, 12, 78); }span{color: rgba(22, 11, 90, 0.3);}a{color: #0b583c;}</style>
</head>
<body><p>p</p><div>div</div><span>span</span><br><a href="">a</a></body>
</html>
排版:

我们在world文档或者PPT中我们都会对我们的内容进行排版编排之类,使我们的内容变得更加的美观。

缩进:

使用text-indent属性

用法:

text-indent:数字+px

text-indent:数字+em

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{text-indent: 20px;}p{text-indent: 30em;}</style>
</head>
<body>########################################################<p>p,30em</p><div>div,20px</div></body>
</html>
对齐:

使用text-align属性

属性值:

属性值作用
left文本左对齐
center文本居中对齐
right文本右对齐
justlify文本两端对齐

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1{text-align: left;}.p2{text-align: center;;}.p3{text-align: right;}.p4{text-align: justify;}</style>
</head>
<body><p class="p1">p1,left</p><p class="p2">p2,center</p><p class="p3">p3,right</p><p class="p4">p4,justify</p>
</body>
</html>
行高:

使用line-height属性

属性值:

属性值效果
normal默认行高
number设置数字。此数字会与当前字体的大小相乘来设置行高
length设置固定的行距
%基于当前字体大小的百分比设置行高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{background-color: aquamarine;line-height:300% ;}.div2{background-color: rgb(195, 127, 255);}</style>
</head>
<body><div class="div1"><p>p1</p><p>p2</p></div><div class="div2"><p>p1</p><p>p2</p></div>
</body>
</html>
修饰:

使用text-decoration属性

属性值:

属性值效果
underline下划线
line-through删除线
overline上划线
none无装饰线

举例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{text-decoration: overline;}.div2{background-color: rgb(195, 127, 255);}</style>
</head>
<body><div class="div1"><p>p1</p><p>p2</p></div></div>
</body>
</html>


<3>列表(略写)

属性:

属性值解释
none去掉列表前的标记(例如:有序列表前的1、2、3……无序列表前的圆点……)
disc将列表前的标记变为 实心圆(列表前的标记默认为实心圆)
circle

将列表前的标记变为 空心圆

square将列表前的标记变为 实心方块
decimal将列表前的标记变为相应位置的 序号
initia

默认标记(对列表前的标记不做改变)


<4>背景图片的应用和渐变类

背景:                                                 
属性值相关
background-color或者使用background来代替
background-position

background-position-x:只左右移动


background-position-y:只移动上下移动

backgroud-imgage:图片地址 图片设置默认为平铺满
background-repeat 

background-repeat:no-repeat 不平铺(只显示一张图片)


background-repeat:repeat-x 水平平铺


background-repeat:repeat-y 垂直平铺

nbackgroud-size:图宽度 图高度 图片大小

可以使用px来描述

 这些属性都可以写在同一个background中

渐变:

至于如何实现渐变的问题可以直接在网上搜索调试,我建议如下网站:点击此处跳转

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

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

相关文章

5-内核开发-/proc File System 学习

5-内核开发-/proc File System 学习 课程简介&#xff1a; Linux内核开发入门是一门旨在帮助学习者从最基本的知识开始学习Linux内核开发的入门课程。该课程旨在为对Linux内核开发感兴趣的初学者提供一个扎实的基础&#xff0c;让他们能够理解和参与到Linux内核的开发过程中。…

经典案例|使用Supabase解决可视化大屏项目的常见问题

敏博科技专业致力于应急管理行业&#xff0c;提供以物联网技术和感知预警算法模型为核心的先进产品和解决方案。应急管理行业的业务非常繁多和复杂&#xff0c;很多时候都需要在短时间内交付出稳定高效的业务系统。如下两张图某市的安全生产监测预警系统 MemFire Cloud应用开…

spring boot项目怎么预防CSRF攻击

在Spring Boot项目中预防CSRF攻击通常涉及利用Spring Security框架提供的内置支持。Spring Security已经为CSRF提供了默认的防护措施&#xff0c;但根据应用的特定需求&#xff0c;可能需要进行一些配置调整或扩展。下面是一系列步骤和建议&#xff0c;用于在Spring Boot项目中…

Redis入门到通关之Redis数据结构-Hash篇

文章目录 ☃️ 概述☃️底层实现☃️源码☃️其他 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的延伸的后…

关于电脑卡死如何开机、F8、安全模式

问题来源和原因 亲戚家台式电脑无法开机了 原因&#xff1a;游戏、等等等东西太多占用内存&#xff0c;导致系统无法开机 比如常见的开机蓝屏&#xff0c;不能正常开机&#xff0c;这个时候我们可以采取通过安全模式启动的办法来启动电脑&#xff0c;从而进一步找到问题并排查故…

如何用基于 Java 配置的方式配置 Spring?

Spring 对 Java 配置的支持是由 Configuration 注解和 Bean 注解来实现的。 有 Bean 注解的 方法将会实例化、配置和初始化一个 新对象&#xff0c;这个对象将由 Spring 的 IoC 容器来管理。Bean 声明所起到的作用与 <bean/> 元素类似。被 Configuration 所注解的类则表…

模型部署的艺术:让深度学习模型跃入生产现实

模型部署的艺术&#xff1a;让深度学习模型跃入生产现实 1 引言 1.1 部署的意义&#xff1a;为何部署是项目成功的关键 在深度学习项目的生命周期中&#xff0c;模型的部署是其成败的关键之一。通常&#xff0c;一个模型从概念构思、数据收集、训练到优化&#xff0c;最终目的…

电子信息制造工厂5G智能制造数字孪生可视化平台,推进数字化转型

电子信息制造工厂5G智能制造数字孪生可视化平台&#xff0c;推进数字化转型。5G智能制造数字孪生可视化平台利用5G网络的高速、低延迟特性&#xff0c;结合数字孪生技术和可视化界面&#xff0c;为电子信息制造工厂提供了一种全新的生产管理模式。不仅提升生产效率&#xff0c;…

nodejs 中间件

一、是什么 Node.js 中的中间件&#xff0c;特别是针对 Web 开发框架&#xff08;如 Express、Koa、Hapi 等&#xff09;的中间件&#xff0c;其核心功能是用来对 HTTP 请求生命周期进行拦截、处理和传递的。 中间件这一概念是 Web 开发框架为了实现请求处理流程的模块化、可…

SpringBoot学习之Kafka下载安装和启动【Windows版本】(三十四)

一、配置Java环境变量 打开CMD输入java -version检查java环境变量是否配置正确,如果配置正确在CMD窗口输入java -version应该输出如下: ​ 怎么配置Java环境变量这里我就不赘叙了,网上教程很多,请读者自行搜索操作。 二、下载Kafka 1、Kafka官网地址:Apache Kafka,…

解决DataGrip连接MySQL8时出现时区错误问题

解决办法&#xff1a;在url后面拼接时区参数 ?serverTimezoneAsia/Shanghai

阿里云域名动态解析

前景说明&#xff1a; 你有一个阿里云的域名&#xff0c;想让它解析到你家用宽带动态ip上。 解决思路&#xff1a; 1、定时查看宽带的ip&#xff1b; 2、发现变化时&#xff0c;通过阿里云提供的sdk修改域名解析。 一、阿里云控制台创建AccessKey 官方文档&#xff1a;创…

智能合约:概念与特点(了解什么是智能合约以及它的特点,如自动执行、不可篡改和可信任)

1.自动执行 智能合约通过预定义的代码和规则&#xff0c;在满足特定条件时自动执行。无需第三方介入&#xff0c;合约中的操作将在预定条件满足时自动触发。 2.不可篡改 智能合约的代码一旦部署在区块链上&#xff0c;便不可更改。这意味着合约一旦被创建&#xff0c;其中的规则…

DS进阶:AVL树和红黑树

一、AVL树 1.1 AVL树的概念 二叉搜索树&#xff08;BST&#xff09;虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下。因此&#xff0c;两位俄罗斯的数学家G.M.Adelson-…

Spring Security mybatis nginx等组件预防注入攻击

防止注入攻击&#xff0c;特别是SQL注入&#xff0c;是保证应用程序安全的关键任务之一。在使用Spring Security、MyBatis和Nginx的技术栈中&#xff0c;可以通过多个层面的防护措施来确保应用的安全性。下面是各个组件在防止注入攻击方面可以采取的措施&#xff1a; 1. MyBat…

网站安全方案

1、网络入口层安全 防火墙配置 防火墙作为防御网络不良流量的第一道屏障&#xff0c;其配置和管理应符合以下策略&#xff1a; 定义全面的安全策略&#xff1a;详细定义哪些流量是合法的&#xff0c;哪些应被阻止&#xff0c;考虑到不同业务线的需求&#xff0c;如电子商务平台…

easyx库的学习(鼠标信息)

前言 本次博客是作为介绍easyx库的使用&#xff0c;最好是直接代码打到底&#xff0c;然后看效果即可 代码 int main() {initgraph(640, 480, EX_SHOWCONSOLE|EX_DBLCLKS);setbkcolor(RGB(231, 114, 227));cleardevice();//定义消息结构体ExMessage msg { 0 };//获取消息wh…

大语言模型微调过程中的 RLHF 和 RLAIF 有什么区别?

目前想要深入挖掘大型语言模型&#xff08;LLM&#xff09;的全部潜力需要模型与我们人类的目标和偏好保持一致。从而出现了两种方法&#xff1a;来自人类反馈的人力强化学习&#xff08;RLHF&#xff09;和来自人工智能反馈的人工智能驱动的强化学习&#xff08;RLAIF&#xf…

FPGA秋招-笔记整理(1)

一、关键路径 关键路径通常是指同步逻辑电路中&#xff0c;组合逻辑时延最大的路径&#xff08;这里我认为还需要加上布线的延迟&#xff09;&#xff0c;也就是说关键路径是对设计性能起决定性影响的时序路径。也就是静态时序报告中WNS&#xff08;Worst Nagative Slack&…

如何从架构层面降低公有云多可用区同时故障的概率

阿里云和腾讯云都曾出现过因一个组件故障而导致所有可用区同时瘫痪的情况。本文将探讨如何从架构设计的角度减小故障域&#xff0c;在故障发生时最小化业务损失&#xff0c;并以 Sealos 的稳定性实践为例&#xff0c;分享经验教训。 抛弃主从&#xff0c;拥抱点对点架构 从腾…