CSS基本样式

 行内元素有：<span></span>，<img/>，<a></a>，<input/>，<strong></strong>，<big></big>
 特点：只占内容的宽度,行内元素不能设置高度和宽度
            
 块元素：内容不管有多少，都独占一行，可以设置高度和宽度
 <h1>-<h6>    <div></div>    <p></p>   <hr />   <table></table>   <ul></ul>   <ol></ol>

字体样式：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

            font-family：设置字体类型
            font-size：设置字体大小

            字体风格属性：font-style常用属性值：
            1.普通字体：normal 默认
            2.斜体样式：italic
            3.倾斜体样式：oblique

            字体加粗属性为：font-weight 常用取值：
            1.normal：默认值，定义标准的字体。
            2.bold：粗体字体
            3.bolder：更粗的字体。
            4.lighter：更细的字体。
            5.100、200、300、400、500、600、700、800、900：定义由细到粗的字体。
            400等同于normal，700等同于bold。

文本样式：

        1.text-align:设置文本水平对齐方式，常用值：
        left  right  center
        2.line-height:设置文本行高属性
        3.text-indent：设置文本首行缩进
        4.text-decoration:设置文本装饰
        常用属性：none 默认值：标准 （常用在超链接设置，超链接默认属性是text-decoration：underline）
                 underline：设置文本下划线
                 overline:设置文本上划线
                 line-through：设置文本删除线

链接样式：

    <style>
     	/**
     	 * 顺序：爱恨原则  LoVe HAte
     	 * 注意：不要给一个超链接过多加伪类
     	 * /
     	/*未访问前样式*/
     	a:link{
     		color: black;
     		text-decoration: none;
     	}
     	/*已经访问的超链接样式*/
     	a:visited{
     		color: blue;
     	}
     	/*鼠标移动到链接的样式*/
     	a:hover{
     		color: red;
     	}
     	/*点击未释放*/
     	a:active{
     		color: blueviolet;
     	}
     </style>

背景样式：

	<style>
		h1{
			background-color: red;
		}
		p{
			background-color: blue;
		}
		div{
			width: 800px;
			height: 800px;
			/*background-image: url(../image/1.jpg);
			background-repeat: no-repeat;*/
			background: url(../image/1.jpg) no-repeat;/*可以进行简写，顺序无所谓*/
		}
	</style>

 

列表样式：

            list-style-type：列表样式
            常用值：none 无标记符号
                            disc 实心圆，默认类型
                            circle:空心圆
                            square:实心正方形
                            decimal：数字
            2.list-style-image: url(图标地址)
            list-style-image: url(img/arrow-icon.gif);

边框：

		<style>
			/*顺序：边框宽度>边框样式>边框颜色*/
			.textborder{
				/*border-width: 2px;
				border-color: red;
				border-style: solid;*/
				border: 2px solid red;
			}
		</style>

 

表格样式：

    <style>
    	table,th,td{
    		border-collapse: collapse;
    	}
    	table{
    		width: 600px;
    		text-align: center;
    	}
    </style>

 

CSS样式优先级和继承：

行内样式>内部样式表>外部样式表

ID选择符>类选择符>类型选择符>通配符

子元素可以继承父元素的样式风格

子元素的样式不会影响父元素的样式风格

小结：

 

使用<style>元素引入CSS样式。

CSS选择符分为类型选择符、类选择符、ID选择符、通配选择符、包含选择符、选择符分组

在HTML中引入CSS样式的三种方式分别是行内样式、内部样式表和外部样式表

外部样式表使用<link/>元素链接外部CSS文件，CSS样式的优先级依据就近原则。

              CSS中加入注释的方式与HTML中加入注释的方式不同，注释以“/*”符号开始，以“*/”符号结束。

字体样式图：

属性名	含义	举例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

 

文本样式图：

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
letter-spacing	正整数或负值	字符间距

 

text-align属性图：

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

 

text-decoration属性图：

值	说明
none	默认值，定义的标准文本。
underline	设置文本的下划线。
overline	设置文本的上划线。
line-through	设置文本的删除线。
blink	设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效。

 

使用CSS设置超链接：

 

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;  }
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

 

CSS设置鼠标形状：

值	说明	图例
default	默认光标
pointer	超链接的指针
wait	指示程序正在忙
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字状

 

background-repeat属性图：

值	说明
repeat	表示背景图片重复
no-repeat	表示背景图片不重复
repeat-x	表示背景图片水平重复
repeat-y	表示背景图片垂直重复

 

列表属性图：

属性	值	含义
list-style-image	url(图像路径)	将图象设置为列表项标记。
list-style-type	none,disc,square,circle	设置列表项标记的类型。

 

无序列表标记类型图：

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。

 

有序列表标记图：

值	描述
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

 

边框 border-color 属性图：

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

 

表格属性图：

属性	值	含义
border-collapse	separate(默认), collapse(合并)	是否合并表格边框
border-spacing	length length 或 length	相邻单元格边框之间的距离 如果设置一个值，水平和垂直一样；如果设置两个值，水平和垂直分开设置

 

总结：

使用CSS设置字体的大小、类型、风格、粗细。

使用CSS设置文本颜色、行距、首行缩进、对齐方式、文本装饰等。

使用CSS设置超链接在不同状态下的样式。

使用CSS设置页面背景颜色、背景图片，为列表设置列表自定义图标。

使用CSS设置列表项的类型、列表图像及列表符号显示位置。