文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css中美化网页的元素是什么

2024-04-02 19:55

关注

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

  2.<span>标签

  <span>标签的作用

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

  示例:

  <p>享受<spanclass="show">“北大式”</span>教育服务</p>

  <p>在编程网,有一群人默默支持你成就

  <spanid="dream">梦想</span></p>

  <pclass="bird">选择<span>编程网</span>,成就你的梦想</p>

  3.字体样式

  4.字体类型

  font-family属性

  p{font-family:Verdana,"楷体";}

  body{font-family:Times,"TimesNewRoman","楷体";}

  5.字体大小

  font-size属性

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

  6.字体风格

  font-style属性

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

  示例:

  7.字体的粗细

  font-weight属性

  8.字体属性

  font属性familyweightsizestyle

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

  pspan{font:obliquebold12px"楷体";}

  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(lefttop,red,blue)

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8">

  <title>菜鸟教程(runoob.com)</title>

  <style>

  #grad1{

  height:200px;

  background:-webkit-linear-gradient(red,yellow,blue);

  background:-o-linear-gradient(red,yellow,blue);

  background:-moz-linear-gradient(red,yellow,blue);

  background:linear-gradient(red,yellow,blue);

  }

  </style>

  </head>

  <body>

  <h4>线性渐变-头部到底部</h4>

  <p>从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:</p>

  <divid="grad1"></div>

  <p><strong>注意:</strong>InternetExplorer9及更早版本IE浏览器不支持渐变。</p>

  </body>

  </html>

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯