<!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. vue----less引用

    1.安装less. npm install less less-loader --save-dev 2.修改webpack.config.js { test: /\.less$/, use:[ 'st ...

  2. ModuleNotFoundError: No module named 'requests'

    1.问题描述 DOS 执行 .py 脚本报错: ModuleNotFoundError: No module named 'requests' ModuleNotFoundError: No modu ...

  3. Confluence 6 配置附件大小

    你可以限制上传到 Confluence 的附件的大小. 配置可以上传到 Confluence 的附件所允许的大小: 进入  > 基本配置(General Configuration). 选择 编 ...

  4. Confluence 6 恢复一个站点有关使用站点导出为备份的说明

    推荐使用生产备份策略.我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 ho ...

  5. git码云上传本地项目

    可参考:https://blog.csdn.net/huangfei711/article/details/69388230 .在你的项目上鼠标右击点击Git bash git config --gl ...

  6. deepin、Ubuntu安装Nginx

    deepin安装nginx 切换至root用户 su 密码: 基础库的安装 安装gcc g++的依赖库 sudo apt-get install build-essential && ...

  7. 基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...

  8. jquery 获取和设置 select下拉框的值

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...

  9. algorithm与numeric的一些常用函数

    numeric中的accumulated的基本用法: 来自:https://blog.csdn.net/u011499425/article/details/52756242 #include < ...

  10. java web----TCP/DUP 通信

    服务端和单客户端通信 注意事项:如果服务端或者客户端采用read() 一个字节这种读取数据,只要另一方没有关闭连接,read是永远读取不到-1,会陷入死循环中: 解决方法:加上一个判断,程序员自己跳出 ...