前端学习第4天：css-文本样式

第四天

1.文本样式属性

1.1字体类型 font-family

​ 语法：

{
	font-familu:字体1，字体2，字体3；
}

<!-- 当字体名是单个英文单词时，不加引号 -->
{
	font-family:SimSun；
}
<!-- 当字体名是中文时，需要加引号 -->
{
	font-family:"微软雅黑"；
}
<!-- 当字体名中有空格时，需要加引号 -->
{
	font-family:"Times New Roman"；
}

1.2 字体大小 font-size

​ 语法：

{
	font-size:数值px;
}
<!-- 
	A.属性值为数值时，必须加单位px/pt/em ->9pt=12px ->1em=16px,0.75em=12px.
	B.浏览器默认字体为1em=12px，最小为0.75em=12px.
-->

1.3 字体颜色 color

​ 语法：

{
 color:颜色值;
}
<!-- 
	A.16进制颜色模式：0，1，2，3，4，5，6，7，8，9，A,B,C,D,E,F ->color:#FF0000
	B.rgb颜色模式：color:rgb(0,0,0)->三个取值在0~255
	C.rgba颜色模式：color:rgba(0,0,0,0.5)->a的取值在0~1之间
-->

1.4 字体粗细 font-weight

​ 语法：

{
	font-weight:500;
}
<!-- 
	此处属性值分别是9个等级：100-900 或者 normal（正常/默认) bold(加粗) bolder(更粗)
	默认字体：500
	粗体：600-900
	一般：100-400
-->

1.5字体倾斜 font-style

​ 语法：

{
	font-style:italic;
}
<!-- 
	html中可用：<i></i>或者<em></em>
	css属性值：
		normal:默认值，浏览器显示标准样式
		italic:斜体
		oblique:比italic更斜
-->

1.6 文字行高 line-height

​ 语法：

{
	line-height:normal/value;
}
<!--
	当value=容器高度时，文字垂直居中对齐
-->

1.7 文本修饰 text-decoration

​ 语法：

{
	text-decoration:none/underline/overline/line-through
}
<!--
	none:无修饰
	underline:下划线
	overlinme:上划线
	line-through:删除线
-->

1.8首行缩进 text-indent

​ 语法：

{
	text-indent:value;
}
<!-- 
	text-indent可以取负值，可实现隐藏文本，悬挂缩进。
	text-indent属性只对第一行起作用，若第一行不是文本则没变化。 
-->

1.9 水平对齐 text-align

​ 语法：

{
	text-align:center/right/left(默认);
}

1.10字间距 letter-spacing

​ 语法：

{
	letter-spacing:value;
}

1.11文字属性简写 font

​ 语法：

{
	font:font-style font-weight font-size/line-height fon-family;
}
<!-- 顺序必须如上 -->
<!-- 使用默认值时可省略属性，但font-size和fon-family必须写，否则font标签失效 -->

2.列表属性

2.1列表符号样式

​ 语法：

<!-- 基本符号样式 -->
{
	list-style-type:disc(实心圆)/square(实心方块)/circle(空闲圆)/none(去掉符号);
}
<!-- 图片符号样式 -->
{
	list-style-image:url(路径);
}

2.2列表符号位置

​ 语法：

{
	list-style-position:outside(外边)/inside(里边);
}

2.3去掉列表样式

​ 语法：

{
	list-style:none;
}

3.背景属性

3.1背景颜色

​ 语法：

{
	background-color:#fff;
}

3.2背景图片设置

​ 语法：

{
	background-image:url(路径);
}
<!--
	平铺属性：
		no-repeat:不平铺
		repeat：水平垂直均平铺
		repeat-x:水平平铺
		repeat-y：垂直平铺
-->

3.3背景的固定

​ 语法：

{
	background-attachment:scroll(随内容滚动)/fixed(固定);
}

3.4背景图片位置

​ 语法：

{
	background-position:left/right/center/value top/center/bottom/value;
}
<!--	
	第一个属性值设置水平方向位置，第二个属性值设置垂直方向
	简写：
		background:#fff url(路径) no-repeat right center;
-->

4.边框属性

​ 语法：

{
	border:边框宽度 边框格式 边框颜色;
}
<!-- 边框样式 -->
<!--
	border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
	也可以单独设置一方边框->border-left/right/top/bottom
-->

5.浮动

5.1浮动概念

​ 浮动说明：

对象脱离标准流（正常形态），移动到指定位置，且不占位。

float:left(左浮动)/right(右浮动)/none(不浮动/默认值)

6.清除浮动

6.1清除浮动原因

​ 元素浮动时不占位，会影响排版。

6.2清除浮动本质

​ 解决父元素高度为0的问题

6.3清除方法

• after 伪元素清除法

  语法：

  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
  
   .clearfix {*zoom: 1;}/* ie6/7专有*/
  

• before和after双伪元素清除浮动

  语法：

  .clearfix:before,.clearfix:after{ 
             content:".";
             display:table;
     }
  .clearfix:after{
   clear:both;
  }
  .clearfix{*zoom:1;}