05.HTML基本样式

HTML样式

所谓样式,即HTML的展示形式,通过style属性定义,可直接与元素关联使用,也可定义在css文件里使用

  • 背景颜色
■ background-color属性为元素定义了背景颜色
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body style="background-color:gray">
        <h5 style="background-color:red">标题</h5>
        <p style="background-color:green">段落</p>
    </body>
</html>
■ 设置了整个<body>的标签背景色,即下层显示的灰色,单独设置<h5>,<p>元素的背景色,如图所展示
从图中可看出,属性值的设置有就近原则,优先展示离自己最近的属性设置,也可理解为优先展示最小单
位属性值设置
展示图片
  • 字体 颜色 尺寸
■ 字体:font-family  颜色:color  尺寸:font-size
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p style="font-family: '微软雅黑';font-size: 20px;color: blue;">
           字体,颜色,大小
        </p>
    </body>
</html>
■ 一个属性具有多个属性值,中间应以;分割
展示图片
  • 文本对齐
■ text-align属性定义文本的对齐方式,默认左对齐
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p style="text-align: center;">居中</p>
        <p>居左</p>
    </body>
</html>
展示图片
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,214评论 0 40
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,055评论 1 4