CSS整理

当前位置 : 首页 > 网页制作 > CSS > CSS整理

CSS整理

来源: 作者: 时间:2016-01-28 09:27
CSS整理通过HTML文档、CSS文档、对应网页效果对CSS进行整理 *内部样式表* *text-decoration 属性大多用于去掉链接中的下划线,none为没有,默认:underline。background-color 属性规

CSS整理

通过HTML文档、CSS文档、对应网页效果对CSS进行整理

 




 




CSS整理


   

h3为红色

h4的颜色

h5为蓝色
h5部分
  • 咖啡
  • 可口可乐

CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素 样式通常存储在样式表中

Firstname Lastname
Bill Gates
Steven Jobs

mycss.css

/*ID选择器与类选择器区别:ID只能在文档中使用一次,ID不是使用词列表*/

#red {color:red;} /*id选择器*/

.blue{color:blue;} /*类选择器,这种是指所有类名相同的元素都应用*/

.center
	{
	margin-left:auto; /*外边距*/
	margin-right:auto;
	width:70%;
	background-color:#f4f240;
	}

h4.hh{color:#370851} /*结合元素选择器(词列表)*/

p  {
	background-color: #ffffff; /*使用background-color设置背景色*/
	text-indent: 5em;       /*使用text-indent设置文本缩进*/
	text-align: center;/*使用text-align设置文本左右中两端(justify)对齐方式*/
	word-spacing: 0px; /*使用word-spacing设置字间隔*/
	letter-spacing: 0px/*使用etter-spacing设置字母间隔*/
	
	/*使用text-transform进行字符转换,默认:none,uppercase转全大写,
	lowercase转全小写,capitalize首字母大写*/
	text-transform: blink;

	/*使用textdecoration进行文本装饰,默认:none,underline下划线,
	overline上划线,line-through贯穿线,blink文本闪烁*/
	text-decoration: none;

	/*white-space处理空白符,默认normal忽略空白符,
	pre:不忽略空白符,nowrap:防止文本换行*/
	white-space: normal;

	font-family: Georgia;/*使用font-family设置字体*/
	
	/*font-stylenormal设置字体风格:文本正常显示,italic:文本斜体显示,
    oblique:文本倾斜显示*/
	font-style: normal;}

	/*font-weight 属性设置文本的粗细,
	normal:默认,bold:粗体(700),具体数字*/
	font-weight:bold;
    
	/*font-size设置字体大小,默认大小是16px=1em,
	可以使用像素,em或百分比为单位,最好用em或百分比*/
	font-size:16px;
	
	/*轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,
	可起到突出元素的作用,outline:在一个声明中设置所有的轮廓属性。*/	
	outline-color:#00ff00; 	/*设置轮廓的颜色。*/ 	
	outline-style:dotted;	/*设置轮廓的样式。*/ 	
	outline-width:3px; 	    /*设置轮廓的宽度。*/
	}

body{
	background-image: url(image/1.jpg);/*使用background-image设置背景图像*/
	
	/*使用 background-repeat设置背景图平铺,repeat:x,y都平铺,
	repeat-x:水平平铺,repeat-y:垂直平铺,no-repeat:不平铺*/
	background-repeat: no-repeat; 
	
	/*background-position用于背景定位,默认值是 0% 0% 或 top left
	可以使用一些关键字:top、bottom、left、right 和 center。
	通常,这些关键字会成对出现,不过也不总是这样。
	还可以使用长度值,如 100px 或 5cm,
	最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。*/
	background-position: 50px 100px; 

	/*background-attachment使图像相对于可视区是固定的(fixed)*/
	background-attachment: fixed; 
	}

	/*css列表:
	list-style 	简写属性。用于把所有用于列表的属性设置于一个声明中。
	list-style-image 	将图象设置为列表项标志。
	list-style-position 	设置列表中列表项标志的位置。
	list-style-type 	设置列表项标志的类型。
	   http://www.w3school.com.cn/css/pr_list-style-type.*/
ul
	{
	list-style: square inside url('image/4.gif')
	}


	/*表格:table属性:
	border-collapse 	设置是否把表格边框合并为单一的边框。
	border-spacing 	设置分隔单元格边框的距离。
	caption-side 	设置表格标题的位置。
	empty-cells 	设置是否显示表格中的空单元格。
	table-layout 	设置显示单元、行和列的算法。
	*/
table, td, th
	{
	border:1px solid green; /*边框及颜色*/
	}

th
	{
	background-color:green;
	color:white;
	padding:15px; /*内边距*/
	vertical-align:bottom; /*顶部底部中部对齐方式*/
	text-align:right; /*左右中对齐方式*/
	}

/* 框模型 (Box Model) 规定了元素框处理元素内容(height,width)、
内边距(padding)、边框(border) 和 外边距(margin) 的方式*/


对应网页:


Tag:
网友评论

<