<!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. Codeforces 576E Painting Edges [分治，并查集]

    洛谷 Codeforces 建议阅读这篇博客作为预备.无耻地打广告 思路 与bzoj4025很相似,思路也差不多,可以看上面那篇博客. 仍然是用二分图的充要条件:没有奇环. 然而这题难在每条边的存在时 ...

  2. RedHat Linux关闭防火墙的命令

    获得root 控制权限.在“#”下操作. 查看防火墙状态. systemctl status firewalld 临时关闭防火墙命令.重启电脑后,防火墙自动起来. systemctl stop fir ...

  3. PID控制器开发笔记之九：基于前馈补偿的PID控制器的实现

    对于一般的时滞系统来说,设定值的变动会产生较大的滞后才能反映在被控变量上,从而产生合理的调节.而前馈控制系统是根据扰动或给定值的变化按补偿原理来工作的控制系统,其特点是当扰动产生后,被控变量还未变化以 ...

  4. java常见命名规则

    常见命名规则: 包:类似文件夹,用于把相同的类名进行区分(小写) 单级:例如:student 多级:例如:cn.student 类或者接口: 一个单词:单词首字母大写,例如:Student 多个单词: ...

  5. Oracle 所有字典

    select * from DBA_CONS_COLUMNS ; ---Information about accessible columns in constraint definitions s ...

  6. Confluence 6 配置 HTTP 超时设置

    当宏,例如 RSS Macro 进行 HTTP 请求的时候,有可能因为请求的时间比较长,而导致超时.你可以通过设置系统参数来避免这个问题. 配置 HTTP 超时设置: 在屏幕的右上角单击 控制台按钮  ...

  7. Netty简单聊天室

    1.创建maven项目,在pom.xml中引入netty的jar包 <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...

  8. LeetCode（106）：从中序与后序遍历序列构造二叉树

    Medium! 题目描述: 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 posto ...

  9. tp3.2 事务

    public function exchangeTransfer($user_id, $type, $money, $config, $other_id = 0) { $r['code'] = ERR ...

  10. WireShark Flow capture analysis

    Wiresharkl流量分析 1.图示是对WiFi数据接口的80号端口进行数据捕获,设置混杂模式 过滤表达式设置: IP地址设置过滤   ip.src==191.168.1.102    ip.dst ...