<!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. LONG数据类型转换为VARCHAR2并相互转换

    --方法1,支持表 --plsql中将long类型隐式转换为varchar2,但是sql不能CREATE OR REPLACE FUNCTION LONG_TO_CHAR( in_rowid rowi ...

  2. ant 相关命令

    # jmeter-ant A Simple Ant project for JMeter Performance Test # Pre-Requisite* Java 1.7 or above* JM ...

  3. Spring如何使用JdbcTemplate调用存储过程的三种情况

    注:原文 <Spring如何使用JdbcTemplate调用存储过程的三种情况 > Spring的SimpleJdbcTemplate将存储过程的调用进行了良好的封装,下面列出使用Jdbc ...

  4. 【深度学习】吴恩达网易公开课练习(class1 week2)

    知识点汇总 作业内容:用logistic回归对猫进行分类 numpy知识点: 查看矩阵维度: x.shape 初始化0矩阵: np.zeros((dim1, dim2)) 去掉矩阵中大小是1的维度: ...

  5. python基础之迭代器与生成器

    一.什么是迭代器: 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束. 迭代器是一个可以记住遍历的位置的对象. 迭代器的 ...

  6. php回调函数的概念及实例

    php提供了两个内置函数call_user_func()和call_user_func_array()提供对回调函数的支持.这两个函数的区别是call_user_func_array是以数组的形式接收 ...

  7. Deal with Warning: mysqli::__construct(): (HY000/2002)

    1.安装XAMPP之后,如果之前安装过MySQL或者 apache,启动XAMPP中的响应的服务的时候回出现报错, 出错的原因,具体看报错的原因,如果是端口占用,在配置中修改端口号,如果是提示 “Fo ...

  8. 使用Calendar获取上一月，下一月，上一年，下一年的当天日期

    Calendar的add(int field,int amount)方法 field 表示月或年,天等字段 amount 代表增量或减量 例如: 上月的当天日期  Calendar cal = Cal ...

  9. AI学习吧

    一:AI学习吧 项目描述 系统使用前后端分离的模式,前端使用vue框架,后端使用restframework实现. 项目需求 公司开发AI学习吧,由于公司需要一款线上学习平台,要开发具有线上视频学习.支 ...

  10. 集腋成裘-01 sublime常用的快捷键

    sublime使用的快捷键 1:Html 结构代码  : Html:xt + tab键 2:补全标签代码   : tab键 3:快速复制一行代码 : Ctrl+shift+d 4:快速选中一行代码 : ...