第二周学习报告

第二周学习报告

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列，大小，粗细和文本样式（如斜体）

1.字体系列：font-family

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

2.字体大小：font-size px表示像素

p {
    font-size:20px;
}

但标题标签比较特殊，需要单独指定文本大小。

3.字体粗细：font-weight

p {
    font-weight:bold;
}

属性值	描述
nomal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold，注意这个数字后不跟单位
lighter	定义细体

number：100,200…900

4.文本样式：font-style设置文本的风格

p {
    font-style:normal;
}

属性值	作用
nomal	默认值，浏览器会显示标准的字体样式；
italic	浏览器会显示斜体的字体样式。

平时很少给文字加斜体，反而要给斜体标签(em，i)改为不倾斜字体

5.字体复合属性：将文本样式综合来写，这样可以更节约代码

body {
     font:font-style font-weight font-size/line-height font-family;
}

• 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
• 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

属性	表示	注意点
font-size	字号	通常用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是700或者bold 不加粗是nomal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是italic 不倾斜是normal 工作中我们最常用normal
font	字体连写	1.字体连写是有顺序的 不能随意换位置 2.其中字号和字体必须同时出现

CSS文本属性

1.文本颜色：color属性用于定义文本的颜色。

div {
    color:red;
}

表示	属性值
预定义的颜色值	red，green，blue，
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%，0%，0%)

开发中最常用的是十六进制

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

div {
   text-align:center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

3.装饰文本：text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等。

div {
   text-decoration:underline
}

属性值	描述
none	默认。没有装饰作用（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.文本缩进：text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div {
    text-indent:100px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
   text-indent:2em;
}

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

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

p {
    line-height:26px
}

行间距：26
上间距：5
文本高度：16
下间距：5

文本属性总结

属性	表示	注意点
color	文本颜色	通常用十六进制
text-align	文本对齐	设置文本的对齐方式
text-indent	文本缩进	通常用于段落首行缩进2个字的距离
text-decoration	文本修饰	取消下划线none，添加下划线underline
line-height	行高	控制行与行之间的距离
text-indent	文本缩进	通常用于段落首行缩进2个字的距离
text-decoration	文本修饰	取消下划线none，添加下划线underline
line-height	行高	控制行与行之间的距离