版权声明：这是博主的原创文章，喜欢请支持。 https://blog.csdn.net/qq_39925376/article/details/88068177
<style type="text/css">
.选择器{属性；值}，上面点声明，下面class调用，受css上下书写顺序影响，
下覆盖上，只层叠受冲突的样式。
</style>
//里框距离
<table width="500" border="1" align="center" cellspacing="10"
cellpadding="10" />
//cellspacing表示第一个表格的每个单元格之间的距离，cellpadding指单元格内容与
单元格边界之间的空白距离的大小
1.导入模板
<link rel="stylesheet" type="text/css" href="css/style.css">
//type="text/css"的用处是告诉浏览器，标签内包含的内容是css或text。避免浏览器
不能识别css的情况
<form action="" method="get">
<!--post匿名提交-->
<label for="psw">用户名<input type="text" name="username"><br/><br/>
密 码<input type="password" id="psw"
name="password"></label>
<br /><br />
<input type="submit" name="" value="提交所写">
<input type="reset" name="" value="重填信息">
</form>
<style type="text/css">
//class可以调用多次，id选择器唯一使用
*{
// *代表所有标签
font-size: 18px; //尽量使用偶数字号
font-family: "宋体",arial,"华文行楷";
/*有空格或者反斜杠要加引号，默认显示第一个*/
//font-family: "microsoft yahei"}
a{
font-weight: bold; //字体加粗
/*font-weight: 600;*/ /*无单位== bold}
//font-weight: normal;
em{
/*color: #ff0000; 红绿蓝 */
color: #f00;
font-style: normal; //让斜体不倾斜
}
h3{
font:400 25px "宋体";
//选择器(font: font-style font-weight font-size/line-height
font-family)顺序不能乱,后两个不能少
text-align: center;}
div p{
text-indent: 2em; //首行缩进}
div p > ins{
text-decoration: none; //取消下划线 }
/*ul li >i{ 子代选择器
color: #ff0000;
}*/
ul li i{ /*后代选择器*/
color: #ff0000;}
p.red{
color: #0f0;} //交集选择器，限定只有某div能用该样式
em,b{
color: #000;} //并集选择器，适用于相同样式集体声明
</style>
<style type="text/css">
a:link { /*未访问过的链接状态*/
color: blue; // $href的属性值是会改变css对它的设置的
font-size: 25px;
text-decoration: none;
font-weight: 700;}
a:visited{
/*已经访问过的链接*/
color: gray;}
a:hover {/*鼠标经过的状态*/
color:orange;}
a:active{/*鼠标按下时候的样子*/
color:green;}
//顺序不能反,a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。
</style>
2.背景图片属性设置
background-color: #000;
background-image: url(../photos/ms.jpg);
background-repeat: no-repeat;
repeat : //背景图像在纵向和横向上平铺
no-repeat : //背景图像不平铺
repeat-x : //背景图像在横向上平铺
repeat-y : //背景图像在纵向平铺
background-position: center top;
background-attachment: scroll ; //fixed 背景固定
.ar{
padding: 0 12px; //上下0，左右12
margin: 100px; //外边距
}
.li{
list-style: none;/*取消li的圆点*/
}
margin: 0 auto; //上下是0，左右auto，水平居中
margin-left: auto; //自动充满
margin: auto; //左右为auto，即可实现块级元素水平居中；
//实现盒子水平居中：必须为块级元素，盒子必须指定宽度
margin-top:10px; 可能会导致外边距重复。
padding和border会撑开带有width和height的盒子,