文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML基本的样式设置有哪些

2024-04-02 19:55

关注

今天小编给大家分享一下HTML基本的样式设置有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

  一、html基本结构

  <!doctype html>

  <html>

  <head>

  <meta charset="utf-8"/>

  <title></title>

  </head>

  <body></body>

  </html>

  注:html大小写都可以 但是不要出现这种的(hTml)要么全都大写 要么全都小写 所有的标点符号都必须是英文状态下的!!!切记!

  !doctype 声明文档类型 千万不可以忘记

  meta charset="utf-8" 防止出现乱码(不写的话文件在浏览器里显示 文字可能都是以乱码形式出现 总之需要细心哦!)

  接下来说一下一些基本的样式设置
 

  1.font-size(字体大小)

  eg.font-size:数值+px(单位) 例如16px

  2.font-family:(字体)

  有个保底字体Arial

  多个字体用逗号隔开

  如果字体是以空格链接的,用单引号包裹,例如“微软 雅黑”;

  sans-serif ?可以让字体变得比较圆润

  serif ?  让字体棱角分明

  3.color (设置字体颜色) 可以直接用颜色名 eg.red

  或者十六进制编码(#666666)

  或者rgb(0,0,0)其中的值为0&mdash;&mdash;255 ?三原色

  4.font-weight(字体加粗)bold 加粗 ?默认值为normal

  5.text-align (字体对齐方式) 有三个值,分别为left right center?

  6.line-height(行高) ? 单行文本设置高度与容器高度一样,可以实现垂直居中的效果。

  7.text-decoration (设置下划线样式)underline(下划) overline(上划)line-through(中间划) none(去除样式)

  8.text-indent(文本缩进)eg. ?text-indent:5px

  9.letter-spacing(字符间距)?

  字符与字符之间横向的间距

  10.font-style(字体样式)

  italic ?斜体

  normal  (默认)

  注:字体具有继承的属性,假如父级设置了文本样式,子级如果不单独设置属于自己的文本样式,那么默认继承父级的。
 

  1.background-color(设置背景颜色) 样式与前面字体一样 ?

  另外还可以用

  rgba(222,222,222,.5) ?其中最后一个值可以设置背景颜色的透明度 具体的以后再跟大家细说。

  2.background-image (设置背景图片) eg.background-image:url(" 1.jpg")

  url中写需要用的图片的地址

  假如图片与html文件在同级 ?那么直接写图片的名字+后缀名

  假如图片在html文件的上一级 那么要在图片前面加返回上一级 ? 以此类推

  3.background-position(背景位置)left center right

  。4.background-repeat(背景重复)

  repeat(既横向重复 又纵向重复)

  repeat-x(横向重复)

  repeat-y(纵向重复)

  no-repeat(不设置重复)

  5.background-size(背景大小)

  eg.background:200px 300px ? ? width(宽度) heigh(高度)t的顺序

  注:背景不占空间?

  背景区域可以显示内容

  另外容器假如没有高度的话 显示不了背景图片!

以上就是“HTML基本的样式设置有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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