CSS学习笔记
1、一个元素不允许使用2个ID选择器，可以使用2个类选择器。2、并集选择器 用“，”隔开。3、后代选择器用空格隔开。交集选择器的例子：<style>p{color:blue;}p.s{color:red;}.s{color:green;}</style><p>蓝色</p><p class="s">红色</p><h3 class="s">绿色</p>行内样式>ID样式>类样式>标记样式display属性（inline强制转换为行内元素 block强制转换为块级元素 none 隐藏元素）a标签：a:link： a:visited：a:active： a:hover：Div居中：margin:0 auto; <div> 块级元素(block)<span> 行内元素(in-line)例子：//行内元素距离叠加，例子中2个行内元素距离为70px<div ><span class="left">行内元素</span><span class="right">行内元素</span></div>span.left{background-color:#CC0000;margin-right:30px;}span.right{background-color:#0000FF;margin-left:40px;}//2个块级元素的外边距取大的，例子中2个块级元素的距离是40px<div style="margin-bottom:30px">块级元素1</div><div style="margin-top:40px">块级元素2</div>//一个浮动的例子<div class="father"><div class="son1">Box1</div><div class="son2">Box2</div><div class="son3">Box3<br/>Box3<br/>Box3<br/>Box3<br/>Box3<br/>Box3</div><p>1、一个元素不允许使用2个ID选择器，可以使用2个类选择器。2、并集选择器 用“，”隔开。3、后代选择器用空格隔开。行内样式>ID样式>类样式>标记样式display属性（inline强制转换为行内元素 block强制转换为块级元素 none 隐藏元素）a标签：a:link： a:visited：a:active：a:hover：Div居中：margin:0 auto; <div>块级元素(block)<span> 行内元素(in-line)例子：//行内元素距离叠加，例子中2个行内元素距离为70px</p></div>body{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#FFFF33;bordr:1px solid #FF3300;padding:15px;}.father div{padding:10px;margin:15px;border:1px dashed #FF3300;background-color:#0099FF;}.father p{border:1px dashed #FF3300;background-color:#9900CC; clear:left;//清除左边浮动对P的影响}.son1{float:left;}.son2{float:left;}.son3{float:right;}//若全部div脱离了标准流，要使父容器可以自动适应高度，可以添加一个div，例子中，<div class="clera"></div><div class="father"><div class="son1">Box1</div><div class="son2">Box2</div><div class="son3">Box3<br/>Box3<br/>Box3<br/>Box3<br/>Box3<br/>Box3</div><div class="clear"></div></div>body{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#FFFF33;bordr:1px solid #FF3300;padding:15px;}.father div{padding:10px;margin:15px;border:1px dashed #FF3300;background-color:#0099FF;}.son1{float:left;}.son2{float:left;}.son3{float:right;}.clear{padding::0px;margin:0px;clear:both;border:0;}//相对定位即相对于原来的位置，同样适用于float（它后面的盒子不变）<div class="father"><div class="block1">Box-1</div></div>.father{background-color:#FFFF33;bordr:1px solid #FF3300;padding:15px;}.block1{background-color:#0000FF;border:1px dashed #000000;padding:10px;position:relative;left:30px;top:30px;}//绝对定位即是以其最近设置了position属性的父容器为基准，若都没有设置，则以浏览器作为基准<div class="father"><div >Box-1</div><div class="block2">Box-2</div><div >Box-3</div></div>.father{background-color:#FFFF33;bordr:1px solid #FF3300;padding:15px;}.father div{background-color:#0000FF;border:1px dashed #000000;padding:10px;}.block2{position:absolute;right:0px;top:0px;}//father设置了position属性.father{background-color:#FFFF33;bordr:1px solid #FF3300;padding:15px;position:relative;}.father div{background-color:#0000FF;border:1px dashed #000000;padding:10px;}.block2{position:absolute;right:0px;top:0px;}//固定定位Fixed以浏览器作为基准//按钮式导航<div class="daohang"><a href="#" >首页</a><a href="#" >链接一</a><a href="#" >链接二</a><a href="#" >链接三</a><a href="#" >链接四</a><a href="#" >链接五</a></div>.daohang a:link,a:visited{text-decoration:none;color:#FF3366;background:#00CCFF;border-top:1px solid #0066FF;border-left:1px solid #0066FF;border-bottom:1px solid #000099;border-right:1px solid #000099;padding:4px 10px 4px 10px;}.daohang a:hover{color:#CC0033;background:#0099FF;border-bottom:1px solid #0066FF;border-right:1px solid #0066FF;border-top:1px solid #000099;border-left:1px solid #000099;padding:5px 8px 3px 12px;}//列表式导航<div class="daohang1"><ul><li><a href="#" >首页</a></li><li><a href="#" >链接一</a></li><li><a href="#" >链接二</a></li><li><a href="#" >链接三</a></li><li><a href="#" >链接四</a></li><li><a href="#" >链接五</a></li></ul></div>.daohang1{width:150px;font-family:Arial, Helvetica, sans-serif;font-size:14px;text-align:right;}.daohang1 ul{list-style-type:none;margin:0px;padding:0px;}.daohang1 li{border-bottom:1px solid #9F9FED;}.daohang1 li a{display:block;height:1em;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #151571;border-right:1px solid #151571;}.daohang1 li a:link,.daohang1 li a:visited{background:#1136c1;color:#FFFFFF;}.daohang1 li a:hover{background:#002099;color:#ffff00;border-left:12px solid yellow;}//浮动列表式导航<div class="daohang1"><ul><li><a href="#" >首页</a></li><li><a href="#" >链接一</a></li><li><a href="#" >链接二</a></li><li><a href="#" >链接三</a></li><li><a href="#" >链接四</a></li><li><a href="#" >链接五</a></li></ul></div>.daohang1{font-family:Arial, Helvetica, sans-serif;font-size:14px;text-align:right;}.daohang1 ul{list-style-type:none;margin:0px;padding:0px;}.daohang1 li{border-bottom:1px solid #9F9FED;float:left;}.daohang1 li a{display:block;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #151571;border-right:1px solid #151571;}.daohang1 li a:link,.daohang1 li a:visited{background:#1136c1;color:#FFFFFF;}.daohang1 li a:hover{background:#002099;color:#ffff00;border-left:12px solid yellow;}
页:
[1]