CSS技术
什么是CSS
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。
CSS的用法
需求：：将单元格内文字居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的使用</title>
<!-- css方式4 实现css与HTML代码的分离，提高css代码的复用性-->
<link href="demo.css" rel="stylesheet"/>
<!-- css方式3 -->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="30%">
<tr align="center"><!-- css方式1 -->
<td >你好1</td>
<td >你好2</td>
</tr>
<tr style="text-align:center;"><!-- css方式2 -->
<td >你好3</td>
<td >你好4</td>
</tr>
</table>
</body>
</html>
选择器
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
标签名选择器
选中网页中的所有元素
<style> /* 在HTML中加入css*/
span{ /* 标签名选择器，选中所有span */
background-color: chartreuse; /* 背景颜色*/ font-size: 24px; /*字号*/
font-family: 黑体;/* 字体 */
}
</style>
class选择器
给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。
<p class="a b">123</p> <!-- b覆盖a-->
<style> /* 在HTML中加入css*/
/* 选择class=a的元素 */
.a{
background-color: cornflowerblue; /*背景颜色*/
color:red; /*字体颜色*/
}
.b{
background-color: lightsalmon;
color: black;
}
</style>
id选择器
id属性的值在整个HTML中作为唯一标识的存在。
可以通过ID值选中指定的元素（#id值）
<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
text-indent: 200px; /* 首行缩进*/
}
分组选择器
/* 分组选择器，将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
background-color: #000000;
}
属性选择器
根据属性条件选中符合条件的元素来设置样式（逗号隔开）
<style type="text/css">
/* 选中指定的元素 */
input[type='text']{
background-color: #6495ED;
}
</style>
盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
margin（外边距）
<input type="radio" name="sex" value="1" style="margin: 20px;"/>男
1
border（边框）
#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}
padding（内边距）
<td style="padding: 20px;">用户名：</td>
元素类型的补充
块级元素
默认情况下，块级元素独占一行（div , p，h1——h6）
可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容
外边距、边框、内边距都可以设置
行内元素
默认情况下，多个行内元素处在同一行
不能设置宽和高
左右外边距、边框、内边距都可以设置，上下外边距设置无效
行内块元素
既具备行内元素的特征，还具备块级元素的特征
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64849.shtml
