CSS的网页美化功能

news/2024/9/22 17:20:38/

<1>文字类

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

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

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

三个属性：

效果属性值

 正常 - 正常显示文本

normal

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

italic

倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

oblique

举例：

css"><!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: 属性值;} 【作为类使用】

举例：

css"><!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;

举例：

css"><!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下不能重新调整字体的大小。

举例：

css"><!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’高度值一样大小的字体

举例：

css"><!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: 字体样式 (种类)【阿拉伯语属于英语类】

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

举例：

css"><!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

举例：

css"><!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

举例：

css"><!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文本两端对齐

举例：

css"><!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设置固定的行距
%基于当前字体大小的百分比设置行高

css"><!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.ppmy.cn/news/1434809.html

相关文章

CTFshow-PWN-栈溢出（pwn43）

CTFshow-PWN-栈溢出（pwn43）

32位的 system(); 但是好像没"/bin/sh" 上面的办法不行了&#xff0c;想想办法 检查&#xff1a;32 位程序 ida 分析&#xff1a; 跟进 ctfshow 函数 定义了一个长度为 104 的字符数组 s&#xff0c;gets() 函数被用来从标准输入&#xff08;键盘&#xff09;中读取…
阅读更多...
Python中的Exception和Error

Python中的Exception和Error

在Python中&#xff0c;Exception和Error都是用来描述程序运行时出现的异常情况。它们的主要区别在于&#xff0c;Exception通常用于表示可预见的异常情况&#xff0c;而Error通常用于表示不可预见的异常情况。 具体来说&#xff0c;以下情况通常需要定义Exception&#xff1a…
阅读更多...
Python 二叉树的基本操作实现

Python 二叉树的基本操作实现

在Python中实现二叉树的基本操作通常涉及以下步骤&#xff1a; 定义二叉树节点&#xff1a;创建一个类来表示二叉树的节点&#xff0c;通常包含一个数据属性和指向左右子节点的指针。 创建二叉树&#xff1a;允许用户输入数据来构建二叉树。 遍历二叉树&#xff1a;实现前序、…
阅读更多...
【前端技术】CSS基础入门篇

【前端技术】CSS基础入门篇

一、 CSS简介 css&#xff08;Cascading Style Sheets&#xff0c;缩写为 CSS&#xff0c;也叫作层叠样式表&#xff09;是一套美化HTML标签所编写出页面的语法&#xff0c;CSS描述了如何在不同设备上渲染内容的方法。 二、 CSS基本引入方法 <!-- Cascading style shet:层…
阅读更多...
QWidget | Qt::WindowType 枚举的取值及意义QFlags 模板类详解

QWidget | Qt::WindowType 枚举的取值及意义QFlags 模板类详解

01 与 QWidget 类有关的部分类的继承图 3、QObject 是所有 Qt 对象的基类，QPaintDevie 是所有可绘制对象的基类。 4、QWidget 类是所有用户界面对象的基类，QWidget 及其子类是开发桌面应用的核心，这些类都位于 QtWidgets 模块内，注意：QtWidgets 是模块，QWidget 是类(少一…
阅读更多...
2024蓝桥杯每日一题（分解质因数）

2024蓝桥杯每日一题（分解质因数）

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;约数个数 试题二&#xff1a;分解质因数 试题三&#xff1a;质因数个数 试题四&#xff1a;完全平方数 试题五&#xff1a;阶乘分解 试题一&#xff1a;约数个数 【题目描述】…
阅读更多...
小白人群想找通信网优的工作，需要注意什么？

小白人群想找通信网优的工作，需要注意什么？

6月毕业季&#xff0c;距离各大院校学生毕业时间不足2个月&#xff0c;有些求职者已经开始投递简历&#xff0c;明确自己未来的发展方向。 一些小伙伴们也纷纷后台私信我们想找通信网优的工作&#xff0c;因为学校开设的相关课程比较少&#xff0c;不知道学什么才比较好找这方面…
阅读更多...
[NSSCTF]-Reverse:[HUBUCTF 2022 新生赛]simple_RE（base64换表）

[NSSCTF]-Reverse:[HUBUCTF 2022 新生赛]simple_RE（base64换表）

无壳 查看ida 可以看得出是base64&#xff0c;而且是换表的。 完整exp&#xff1a; import base64 result5Mc58bPHLiAx7J8ocJIlaVUxaJvMcoYMaoPMaOfg15c475tscHfM/8 biaostr.maketrans(qvEJAfHmUYjBacu8Ph5n9Od17FrICL/X0gVtM4Qk6T2z3wNSsyoebilxWKGZpRD,ABCDEFGHIJKLMNOPQR…
阅读更多...
最新文章

Copyright @ 2022~2023