1.CSS属性
基本属性
height， 高度 百分比 width， 宽度 像素，百分比 text-align:ceter, 水平方向居中 line-height， 垂直方向根据标签高度 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗
<div style=" height:48px; 80%; border: 2px solid black; font-size: 20px; text-align: center; line-height: 48px; "> NNNN </div>
背景属性 background
属性介绍
- background-color
- background-image
- background-repeat
- background-position
<body>
<div style="height: 100px"></div>
<div style="background-image: url(2.png);
background-repeat:no-repeat;
border: 1px solid red;
background-position-x:1px;
background-position-y:-110px;
height: 20px;
20px;
"></div>
边框属性border
属性介绍
- border-width
- border-style (required)
- border-color
<div style="border: 1px solid red;"> ssss</div>
2.dispaly属性
- display: none; 让标签消失
- display: inline; 块级标签--->行内
- display: block; 行内标签--->块级
- display: inline-block; 具有行内，块级属性
行内标签：无法设置高度，宽度，padding margin 默认自己有多少占多少
块级标签：设置高度，宽度，padding margin
<body>
<div style="display: inline;">ssss</div>
<span style="display: block;">nnnn</span>
</body>
<span style="display: inline-block;height: 50px; 70px">ALEx</span>
<a style="">Eric</a>
4.内边距(padding)和外边距(margine)
盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
<body>
<div style="border: 1px solid red;height: 70px;">
<div style="height: 50px;padding-top: 20px">sss</div>
</div><br/>
<div style="border: 1px solid red;height: 70px;">
<div style="height: 50px;margin-top: 20px">sss</div>
</div>
</body>
居中应用 <body style="margin: 0 auto">
5.float属性
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
<div style="20%;background-color: red;">1111</div> <div style="20%;background-color: beige;float: left">222</div> <div style="20%;background-color: red;float: left">1111</div> <div style="20%;background-color: beige;float: left">222</div>
<div>
<div style=" 300px;border: 1px solid red">
<div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="clear: both"></div>
</div>
</div>
2.overflow: hidden,auto
<body>
<div style="height: 200px;400px;overflow: auto">
<img src="1.jpg"/>
</div>
<div style="height: 200px;400px;overflow: hidden">
<img src="1.jpg"/>
</div>
</body>
6.position(定位)
1. static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2. position:fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<body>
<div onclick="GoTop();" style="50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd">ssss</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
3. position: relative／absolute
<head>
<style>
.pg-header{
height:48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right:0;
left:0;
}
.pg-body{
background-color: #dddddd;
height:5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
<body>
<div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position:absolute;left: 0;bottom: 0;50px;height: 50px;background-color: black;"></div>
</div>
<div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position:absolute;right: 0;bottom: 0;50px;height: 50px;background-color: black;"></div>
</div>
<div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position:absolute;right: 0;top: 0;50px;height: 50px;background-color: black;"></div>
</div>
</body>
4.opcity: 0.5 透明度
5. z-index:10 层级顺序
<body>
<div style=" display:none;z-index: 10;position:fixed;top: 50%;left: 50%;
margin-left: -200px;margin-top: -250px;
height: 500px; 400px;
background-color: white">
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/>
</div>
<div style="display:none;z-index: 9;position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<div style="height: 5000px;background-color: #dddddd">ssss</div>
</body>
7.hover 鼠标效果
/*当鼠标移动到当前标签上时，以下css属性才生效*/
a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<head>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">a</div>
</div>
</body>
8.CSS练习
<body>
<div style="height: 35px; 400px;position: relative">
<input type="text" style="height: 35px; 400px;padding-right: 30px"/>
<span style="position:absolute;right:-24px;top: 10px;
background-image:url(i_name.jpg);
height: 16px; 16px;display: inline-block"></span>
</div>
</body>