CSS基础之本设置

        前篇博客对CSS的选择器进行了一些总结,本次博客对文本的设置进行一个小小的总结。文本的设置又包括了字体的设置和文本的一些属性的设置,

     字体的设置

        字体的设置又包括设置字体样式、设置字体大小、设置字体粗细一级文字的样式(如斜体)等。

      ------》font-family:指定字体

        font-family用于设置字体:例如宋体,楷体等等。语法格式如下:

p{
     font-family:"微软雅黑";
}
或者

p{
     font-family:"Times New Roman",Georgia,Serif;
}

     font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

注意:

  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下如果有空格隔开的多个单词组成的字体加引号
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体: body [font-family,” Microsoft YaHei‘’;tahoma, arial," Hiragino Sans GB"};

      ------》font-size:指定字体大小

        基本语法:

h1 {font-size:60px;}
h2 {font-size:40px;}

        font-size 值可以是绝对或相对值。

绝对值:

  • 将文本设置为指定的大小
  • 不允许用户在所有浏览器中改变文本大小(不利于可用性)
  • 绝对大小在确定了输出的物理尺寸时很有用

相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器改变文本大小

注意

        如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。使用像素来设置字体大小。通过像素设置文本大小,可以对文本大小进行完全控制:

      ------》font-weight:指定加粗

        语法格式:

p{font-weight:normal;}
p{font-weight:bold;}
p{font-weight:900;}

        font-weight值得设定:font-weight设置为400等同于设置为normal,设置为700等同于设置为bold.

        ------》font-style

        可用于对字体设置斜体等。语法格式:

p{font-style:normal;}
p{font-style:italic;}
p{font-style:oblique;}

        ------》font-variant

        该属性用于设置大写字母的字体显示。具体的语法格式如下:{ font-variant: normal 、small-caps、inherit: )其中的参数值分别表示默认值、显示型大写字母的字体、继承

        ------》font复合属性

        用于一次性设置元素字体的两个或者更多的方面,似的代码更简洁。但是此复合属性的运用有一定的使用顺序。

        font-style---》font-variant----》font-weight----》font-size----》font-family

        如果没有设置值得话系统会使用默认值。

属性 表示 注意点
font-size 字号 常用单位px像素
font-fanily 字体 按照设计约定来设置字体
font-weight 字体粗细 注意:400是normal,700是bold,数字后面不跟单位
font-style 字体样式 倾斜是italic,不倾斜是normal,工作中常用normal
font 字体连写 此用法是有顺序的,不能随意更换位置,并且字号和字体必须同时出现

     文本的属性

        文本的属性包括:文本颜色(color)、对齐文本(text-align)、装饰文本(text-decoration)、文本缩进(text-indent)和行间距(line-height)。

        ------》color

/*预定义颜色值*/
body
  {
  color:red;
  }
/*十六进制*/
h1
  {
  color:#00ff00;
  }
/*RGB代码*/
p
  {
  color:rgb(0,0,255);
  }

        ------》对齐文本text-align(水平对齐)

 

            wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

        此设置只能设置文本的水平对齐方式而不能设置垂直方向对齐,垂直方向设置对齐需要另外一个设置:那就是设置文字行高=盒子高【line-height=盒子高】

        ------》装饰文本text-decoration

        在设置链接下划线的时候会涉及到这个属性的使用。

       语法格式:

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

取值用法:

        ------》文本缩进text-indent

        经常用语设置文本的首航缩进字符的时候使用。

        语法格式:

p
  {
  text-indent:2em;
  }

        em是一个相对单位,就是当前元素一个文字的大小,如果当前元素没有设置大小,就默认按照父元素的一个文字大小。

        ------》行间距line-height

        该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

        line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章