css的介绍
div+css的设计:
什么是div?
理解示意图：
实例操作：
这里就要用到div+css的布局操作
先写一个html文件，见下图：
<html>
<head>
<meta charset="utf-8">
<title>css的演示</title>
<!-- 引入案例八.css文件-->
<link href="案例八.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
</body>
</html>
这里的代码非常的简洁易懂。
之后写css文件，取名叫案例八.css ，与html文件中的导入css文件名一致，
.style1
{
width:200px;
height:200px;
background-color:#ffffff;
border:1px solid red;
margin-left:100px;
}
.style1 table
{
border:10px solid yellow;
width:180px;
height:180px;
margin:0 auto;
}
.style1 table td
{
border:1px solid green;
text-align:center;
}
这里要特别说明一下：css有类选择器，id选择器，父子选择器
(1)类选择器
有“."开头的取名是类选择器，用的时候在div里面加入属性class="类选择器名"，例如css中的".style1"
(2)父子选择器
通过依据元素在其位置的上下文关系来定义样式，例如css中的“.style1 table” ".style1 table td"
(3)id选择器
以 "#" 开头定义的选择器，这里没有用到，使用的时候要在div中添加属性 id="id选择器名"