css与html结合的第一种方式
属性style的方式
<div style=""></div>
<span style=""></span>
css与html结合的第二种方式
只能给一个页面复用
<head>
<meta ....>
<title>...</title>
<style type="text/css">
div{
border:....;
}
span{
border:....;
}
</style>
</head>
css与html结合的第三种方式
<head>
<meta ....>
<title>...</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
css选择器
标签名选择器
标签名{
属性：值
}
<style type="text/css">
div{
border:....;
}
span{
border:....;
}
</style>
id选择器
#id属性值{
属性：值;
}
<style type="text/css">
#id001{
属性：值;
}
</style>
<body>
<div id="id001"></div>
</body>
class选择器
.class 属性值{
属性:值；
}
<style type="text/css">
.class01{
属性：值
}
</style>
<body>
<div class="class01"></div>
</body>
组合选择器
选择器1，选择器2，选择器3{
属性：值；
}
<style type="text/css">
.class01,#id001{
属性：值；
属性：值；
}
</style>
<body>
<div class="class01"></div>
<span id="id001"></span>
</body>
css常用样式
<style type="text/css">
div{
color:red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a{
text-decoration: none;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
ul{
list-style: none;
}
</style>
<body>
<div></div>
<span></span>
<a href="https://www.baidu.com/" target="_self"></a>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</body>
color:red;
border: 1px yellow solid; 边框
width: 300px;
height: 300px;
background-color: green; 背景颜色
font-size: 30px;
DIV居中
margin-left: auto;
margin-right: auto;
text-align: center;文字居中
text-decoration: none; 超链接去下划线
border: 1px red solid;设置边框
border-collapse: collapse; 边框合并
list-style: none; 去除列表前符合
