代码编织梦想

CSS字体 ,文本属性

1、css字体

1.1 font-family

  • 作用:设置文本的字体系列

  • 语法:font-family:字体名称;

  • 常用值:

    • 一个字体名称或系列名称(介绍常用字体名称、字体系列)

      • 微软雅黑 Microsoft YaHei

      • 宋体 SimSun

      • 黑体 HeiTi

      • 楷体 KaiTi

    • 多个字体名称

      • 逗号分开 如果浏览器不支持第一个字体,则会尝试下一个(回退机制)

        .box{
            /*font-family:"微软雅黑","宋体";*/
            /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同,谁在前使用哪一个*/
            font-family:"微软雅黑abc","宋体"; 
            /*第一个任意改写一个系统不存在的字体,会按照第二个字体显示*/
        }
  • 注意:如果字体名称包含空格、汉字、特殊字符,必须加引号!

    .box{font-family: "Microsoft YaHei";}

1.2 font-size

  • 作用:设置字体的大小

  • 语法:font-size:值;

  • 常用值:

    • 长度值(通常是像素px)

    • 百分比(相对于父元素计算)

    • em相对单位

      如果用于字号,相当于父元素字号计算,如果用于其它属性,相对于当前元素的字号

  • 大多数浏览器的默认值字号:16px

1.3 font-style

  • 作用:设置字体的大小

  • 语法:font-style:值;

  • 常用值:

    • normal默认值

    • italic斜体显示

1.4 font-weight

  • 作用:设置字体粗细

  • 语法:font-weight:值;

  • 常用值:

    • normal默认值

    • bold加粗

    • 100-900九级字重,400相当于normal,700相当于bold

    • 注意:不是所有字体都内置了九级字重

1.5 line-height

  • 作用:设置行高(效果是产生文本行间距)

  • 语法:line-height:值;

  • 特性:实现单行文本的垂直居中

  • 测量:文字高+行间距

  • 常用值

    • normal默认。设置合理的行间距。

  • px 设置固定的行间距。

    • number设置数字,此数值会与当前的字号相乘来设置行间距。

    • 百分比:相对于font-size计算

    .box{
         /*line-height:2;*/
     line-height:200%; /*产生的效果一致都是字号的两倍*/
    }

1.6 font简写

  • 作用:设置所有字体属性

  • 语法:

    font: 字体风格 字体加粗 字号/行高 字体;

  • 总结:

    只有当【字号和字体】同时存在简写才是有效的,简写属性可以精简代码

    .box2{
        /* font:italic bold 20px "宋体"; */
        font:20px "宋体";
    }

2、css文本

2.1 text-align

  • 作用:设置文本的水平对齐方式

  • 语法:text-align:值;

  • 常用值

    • left居左对齐 [默认值]

    • right居右对齐

    • center居中对齐

    • justify两端对齐

  • 注意:适用于块状元素

2.2 text-decoration

  • 作用:设置文本装饰

  • 语法:text-decoration:值;

  • 常用值

    • none 默认。定义标准的文本。 【常用】

    • underline 定义文本下的一条线 【常用】

    • line-through 定义穿过文本的一条线。【比较常用】

    • overline 定义文本上的一条线。 【不常用】

2.3 text-indent

  • 作用:设置文本块首行的缩进

  • 语法:line-height:值;

  • 常用值

    • 默认值:0

    • 长度值,px,em(更方便)

    • 百分比: 相对于元素内容宽进行计算

    • 允许负值

2.4 color

  • 作用:设置文字的颜色

  • 语法:color:颜色值;

  • 常用值

    • 颜色的常用表式方法

      • 颜色名称:如red、blue等

      • 十六进制颜色表示方法

        • 语法:如#ff0000

        • 说明:#rrggbb r,g,b取值范围为00-ff

          • r red 红色

          • g green 绿色

          • b blue 蓝色

        • 认识常见颜色的写法

    • 白色(#ffffff)、黑色(#000000) 红色(#ff0000)、绿色(#00ff00)、蓝色(#0000ff)

  • rgb颜色表示方法

    • 语法:rgb(255,0,0)

      • 说明:rgb(r,g,b) r,g,b取值范围为0-255

        • 认识常见颜色的写法

          • 白色: rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色: rgb(255,0,0) 、绿色: rgb(0,255,0) 、蓝色: rgb(0,0,255)

3、文本属性继承性

简单渗透:字体文本属性大多具有继承性。

可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color

不可继承 text-decoration(穿透性)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/n9_333/article/details/127155916

CSS文字文本属性详细讲解-爱代码爱编程

一.CSS的作用及格式 1.CSS的固定格式: <style type="text/css"> 标签名称 { 属性名称: 属性对应的值 } </style> 1.1 CSS的注释格式 /* 这是注释的内容 */ 1.2注意点: style标签必须写在head标签的开始标签和结束标签之间。设置样式时必须按照固定的

CSS的字体属性和文本属性-爱代码爱编程

文章目录 字体属性文本属性1.文本颜色2.对齐文本3.装饰文本4.文本缩进5.行间距 字体属性 字体属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 属性表示备注font-size字号一定要跟上单位pxfont-family字体尽量使用系统默认字体,一般情况下,如果多个单词组成的字体,要加引号。各种字体必须用英文逗号隔开。font-

CSS的文本属性和CSS的字体属性小结-爱代码爱编程

CSS的文本属性和CSS的字体属性小结 1.css的文本属性: 1、css文本属性之文本中大小写字母转换—text-transform 属性值: text-transform:uppercase;(大写) text-transform:lowercase;(小写) text-transform:capitalize;首字母大写

css字体属性及文本属性-爱代码爱编程

1、字体属性 font-size:字号,单位为像素(px) font-family:字体格式,工作中团队一般有约定的格式,如:微软雅黑(font-family:Microsoft YaHei) font-weight:字体粗细,加粗是700,不加粗是400,不跟单位 font-style:字体样式,倾斜是italic,不倾斜是normal font:复合样

CSS中的字体属性和文本属性总结-爱代码爱编程

文章目录 一.字体属性1.用行高让单行文本居中2.font属性简写3.字体加粗属性4.大小写转换二.文本属性1.空白处理2.overflow属性:超出范围的内容处理 一.字体属性 css样式中,常见的字体属性有以下几种: p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行

CSS字体、文本属性-爱代码爱编程

目录 一、CSS字体属性 1、 font-size:字号大小 2、font-weight:字体粗细 3、 font-family:字体 4、CSS Unicode字体          5 、font-style:字体风格 6 、font综合设置字体样式 二、CSS文本属性 1 、color 文本颜色 2、text-align 文本

CSS 字体属性和文本属性-爱代码爱编程

1.CSS字体属性 CSS 字体属性(font)用于定义字体系列、大小、粗细、和文字样式(如斜体)。 1.1 字体系列 所谓字体系列简单的说就是使用哪种字体,比如宋体、微软雅黑等。 CSS 使用 font-family 属性来定义文本的字体系列。 p { font-family: 微软雅黑;} div {font-family: Ari

css字体属性、文本属性-爱代码爱编程

一、字体属性 CSS Font(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体) 1.字体系列:font-family 2.字体大小:font-size p { font-size:20 px; } px(像素)是网页的最常用单位 3.字体粗细:font-weight 加粗是700、 bold;不加粗是normal或4

CSS基础之CSS文本属性-爱代码爱编程

文章目录 前言1.color2.text-align3.font-size4.text-decoration5.text-indent6.line-height7.文本属性总结 前言 CSS 文本属性可以设置文本的 外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等 1.color color属性用于定义文本的颜色

CSS文字文本属性-爱代码爱编程

一.CSS文字属性 CSS Fonts(字体)属性用于定义字体系列,大小,粗细,和文字样式(如斜体) 1.字体:css使用font-family属性来定义文本的字体类型 标签名 { font-family:字体样式 ; } 如果使用多个字体,每个字体间要用英文状态下的逗号隔开一般情况下,如果字体名为多个英文单词及空格组成,一般放在单引

css字体属性和文本属性_隔壁打字机的博客-爱代码爱编程

3. CSS 字体属性 CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 3.1 字体系列 CSS 使用 font-family 属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

css字体 ,文本属性_suixin。的博客-爱代码爱编程

font-family: 作用:设置文本的字体系列 语法:font-family:字体名称 常用值: 一个字体名称或系列名称(介绍常用字体名称、字体系列) 微软雅黑 Microsoft YaHei 宋体 simsun 黑体 HeiTi 楷体 KaiTi 多个字体名称 逗号分开 如果浏览器不支持第一个字体,则会尝试下一个(回退机制) .box{ /*fon