选择器
<!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>
a{color:red;
font-size:40px;
background:yellow;}
a:link{/*选择没被点击过的链接*//*只对a标签有效*/
background:pink;
}
a:visited{/*已经点击过的链接*//*只对a标签有效*/
background:black;
}
a:hover{/*选择鼠标悬浮在元素上面的样式*/
/*如果有link或visited，必须放在其后面，没有就没关系*/
background:red;
}
a:active{/*选择鼠标按下在元素还没释放的样式*/
/*如果有link或visited、hover，必须放在其后面，没有就没关系*/
background:blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">点击跳转到百度</a>
</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>
