在上一篇文章中，我总结了一下HTML，这一篇我把CSS简单做一下归纳，使网页变得富有美感。
/*注释内容*/2.最常见的css样式格式——嵌入式 例如对span里的内容的字改为蓝色：<style type=text/css> span{ color:blue; } </style>3.介绍两种选择器：类选择器和ID选择器 （1）类选择器 .类选择器名字{css样式代码；} 举例:在body部分这样写：<span class="happy">你好</span>在style部分这样写：.happy{color:pink;}/*你好的颜色变成了粉色*/ (2)ID选择器 #ID选择器{css样式代码；} 与类选择器一样，只不过class变成ID。注意点：类选择器可以使用很多次，很多个地方class等于一样都没问题，但是ID选择器只能用一次。4.子选择器和包含（后代）选择器 直接举例： <html> <style> .hello>li{ border:1px solid blue; } </style> </head> <body> <ul class="hello"> <li>hello world! <ul> <li>HELLO WORLD!</li> <li>HELLO WORLD!</li> </ul> </li> </ul> </body> </html> 显示效果：
上面是子选择器，接下来我把style部分改成一下内容，其他不变：.hello li{ border:1px solid blue; }显示效果：
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。5.通用选择器：*{里面填格式} 它作用于html中的所有标签元素。6.伪类选择器：标签:hover{里面填格式} 它是指鼠标滑过这段字的时候会出现的效果。二.CSS格式化排版
我把下面分为字体排版和段落排版，简单综合一下。1.字体排版（1）字体：font-family（2）字号：font-size（用像素表示）（3）颜色：color（4）粗体：font-weight：bold（5）斜体：font-style：italic（6）下划线：text-decoration：underline（7）删除线：text-decoration：line-through2.段落排版（1）首行缩进两个字符：text-indent：2em（2）行高：line-height（3）字间隔：letter-spacing（如果是英文，则表示字母与字母之间的间隔） Word-spacing（单词时间的间隔）（4）居中：text-align：center； 右对齐：text-align：right； 左对齐：text-align：left；三.盒子模型的介绍
1.在介绍盒子模型之前，先了解一下html中的标签分类。（1）常见的块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、、<dl>、<table>、<address>、<blockquote>、<form>（2）常见的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、、<var>、<cite>、<code>（3）常见的内联块状元素：<img>、<input>一般情况下，块状元素都具备盒子模型的特征。2.盒子模型的边框（1）粗细：border-width（大多用像素表示）（2）边框样式：border-style（dashed虚线、dotted点线、solid实线）（3）颜色：border-color（4）可以只设置一边：border-right、border-left、border-bottom、border-top3.盒子模型——填充 元素内容与边框之间的距离就是填充用padding表示4.盒子模型——边界 一个盒子模型和另一个盒子模型之间的距离就是边界用margin表示四.实例介绍
在第三大点中介绍了盒子模型，接下来这个例子也会用到盒子模型，以及上面提到的一些样式的运用，在我上一篇博客介绍到的例子基础之上进行下一步的美化，其基本功能没有改变。但是我们可以看到，通过盒子模型我们把这个表单居中了，通过对字体、颜色、背景的改变使网页更加的富有美感。代码如下：<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { font-weight:bold; font-family: Microsoft Yahei; width: 400px; padding-left: 50px; margin-left: 450px; } h1 { text-align: center; } #sub { background-color: #689; width: 250px; height: 30px; color:white; font-weight: bold; } body { background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICQQa_1024.jpg"); } </style> </head> <body> <div id="sign"> <h1>Sigh Up</h1></br> <h2>Your basic info</h2> <form> <strong>Name:</strong> <input type="text" name="myname" id="name"/></br> </br> <strong>Passward:</strong> <input type="password" name="mypassward" id="passward"/></br> </br> <strong>Age:</strong></br> <input type="radio" name="age" value="1" checked="checked"/>Under 13</br> <input type="radio" name="age" value="2" />13 or older</br> </br> <strong>Your PRofile:</strong></br> <textarea cols="50" rows="4" name="profile" id="profile"></textarea></br> </br> <strong>Job Role:</strong></br> <select> <option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option> <option value="Back-End Developer" name="job">Back-End Developer</option> </select></br> </br> <strong>Interests:</strong></br> <input type="checkbox" name="development" value="1" checked="checked">Development</br> <input type="checkbox" name="design" value="2" >Design</br> <input type="checkbox" name="business" value="3" >Business</br> </br> <input type="submit" name="Sign Up" value="Sign Up" id="sub" onclick="abc()"> </input> </form> </div> </body> </html>代码运行后的效果图：
新闻热点
疑难解答
