<!--前端开发之CSS入门-->
<!--两个HTML标签,div块，span行内元素-->
<!--以下的<span style="white-space:pre"></span>语句就是空白的意思（浏览器会保留该空白），省略，参考见文底-->
<!DOCTYPE html> <!--html5版本说明-->
<html lang="en"> <!--language = english-->
<head>
<meta charset="UTF-8">
<title>CSS测试</title> <!--显示在浏览器标签页上的字-->
<style>.font_red{font-size: 10px;}</style> <!--内嵌方式的头部-->
<link href="out2.css" rel="stylesheet" type="text/css"> <!--外部链接方式，优先级，内嵌>内部>外部，外部谁后定义谁优先-->
<style>@import url(out.css);</style> <!--外部导入方式-->
<style>*{ font-size:30px;color:red;}</style> <!--选择器之通配符-->
<style>#top{width: 500px ;height: 15px;background-color: #b3d4fc}</style>><!--选择器之ID选择，#后不可加纯数字-->
<style>body{background-color: silver;}</style> <!--包含选择符-->
<style>h1 span{background-color: #b3d4fc;size: 30px;}</style> <!--包含选择符-->
<style>
.a1,.a2,.a3{background-color: bisque;} <!--群组选择符-->
.a1{size: 50px;color: darkmagenta;}
.a2{size: 50px;color:salmon;}
.a3{size: 50px;color:saddlebrown;}
</style>
<style> <!--伪类，例子运用在超链接上-->
a:link{color:red;} <!--超链接没有被点击时的状态-->
a:visited{color: orange;} <!--点击过后的状态-->
a:hover{color: yellow;} <!--鼠标经过时状态-->
a:active{color: blue;} <!--鼠表点击时的状态-->
</style>
<style>
body{ <!--背景设置，背景颜色、背景图片、背景重复、背景锁定、背景定位-->
background-color: yellow;
background-image: url("imag/IMG_20141111_182309.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-position:right;
}
</style>
<style>
body{
text-decoration:line-through;text-decoration:underline;font-family: monospace;font-style: italic; font-size: 10em;
<!--文本设置：删除线，下划线，字体，字体形状、大小-->
}
</style>
<style>
ul{list-style-type: lower-greek;} <!--样式表处理列表，前面序号的字体-->
</style>
<style> #ba{border: black solid 2px </style> ;<!--样式表处理表格：边缘格式-->
</head>
<body>
<div style="border: 1px #ff85ec solid;width:500px;">内嵌方式样式表,直接在页面加</div> <!--内嵌方式-->
<div class="font_red">内部方式嵌套</div> <!--选择器之类选择器-->
<div class="font_size">外部链接</div> <!--外部css文件：.font_size{font-size: 20px;}-->
<div class="font_size1">外部导入</div> <!--外部css文件：.font_size{font-size1: 20px;}-->
<div id="top"></div> <!--ID选择符-->
<h1><span>我改变了</span></h1><!--包含选择符，只要是子类都可以继承-->
<div class="a1">样式一</div>
<div class="a2">样式二</div>
<div class="a3">样式三</div>
<!--颜色的三种格式：十六进制，red，rgb（255，0，0）-->
<table id="ba"> <!--样式表处理表格-->
<tr>
<td >单元格</td>
<td >单元格</td>
<td >单元格</td>
</tr>
</table>
</body>
</html>
<!--
这是html+css。
CSS中的 white-space 属性设置如何处理元素内的空白。
可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
-->
1254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
