选择器初级及背景属性
Posted chen-tan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择器初级及背景属性相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于选择器初级及背景属性的主要内容，如果未能解决你的问题，请参考以下文章