<!doctype html>
<html>
<head>
<title>选择器初级</title>
<style type="text/css">
*{margin:0;padding:0;}/*匹配页面中所有的元素*/
div{}/*元素选择器 由标签名来选择元素*/
.box{color:blue}/*class选择器/类选择器 用于多个相同标签单需要不同控制*/
#box2{color：red}/*ID选择器 以id属性命名 再页面中只能出现一次 权重值最高*/
div ul li p{color:yellow;}/*后代选择器 从第一个元素开始依次往下选 空格隔开 */
</style>
</head>
<body>
<div class="box" id="box2">
<!--class给元素命名时不能数字开头
建议以小写字母开头
尽量不要用中文、拼音，要见名知意
可以加 - 或 _
可以用驼峰命名法
-->
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<title>背景属性</title>
<style type="text/css">
*{margin:0;padding:0;}
body{ background-image:url
bakground-attachment:fixed;/*背景关联 滚动条滚动时，背景图片不动*/
background-size:;/*背景图片大小*/
}
div{background-color:red;/*red 16进制色 rgb/rgba（a为透明度简写，css3中，r为red） 使用rgb(0,255,0),a取值为0~1 其余为0~255 rgba(0,255,0,0.5)*/
background-image:url("图片路径");/*背景图片*/
background-repeat:;/*背景图片的重复方式 repeat 默认样式*/
/*no-repeat 不重复 repeat-x水平重复 -repeat-y竖直重复*/
background-position:;/*
background-position:X Y
1.关键词写法 top/bottom/left/right/center 只有一个值时，第二个之默认ceter 第一个值水平，第二个值垂直
2.如果只出现一个关键词，那么另一个对应的就是center
3.百分数值：background-position:20p% 30%;支持负值 水平 竖直
4.具体的数值：background-position:20px 30px; 水平 竖直
*/
/*以上的值可以用background直接引用，可以识别*/
/*bakground:red url("路径") no-repeat ;可以实现*/
}
</style>
</head>
<body>
</body>
</html>
原文：https://www.cnblogs.com/Chen-Tan/p/12240772.html