CSS的学习
1.css的基本语法
基本语法
<style type="text/css">
选择器{
属性1:属性值;
属性2:属性值
。。。。。。
}
</style>
2.选择器
1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类
3.类选择器
<html>
<head>
<title> New Document </title>
<style>
.p1{ color:red }
</style>
</head>
<body>
<p>查看文字内容</p>
<p>查看文字内容</p>
<p class="p1">查看文字内容</p>
<p>查看文字内容</p>
<p>查看文字内容</p>
</body>
</html>
4.id选择器
<html>
<head>
<title> New Document </title>
<style>
#p2{ font-size:100px;}
</style>
</head>
<body>
<p id="p2">查看文字内容</p>
<p>查看文字内容</p>
<p class="p1">查看文字内容</p>
<p>查看文字内容</p>
<p>查看文字内容</p>
</body>
</html>
5.标签选择器
<html>
<head>
<title> New Document </title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>查看css的效果</p>
<p>查看css的效果</p>
<p>查看css的效果</p>
</body>
</html>
6.包含选择器
<html>
<head>
<title> New Document </title>
<style>
ol ul li{font-size:50px; color:red}
</style>
</head>
<body>
<ol>
<li>zhangsan
<li>23
<ul>
<li>lisi
</ul>
</ol>
</body>
</html>
7.通配符选择器 *
* {
}
选择所有标签
8.选择器的优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器
9.css的部分属性
div中css的部分属性(部分属性必须使用支持HTML5的浏览器)
position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
top:80px;//距顶部距离
left:35px;//距左距离
width:20px//宽度
height:20px//高度
font-family:楷体;
font-size:14pt;
color:blue; //层里面的字体颜色
overflow:scroll/visible/hidden/auto //超出内容是否包裹
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行,给两个控件中间夹一个空层设置style="clear:both;"
background: #99FFcc;//层的背景颜色
background-image:url('top.jpg');为层设置背景图片
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素
border:2px solid #f98510;//边框的宽度和样式以及颜色
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效(例如 position:absolute;)
position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。
transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
border-radius:20px;//边框圆角
border-image:url(border.png) 30 30 round;//边框图片 大小模式
box-shadow: 10px 10px 5px #888888;//添加阴影
//轮廓
outline:#00ff00 dotted thick;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(''),default;
//不同浏览器不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */