级联样式
级联样式（Cascading Style Sheet）英文缩写即为CSS，主要作用于网页的风格设计或说网页的布局，可以设置字体大小、颜色、以及元素的位置等。
常用的级联样式有三种：外部级联、内部级联和内联。
- 外部样式，使用link连接外部CSS，如下在head标签中使用href（类似于iOS中的url）连接一个外部CSS样式。外部样式的好处时，可以复用此CSS样式。
HTML文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式选择器</title>
<link href="CSS%20样式选择器.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td> table的行内容</td>
</tr>
<tr>
<td> tr就是table每一行的内容,和iOS中不同,table的一个复用就有许多行,h5看起来是一行一行写进去的</td>
</tr>
<tr>
<td>不加css时就是空白的一行</td>
</tr>
</table>
</body>
</html>
外部CSS文件如下：
/* 通过table元素这个关键字作为选择器, 起到选择的作用。 是级联选择器的一种 */
table{
background-color: #003366;
width: 400px;
}
/* 关键字(或说元素)作为选择器, 起到查找定位的作用 */
/* 设置table每行的属性 */
td{
background-color: #ffffff;
font-size: 20pt;
text-shadow: -2px 2px 2px #333;
}
外部样式.png
- 内部级联样式，在head标签中使用Style标签直接设置整个页面的样式，当前页面生效，不需要CSS文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style type="text/css">
// . + 类名title作为选择器，决定div这个元素有外观效果
.title{
font-size: 18px;
color: #60c;
height: 30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
table{
background-color: #003366;
}
td{
background-color: #ffffff;
font-size: 20pt;
}
</style>
</head>
<body>
<div class="title">
疯狂Java体系图书
</div>
<table>
<tr>
<td>疯狂Java讲义</td><td>我并不会换行</td>
</tr>
<tr>
<td>疯狂Android讲义</td><td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td><td>疯狂XML讲义</td>
</tr>
</table>
</body>
</html>
内部样式.png
- 内联样式，直接在标签后面使用Style设置，可以精准控制当前元素的外观表现，不需要CSS文件， 不需要选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML内联样式</title>
</head>
<body>
<div style="font-size: 18px;
color:#60C;
height: 30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
">
疯狂Java体系图书
</div>
<table style="background-color: #0099bb;">
<tr>
<td style="background-color: #ffffff; font-size: 20px; font-family: '楷体_GB2312;">经典Java EE企业应用实战</td>
</tr>
</table>
/* 内联方式直接指定到了具体的HTML元素,因此无需指定selector部分 */
</body>
</html>
内联样式.png
选择器Selector
选择器决定该样式定义对哪些元素起作用（类比iOS中的tag值，设置一个tag，然后通过tag去查找对应的控件，并修改该控件的属性），常用的选择器有：
- 标签（类比于关键字，即系统定义的，非自定义的变量）， 如table这个系统的关键字就是一个标签选择器。作用是table这个元素对应的外观有效。
table{
background-color: #003366;
width: 400px;
}
- . + 类名，使用. 加上元素class名作为选择器，设置Div这个元素外观效果
// . + 类名title作为选择器，决定div这个元素有外观效果
.title{
font-size: 18px;
color: #60c;
height: 30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
- id 选择器， 使用#+id号作为选择器（xx为元素的id号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html"; charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
/* 对所有Div元素都其作用的CSS样式 */
div {
width: 200px;
height: 30px;
background-color: #ddd;
padding: 3px;
}
/* 对id为xx的元素起作用的CSS样式 */
#xx{
border: 2px dotted black;
background-color: #900;
}
</style>
</head>
<body>
<div>没有任何属性的Div元素</div>
<div id="xx">id属性值为30的Div元素</div>
</body>
</html>
效果如下：
ID选择器.png
- 包含选择器， div元素下面查找包含属性a的元素，设置它的外观效果（类似于深层次查找某个元素，先找到父元素，再找子元素，最后找孙辈的元素....）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>包含选择器</title>
<style type="text/css">
/* 对所有的div元素起作用的CSS样式 */
div{
width: 350px;
height: 60px;
background-color: #dddddd;
/*设置两个div之间的间隔为5px,如果不设置两个div就挨在一起*/
margin: 5px;
}
/* 对处于div之内且类名为a的元素起作用的CSS样式 */
div .a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888888;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div>
<section>
<div class="a">处于div内且class属性为a的元素</div>
</section>
</div>
<p class="a">没有处于div内,但class属性为a的元素</p>
</body>
</html>
效果如下：
包含选择器.png
