css笔记

***********css选择器的优先级

id选择器大于类选择器大于标签选择器

属性选择器

元素选择器 基本选择器[属性=‘属性值’]

伪元素选择器

a:link 静止状态
a:hover 悬浮状态
a:active 触发状态
a:visited 完成状态
层级选择器

语法：父级选择器 空格 子级选择器

1、文字属性
font-size:大小
font-family:字体类型
2、文本属性
color:颜色
text-decoration:下划线
属性值：none underline
text-align:对齐方式
属性值：left center right
<div>hello css!!!</div>
<a href="#">click me!!!</a>
<style type="text/css">
div{color:red;text-decoration: underline;text-align: right }
a{text-decoration: none;}
</style>
3、背景属性
background-color:背景颜色
background-image:背景图片
属性值：url("图片地址");
background-repeat:平铺方式
属性值：默认横向纵向平铺
repeat:横向纵向平铺
no-repeat:不平铺
repeat-y：纵向
repeat-x：横向

body{
background-color: black;
background-image: url("images/dog.gif");
background-repeat: repeat-y;
}

4、列表属性
list-style-type:列表项前的小标志
属性值：太多了
list-style-image:列表项前的小图片
属性值：url("图片地址");

<ul>
<li>黑马程序员</li>
<li>黑马程序员</li>
<li>黑马程序员</li>
<li>黑马程序员</li>
</ul>
<style type="text/css">
/* ul{list-style-type: decimal-leading-zero;} */
ul{list-style-image: url("images/forward.gif");}
</style>

5、尺寸属性
width:宽度
height:高度
<div id="d1">div1</div>
<div id="d2">div2</div>
<style type="text/css">
#d1{background-color: red;width: 200px;height: 200px;}
#d2{background-color: pink;width: 200px;height: 200px;}
</style>
6、显示属性
display:
属性值：none:隐藏
block:块级显示
inline：行级显示

<form action="">
name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
<br>
pass:<input id="pass" type="password" />
<br>
<input id="btn" type="button" value="button" />
</form>
<style type="text/css">
span{color:red;display: none}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>

7、浮动属性
float:
属性值：left right
clear:清除浮动 left right both
缺点： (1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示

四、css盒子模型

 

border:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的线型

border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

padding:
代表边框内壁与内部元素之间的距离
padding:10px;代表上下左右都是10px
padding:1px 2px 3px 4px;上右下左
padding:1px 2px;上下/左右
padding:1px 2px 3px;
padding-top:单独设置
margin:
代表边框外壁与其他元素之间的距离
margin:10px;代表上下左右都是10px
margin:1px 2px 3px 4px;上右下左
margin:1px 2px;上下/左右
margin:1px 2px 3px;
margin-top:单独设置