<!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. CSS学习——基础分类整理

        1. CSS     层叠样式表: Cascading Style Sheets,定义如何显示html元素 CSS规则: 选择器{属性: 值; 属性: 值;} CSS注释: /*在这里写注释说 ...

  2. java-pdf转word

    注:原文来至 < java-pdf转word   > 一: java Pdf 文字 转 Word 废话不说,直接上图 很简单的用法:1.new个PDFBox对象2.调用pdfToDoc() ...

  3. mongo 的导入和导出

    1.导出工具:mongoexport     1.概念:         mongoDB中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指 ...

  4. SpringMVC类型转换，验证

    点击上一章-SpringMVC视图及REST风格 Spring mvc 数据绑定流程: SpringMvc将ServletRequest对象及目标方法的形参实例传给WebDataBinderFacto ...

  5. Python之函数（自定义函数，内置函数，装饰器，迭代器，生成器）

    Python之函数(自定义函数,内置函数,装饰器,迭代器,生成器) 1.初始函数 2.函数嵌套及作用域 3.装饰器 4.迭代器和生成器 6.内置函数 7.递归函数 8.匿名函数

  6. Jmeter中常用的一些对字符串的处理

    1)截取部分线程组的名称 group = ctx.getThreadGroup(); // 获取当前线程组 str = group.getName(); // 获取线程组的名称 str = str.s ...

  7. python截图

    import time import os, win32gui, win32ui, win32con, win32api def window_capture(dpath,name,srcbmp=[0 ...

  8. .net C# 抽奖,中奖

    demo设置了8个奖项,每个奖项可以自定义中奖率,精度为1/10000 public string PrizeDraw() { //奖品以及中奖率 const string prizeString = ...

  9. Caffe和py-faster-rcnn日常使用备忘录

    罗列日常使用中遇到的问题和解决办法.包括: { caffe使用中的疑惑和解释: 无法正常执行 train/inference 的情况: Caffe基础工具的微小调整,比如绘loss曲线图: 调试pyt ...

  10. xxl系列部署启动通用办法

    http://10.10.6.186:8080/xxl-job-admin # 编译mvn compile # 清理mvn clean # 打包mvn package # 先清理后编译mvn clea ...