网页设计——7.css的入门
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选择器名"