<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        /*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/

        .box1{

            font-family: Algerian,"宋体";

        }

         /*

       font-size   字体大小

           单位 px rem % em

           px   谷歌浏览器默认字体大小16px,最小是12px

           rem  相对于html(根标签)的字体大小

           em   等于父级的字体尺寸——相对于父级字体大小而言的

           %    相对于父容器中字体的%调整  这个要知道

       */

        .box2{

            font-size: 20px;

        }

        .box3{

            font-size: 12px;

        }

        .box4{

            font-size: 2rem;

        }

        #box{

            font-size: 30px;

        }

        #box div{

            /*font-size: 2em;*/

            font-size: 50%;

        }

        /*

        font-weight 字体粗细

        关键字

            normal 默认字体

            lighter 较细

            bold 加粗   这个要知道

            bolder 很粗

        给值

            只能100-900的整百数

            400相当于正常的

            700相当于bold

        */

        .box5{

            font-weight: bold;

        }

        .box6{

            font-weight: 700;

            font-style: italic;

        }

        /*

         font-style  字体类型

         normal 默认 文字正常

         italic  文字斜体（属性）

         oblique  文字斜体

     */

        /*

        color  文字颜色

        关键字

            英文单词  red green

        16进制（0-9 a-f）

            #5544aa  #54a #abd456

            #dddddd  #ddd

        rgb(0-255,0-255,0-255)

            r red

            g green

            b blue

        rgba(0-255,0-255,0-255,0-1)

            r red

            g green

            b blue

            a alpha(透明度)

                0 完全透明

                1 完全不透明

        */

        .box7{

            /*color: aqua;*/

            color: rgb(224, 62, 69);

        }

        .box8{

            /*color: #222add;*/

            color: rgba(224, 62, 69,0.2);

        }

    </style>

</head>

<body>

    <div class="box1">hello 001 abc</div>

    <div class="box2">hello 001 abc</div>

    <div class="box3">hello 001 abc</div>

    <div class="box4">hello 001 abc</div>

    <div class="box5">hello 001 abc</div>

    <div class="box6">hello 001 abc</div>

    <div class="box7">hello 001 abc</div>

    <div class="box8">hello 001 abc</div>

    <div id="box">

        <div>hello 001 abc</div>

    </div>

</body>

</html>

html-字体属性的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. delphi 01设置 字体属性

    设置/获取 字体属性 名称 大小 粗体 斜体 下划线 删除线 颜色1 颜色2   uses MSHTML;   //设置 //------------------------------------- ...

  3. CSS中的字体属性和文本属性

    1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...

  4. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  5. 复习-css控制文本字体属性

    css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...

  6. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  7. python全栈开发day40-浮动的四大特性，浮动带来的问题和解决问题，文本属性、字体属性和颜色介绍

    一.昨日内容总结 1.盒模型及其属性 2.文本级标签.行内块.块级标签 3.继承性.层叠性.权重 4.浮动四大特性 # 浮动元素脱离标准文档流 # 贴靠 # 字围效果 # 自动收缩或紧缩 二.今日内容 ...

  8. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  9. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  10. CSS样式----CSS属性：字体属性和文本属性（图文详解）

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

随机推荐

  1. 幂的运算：X的n次幂

    计算X的n次幂,有多种算法 例子:计算2的62次方. method 1 :time = 1527 纳秒. 常规思路,进行61次的乘法! private static long mi(long X, l ...

  2. System.TypeInitializationException: The type initializer for 'Oracle.DataAccess.Client.OracleConnection' threw an exception. ---> Oracle.DataAccess.Client.OracleException: 提供程序与此版本的 Oracle 客户机不兼容”

    .net应用程序通过Oracle.DataAccess.dll访问64位的Oracle服务器,在连接时出现以下异常:“System.TypeInitializationException: The t ...

  3. STL的注意事项

    template是一个泛化的:使用template时开始仅仅是声明,具体的例如:k<int> a;叫做实例化显式实例化:类似k<int>a:明确指出哪种类型:隐式实例化:类似k ...

  4. GetComputerNameEx()

    昨晚看了MSDN提供的GetComputerNameEx function(参考:https://msdn.microsoft.com/en-us/library/windows/desktop/ms ...

  5. vue指令

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>指令 ...

  6. 自动把动态的jsp页面（或静态html）生成PDF文档，并且上传至服务器

    置顶2017年11月06日 14:41:04 阅读数:2311 这几天,任务中有一个难点是把一个打印页面自动给生成PDF文档,并且上传至服务器,然而公司框架只有手动上传文档,打印时可以保存为PDF在本 ...

  7. C++ Primer 笔记——关联容器

    1.关联容器支持高效的关键字查找和访问,标准库提供8个关联容器. 2.如果一个类型定义了“行为正常”的 < 运算符,则它可以用作关键字类型. 3.为了使用自己定义的类型,在定义multiset时 ...

  8. 集腋成裘-03-css基础-02

    1.1 三种写法 内嵌式:样式只作用于当前文件,没有真正实现结构表现分离 外链式:作用范围是当前站点,真正实现了内容与表现分离 行内样式:仅限于当前标签,结构混在一起 1.2 标签分类 1.2.1 块 ...

  9. python functools

    # 工具函数import functools print(dir(functools)) # partial函数(偏函数)def showarg(*args,**kw): print(args) pr ...

  10. 根据现有的XML文件生成其对应的实体类

    方法如下: 1.将完整的Xml文本复制一下, 2.在vs2013(或以上版本) .net4.5项目下建立一个类文件, 3.依次选择菜单:编辑->选择性粘贴->将XML粘贴为类.