css字体样式

一、文本与字体属性

1. 字体段落相关属性

color：字体颜色

• 十六进制值 - 如"＃FF0000"

• 一个RGB值 - “RGB（255,0,0）”

• 颜色的名称 - 如"#red"
  font-size：指定字体大小

• -14px

text-align：对齐方式

• left：把文本排列到左边。默认值：由浏览器决定。
• right：把文本排列到右边。
• center：把文本排列到中间。
• justify：实现两端对齐文本效果。
• inherit：规定应该从父元素继承 text-align 属性的值。

line-height：文本行高

• normal： 默认。设置合理的行间距。
• number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
• length：设置固定的行间距。
• %： 基于当前字体尺寸的百分比行间距。
• inherit： 规定应该从父元素继承 line-height属性的值。

— 实现垂直居中（行高 = 盒子高）

list-style：li样式

• none 取消默认样式

---

text-indent：文本缩进

• length：定义固定的缩进。
• %：基于父元素宽度的百分比缩进。
• inherit：规定从父元素集成 text-indent 属性的值。

text-decoration：设置或删除文本的装饰

• none：定义标准文本
• underline：定义文本下的一条线
• overline：定义文本上的一条线
• line-through：定义穿过文本下的一条线。
• blink：定义闪烁的文本
• inherit 规定应该从父元素继承 text-decoration 属性的值。

关键值

text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

全局值

text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

text-transform：文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

• none：默认。定义带有小写字母和大写字母的标准的文本。
• capitalize：文本中的每个单词以大写字母开头。
• uppercase：定义仅有大写字母。
• lowercase：定义无大写字母，仅有小写字母。
• inherit：规定应该从父元素继承 text-transform 属性的值。

word-spacing/letter-spacing：文本间隔

• normal：默认。定义单词间的标准空间。
• length：定义单词间的固定空间。
• inherit：规定应该从父元素继承word-spacing 属性的值。

区别：word-spacing针对中文字、英文单词生效；letter-spacing针对中文字和英文字母生效。

white-space：指定元素内的空白怎样处理

• normal：默认。空白会被浏览器忽略。
• pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
• nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
• pre-wrap：保留空白符序列，但是正常地进行换行。
• pre-line：合并空白符序列，但是保留换行符。
• inherit：规定应该从父元素继承 white-space 属性的值。

overflow：指定如果内容溢出一个元素的框，会发生什么

• visible：默认值。内容不会被修剪，会呈现在元素框之外。
• hidden：内容会被修剪，并且其余内容是不可见的。
• scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit：规定应该从父元素继承 overflow 属性的值。

---

2. bacground：背景

css1属性：

background-color  背景颜色
background-image  背景图片
background-repeat  背景图片水平或垂直平铺或重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position  改变图像在背景中的位置

当使用简写属性时，属性值的顺序为：

body {background:#ffffff url('img_tree.png') no-repeat right top;}
background-color
background-image
background-repeat
background-attachment
background-position

css3 新增属性

• background-size 背景图片大小
• background-origin 指定背景图像的定位区域
• background-clip 指定背景图像的绘画区域

行内元素和块级元素和行内块元素

• 使用display：block；可以将元素转换为块级元素
• 使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见
• 使用display：inline-block；可以将元素转换为行内块元素

元素的隐藏

• 使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
• 使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置

二、盒子模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型 (Box Model)：

• Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明

• Border（边框） -边框周围的填充和内容。边框是受到盒子的背景颜色影响

• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响

• Content（内容） - 盒子的内容，显示文本和图像

• width：盒子宽度 height：盒子高度

width属性

• width属性表示盒子内容的宽度
• width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
• 当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

height属性

• height属性表示盒子内容的高度
• height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
• 盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0

border属性

• border: 宽度 样式 颜色;

.box{
    width:0;
    height:0;
    border:20px solid blue;
}

padding属性

• padding属性是盒子的内边距，即盒子边框内壁到文字的距离 padding属性可以使用固定数值或百分比进行赋值，但不能使用负值
• padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
• padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding
• padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding

padding: 10px;    /* 上下左右均为10px*/
padding: 10px 20px;  /*上下10px 左右20px*/
padding: 10px 20px 30px; /*上10px 左右20ox 下30px；*/
padding: 10px 20px 30px 40px;  /*上10px 右20px 下30px 左 40px*/

也可以使用小属性定义

• padding-left、padding-right、paddinng-top、padding-bottom；
• margin属性 margin是盒子的外边距，即盒子与其他盒子的距离 定义规则类似于padding
• margin塌陷问题
  

---

竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准

练习：导航栏