Web学习笔记（三）：页面美化

最新推荐文章于 2024-03-18 09:00:00 发布

不会爬墙的岛田

最新推荐文章于 2024-03-18 09:00:00 发布

阅读量863

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43790325/article/details/107568664

版权

一、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 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

不会爬墙的岛田

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Web学习笔记（三）：页面美化

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

扫一扫