登录  /  注册
首页 > web前端 > css教程 > 正文

css中美化网页的元素有哪些?css中可以美化网页的元素总结

不言
发布: 2018-08-24 09:56:10
原创
2381人浏览过

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

1.本章目标

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

会使用CSS设置超链接样式

会使用CSS设置列表样式

会使用CSS设置背景样式

会使用CSS设置渐变效果

2.标签

标签 的作用

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

示例:

<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在php中文网,有一群人默默支持你成就
      <span id="dream">梦想</span></p>
<p class="bird">选择<span>php中文网</span>,成就你的梦想</p>
登录后复制

3.字体样式

4.字体类型

font-family属性

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
登录后复制

5.字体大小

font-size属性

单位: px(像素)、em、rem、cm、mm、pt、pc

6.字体风格

font-style属性

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

示例:

7.字体的粗细

font-weight属性

8.字体属性

font属性 family weight size style

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

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

9.文本样式

文本属性

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.排版文本段落

12.文本修饰和垂直对齐

文本装饰

text-decoration属性

垂直对齐方式

vertical-align属性:middle、top、bottom

13.文本阴影

浏览器兼容性

14.超链接伪类

15.使用CSS设置超链接

16.列表样式2-1

list-style-type

list-style-image

17.列表样式2-2

   list-style:
li {
list-style:none;
}
登录后复制

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属性

21.设置背景

背景属性

background属性

23.背景尺寸

背景尺寸 background-size

24.CSS3渐变

线性渐变

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

径向渐变

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

浏览器兼容性

25.CSS3渐变兼容

IE浏览器是Trident内核,加前缀:-ms-

Chrome浏览器是Webkit内核,加前缀:-webkit-

Safari浏览器是Webkit内核,加前缀:-webkit-

Opera浏览器是Blink内核,加前缀:-o-

Firefox浏览器是Mozilla内核,加前缀:-moz-

26.线性渐变

左上向右下方向渐变: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>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:</p>
 
<div id="grad1"></div>
 
<p><strong>注意:</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>
登录后复制

总结

相关推荐:

CSS3如何实现全景图的动画效果(附代码)

如何使用纯CSS3实现图片轮播的效果

以上就是css中美化网页的元素有哪些?css中可以美化网页的元素总结的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号