CSS美化页面（字体样式、文本样式、文本阴影、超链接伪类、列表样式、网页背景、CSS3渐变）

最新推荐文章于 2024-03-06 20:28:35 发布

Marvellous丶

最新推荐文章于 2024-03-06 20:28:35 发布

阅读量7.2k

点赞数 6

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/92800916

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

CSS美化页面

一、span 和 div

span标签

行内元素，能让某几个文字或者某个词语凸显出来，内容显示在同一行

div标签

块级标签，默认占一行,自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>Hello</div>
    <div>CSS</div>
    <span>Hello</span>
    <span>CSS</span>
</body>
</html>

运行结果：
在这里插入图片描述

二、字体样式

font-family 设置字体类型
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体的粗细
font 在一个声明中设置所有字体属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        p.serif{font-family:"Times New Roman",Times,serif;}
        p[class=sansserif]{font-family:Arial,Helvetica,隶书;}
        p[id=daxiao]{font-size: 15px}
        p[id=cuxi]{font-weight: bolder}
    </style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 隶书</p>
<p id="daxiao">字体大小</p>
<p id="cuxi">字体粗细</p>
</body>
</html>

运行结果：
在这里插入图片描述

三、文本样式

color 设置文本颜色例：color:#00C;
text-align 设置元素水平对齐方式例：text-align:right;
text-indent 设置首行文本的缩进例：text-indent:20px;
line-height 设置文本的行高例：line-height:25px;
text-decoration 设置文本的装饰例：text-decoration:underline;
vertical-align 设置文本对齐例：vertical-align ： middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {color:red;}
        h1 {color:#00ff00;}
        p.ex {color:rgb(0,0,255);}
        p.main{text-align: left;text-indent: 20px;line-height: 25px;text-decoration: underline}
    </style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
</body>
</html>

运行结果：
在这里插入图片描述

四、文本阴影

text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在 CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
h1
{
	text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p>

</body>
</html>

运行结果：
在这里插入图片描述

五、超链接伪类

a:link 未单击访问时超链接样式例：a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式例：a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式例：a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式例：a:active {color:#999;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

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

六、列表样式

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style-type 设置列表项标志的类型

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

运行结果：
在这里插入图片描述

七、网页背景

background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
backgrounf-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
body
{
	background : pink;
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

</html>

运行结果：
在这里插入图片描述

八、背景尺寸

background-size
属性值
- auto 默认值，使用背景图片保持原样
- percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
- cover 整个背景图片放大填充了整个元素
- contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

九、CSS3渐变分类及兼容性

线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本

属性	IE	Chrome	Firefox	Safari	Opera
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

十、线性渐变

默认情况下从上到下渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

运行结果：
在这里插入图片描述

Marvellous丶

关注

6
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
CSS美化页面（字体样式、文本样式、文本阴影、超链接伪类、列表样式、网页背景、CSS3渐变）

CSS美化页面一、span 和 divspan标签行内元素，能让某几个文字或者某个词语凸显出来，内容显示在同一行div标签块级标签，默认占一行,自动换行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&...
复制链接

扫一扫