css中美化网页的元素有哪些

小编给大家分享一下css中美化网页的元素有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站专注于企业全网营销推广、网站重做改版、汉中网站定制设计、自适应品牌网站建设、html5、购物商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为汉中等各大城市提供网站开发制作服务。

本篇文章给大家带来的内容是关于css中美化网页的元素有哪些？css中可以美化网页的元素总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.本章目标

会使用CSS设置字体样式和文本样式

会使用CSS设置超链接样式

会使用CSS设置列表样式

会使用CSS设置背景样式

会使用CSS设置渐变效果

2.<span>标签

<span>标签的作用

能让某几个文字或者某个词语凸显出来

示例：

<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在创新互联，有一群人默默支持你成就
      <span id="dream">梦想</span></p>
<p class="bird">选择<span>创新互联</span>，成就你的梦想</p>

3.字体样式

css中美化网页的元素有哪些

4.字体类型

font-family属性

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

5.字体大小

font-size属性

单位： px（像素）、em、rem、cm、mm、pt、pc

css中美化网页的元素有哪些

6.字体风格

font-style属性

normal、italic(库里自带的)和oblique(自动将字体变斜体)

示例：

css中美化网页的元素有哪些

7.字体的粗细

font-weight属性

css中美化网页的元素有哪些

8.字体属性

font属性familyweightsizestyle

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

p span {font:oblique bold 12px "楷体";}

9.文本样式

文本属性

css中美化网页的元素有哪些

10.文本颜色

color属性

RGB

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb(r,g,b) : 正整数的取值为0～255

RGBA

在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

示例：

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);--------------最深的颜色
color:rgba(0,0,255,0.5);-----------透明度

11.排版文本段落

css中美化网页的元素有哪些

12.文本修饰和垂直对齐

文本装饰

text-decoration属性

垂直对齐方式

vertical-align属性：middle、top、bottom

css中美化网页的元素有哪些

13.文本阴影

css中美化网页的元素有哪些

浏览器兼容性

css中美化网页的元素有哪些

14.超链接伪类

css中美化网页的元素有哪些

15.使用CSS设置超链接

css中美化网页的元素有哪些

16.列表样式2-1

list-style-type

list-style-image

css中美化网页的元素有哪些

17.列表样式2-2

   list-style:
li {
list-style:none;
}

css中美化网页的元素有哪些

1、网页背景

R红--G绿--B蓝

背景颜色

background-color

背景图像

background-image

19.设置背景图像2-1

背景图像

background-image属性

background-image:url(图片路径);

背景重复方式

background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

20.设置背景图像2-2

背景定位

background-position属性

css中美化网页的元素有哪些

21.设置背景

背景属性

background属性

css中美化网页的元素有哪些

23.背景尺寸

背景尺寸 background-size

css中美化网页的元素有哪些

24.CSS3渐变

线性渐变

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

径向渐变

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

浏览器兼容性

css中美化网页的元素有哪些

25.CSS3渐变兼容

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

26.线性渐变

css中美化网页的元素有哪些

左上向右下方向渐变：linear-gradient( left top ,red, blue)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
    background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
</style>
</head>
 
<body>
<h4>线性渐变 - 头部到底部</h4>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
 
<div id="grad1"></div>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>

总结

css中美化网页的元素有哪些

以上是“css中美化网页的元素有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站名称：css中美化网页的元素有哪些
标题网址：https://www.cdcxhl.com/article14/jcjige.html

成都网站建设公司_创新互联，为您提供App开发、微信小程序、定制开发、动态网站、手机网站建设、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容