CSS（二）元素基础样式、字体属性、文本属性-灵析社区

一、元素基础样式

1. 尺寸和单位

宽度width和高度height使用长度单位：px、pt、rem、em、%等；

max-width 最大宽度，max-height 最大高度；

min-width 最小宽度，min-height 最小高度，不允许出现负值。

一般PC端网页使用 px 或者 pt，移动端使用 %、em、rem、vw、vh 等响应式单位。

2. 颜色

（1）英文颜色

常用 red、green、blue、yellow、orange、pink、purple、gold 等，还有透明色transparent。

（2）十六进制颜色

格式为 #rrggbb，1、2 位代表红色范围；3、4 位代表绿色范围；5、6 位代表蓝色范围。值的范围为 0-9，a-f。如果三组都是相同的值，可简写，如：#00ff00 --> #0f0。

（3）RGB颜色

格式为 rgb(r,g,b); r 代表红色色值；g 代表绿色色值；b 代表蓝色色值。

取值范围为0~255 之间的256个数。

rgba()；a代表透明度，取值 0~1 之间的数字，0 代表完全透明

  rgb(255, 5, 251);
  rgba(15, 2, 15, 0.5);

（4）web 安全色

安全色是用于网页的标准色彩，它比标准的 rgb 色彩要少，如果网页设计的时候用了非 web 安全色，那这个网页在不同的电脑显示出来可能是不同的颜色。

3. 边框

（1）边框属性

border-width	边框宽度
border-style	边框样式，solid实线，dashed虚线，dotted点点
border-color	边框颜色

（2）边框的方向

border-bottom	下边框
border-top	上边框
border-left	左边框
border-right	右边框

（3）简写

border：边框宽度边框样式边框颜色(最常用)

   border:30px solid green;
  border-bottom:10px solid blueviolet;

（4）案例：三角形的 CSS 写法

.sjx {
   width: 0; 
   height: 0;
   border: 50px solid transparent;
   border-bottom-color: black;
}

4. 元素的分类

（1）元素的显示属性

display: block;	以块级元素方式显示
display: inline;	以内联元素方式显示
display: inline-block;	属于行内元素，但以块级显示，俗称行内块
display: none;	不显示
display: table;	以 table 方式显示（不是重点）

（2）元素特性

5. 显示和隐藏属性

二、字体属性

1. 字体大小——font-size: 30px; 设置字号，

字体大小可以使用不同的单位，如 px、pt、em、rem、vw等等，不允许负值像素。几种常见取值如下：

px 像素
pt 磅
em 父级元素的倍数	em参照的是父级字号的比例，如1em代表父级字号*1
rem 根标签的倍数	rem参照的是根标签(html)的指定字号
vw 视窗尺寸

Google浏览器字体大小默认为16px，最小12px。

2. 字体系列——font-family: "华文新魏"; 设置所需要的字体。

推荐字体系列：（可直接复制使用）

<!--移动端项目：-->
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","HeitiSC",sans-self;
<!--pc端(含Mac)项目：-->
font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self;
<!--移动和pc端项目：-->
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","HeitiSC","Hiragino Sans GB",Simsun,sans-self;

3. 字体字重（粗细）——font-weight: 400; 设置字体的粗细。

值为介于 1 和 1000 之间的数字类型值，必须要是 100 的倍数。常用关键词：normal（400 默认）、bold（粗体700）、lighter（细体300）。

4. 字体样式——font-style: italic; 设置字体的样式。

font-style: normal;	默认正常
font-style: italic;	斜体

5. 简写

格式：font：字体样式字重字号字体系列（不可改变顺序）

font: italic 600 20px "仿宋";

三、文本属性

1. 字体颜色

color：颜色的色值；

2. 文本对齐方式——text-align: center;

left	默认,左对齐
center	居中对齐
right	右对齐

该属性针对块级元素中的内联元素，它需要写在父级（块级元素）中，不能写在子元素中。

3. 文本的行高—— line-height: 70px;

行高=文字上下间距+文本高度；使单行文字在父元素垂直居中时使文本的行高等于父元素的高度即可。

4. 文本线条修饰

text-decoration: none;	无线条（常用于将a标签的默认下划线去掉）
text-decoration: underline;	下划线
text-decoration: overline;	上划线
text-decoration: line-through;	删除线

5. 首行缩进——text-indent: 2em;

6. 文本换行

正常文字拥有默认的 white-space:normal 属性，当达到定义的宽度之后就会自动换行，而连续的英文字符和数字不能换行，在 div 中英文字母之间没有空格的话，它会默认为这是一个英文单词，所以一次性输出不换行

white-space: nowrap;	不换行
word-wrap:break-word;	强制换行

7. 文本溢出

.d9 {   
   width: 300px;  /* 限宽 */  
   white-space: nowrap;  /* 强制不换行 */ 
   overflow: hidden;  /* 多余部分不显示 溢出部分隐藏 */
   text-overflow: ellipsis;  /* 文本溢出显示 */
}

8. 文字阴影

格式：text-shadow：x 轴偏移量 y 轴偏移量模糊半径的大小颜色值

text-shadow: 10px 10px 5px brown;

9. 垂直对齐方式——vertical-align: middle;

垂直对齐针对的是该元素前后的内联元素或者文字，而不是本身。常用关键值：

vertical-align: middle;	居中对齐
vertical-align: top;	顶部对齐
vertical-align: bottom;	底部对齐
vertical-align: baseline;	基线对齐（默认）