CSS入门学习

css 字体属性

1.字体系列

css使用font-family属性定义文本的字体系列

语法：

p{

    font-family：微软雅黑;

}

• 各种字体之间必须使用英文状态下的逗号隔开 。
• 一般情况下，如果有空格隔开的多个单词组成的字体加引号。
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

2.字体大小
css 使用font-size 属性定义字体大小

语法：

p{

   font-size:20px;

}

• px(像素)大小是我们网页的最常用的单位。
• 谷歌浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
• 可以给body 指定整个页面文字的大小。

3.字体粗细
css 使用font-weight 属性设置文字的粗细

语法：

p{font-weight:bold;}

• normal 默认值(不加粗的)。
• bold 定义加粗(加粗的)。
• 100-900 400等同于normal，而700等于bold 数字后不跟单位。

4.文字样式
css 使用font-style属性设置文本的风格

语法：

p{

   font-style:normai;

}

• normal默认值浏览器会显示标准的字体样式font-style:normal;。
• italic浏览器会显示斜体的字体样式。

字体总结
fant-size表字号，我们通常用的单位是px像素，一定要跟上单位。

font-family表字体，实际工作中按照团队约定来这字体。

font-weight表字体粗细，记住加粗是700或bold 不加粗是normal或400，记住数字不跟单位。

font-style表字体样式，记住倾斜是italic,不倾斜是normal，工作中最常用normal。

css 文本属性

1.文本颜色

color 属性用于定义文本的颜色

语法：

div{

    color:red;

   }

• 预定义颜色的值 red green blue orange
• 十六进制：#FF0000 #FF6600 #29D794 
• RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

2.文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式

语法：

div{

   text-align:center;

  }

• left 左对齐（默认值）
• right 右对齐
• center 居中对齐

3.装饰文本

语法：

div{

    text-decoration:underline;

   }

• none 默认，没有装饰线（最常用）
• underline 下划线链接a自带下划线（常用）
• overline上划线（几乎不用）
• line-through删除线（不常用）

4.文本缩进

语法：

div{

    text-indent:20px;
  
    }
div{

    text-indent:2em;

   }

em 是一个相对单位，就是当前元素（font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

5.行间距
line-height属性用于设置行间的距离（行高）可以控制文字行与行之间的距离

语法：

p{

  line-height:26px;

  }

行高的文本分为上间距、文本高度、下间距