css

第三章
今天来说说我对css中权重的看法，下面是的观点！
声明来自style属性而不是选择器：
计作1或者a=1
选择器中id属性的个数,计作b?　　
选择器中其他属性以及伪类的个数，计作c?　　
选择器中元素及伪元素的个数，计作d?　　
优先级只基与选择器的形式，特殊的，一个“[id=p33]“形式的选择器是按照属性选择器来计算的（a=0, b=0, c=1, d=0）
即使用定义中包含ID?一些例子：
1* {} /* a=0 b=0 c=0 d=0 ->优先级= 0,0,0,0 */
2li {} /* a=0 b=0 c=0 d=1 ->优先级 = 0,0,0,1 */
3li:first-line{} /* a=0 b=0 c=0 d=2 ->优先级 = 0,0,0,2 */
4ul li {} /* a=0 b=0 c=0 d=2 ->优先级 = 0,0,0,2 */
5ulol+li{} /* a=0 b=0 c=0 d=3 ->优先级 = 0,0,0,3 */
6h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 ->优先级 = 0,0,1,1 */
7ulolli.red{} /* a=0 b=0 c=1 d=3 ->优先级 = 0,0,1,3 */
8li.red.level{} /* a=0 b=0 c=2 d=1 ->优先级 = 0,0,2,1 */
9#x34y {} /* a=0 b=1 c=0 d=0 ->优先级 = 0,1,0,0 */
10style="" /* a=1 b=0 c=0 d=0 ->优先级 = 1,0,0,0 */
当然在这里的adcd都不能进行累加，也不能越级！
其实最重要的应该属!important。这是一个非常神奇的东西！
总结：!important是最权中的，不管在哪里加上!important都会先执行添加的标签.

我们再来说说基本常用的正则表达式：
1。^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
2。^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
3。^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
4。^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
5。^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串
6。^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$　　　　//匹配email地址
7。^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$　　//匹配url

* 1、^\S+[a-z A-Z]$ 不能为空不能有空格只能是英文字母
* 2、\S{6,} 不能为空六位以上
* 3、^\d+$ 不能有空格不能非数字
* 4、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$
* 只能是字母、数字、下划线；必须有@和.同时格式要规范邮件
上面就是基本常用的正则表达式。

我们来简单实现一下月全食的场景：
首先设置一个div（class=“test”）给它设置css属性：
div{
width:500px; //宽为500像素
height:200px; //高为200像素
margin-top:10px; //外边距为10像素
border:1px solid #ddd; //边框为1像素，线状，颜色为灰色
}
接着就是背景渐变：
.test{
background:-webkit-radial-gradient(circle,#f00,#ff0,#080,#9cf);
}
这一连串代码我用英译汉的方式给大家翻译出来自然就知道什么意思了。
background：背景
-webkit：谷歌浏览器兼容(关于兼容的问题后面会跟大家详细的说明的)
-radial：半径的；放射状的；光线的；光线状的。
-gradient：坡度；倾斜度；
circle：圈子；圆形物；旋转；环行。
后面四个颜色当然分别：就是从圆心到圆外的颜色。

相信大家都知道安卓手机，也都在用安卓手机把。那我们就动手来画一个安卓手机的login。
写出10个div,外面大的把里面9个给包起来。class取名head。
<div class="head">
<div>0</div>
<div>0</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
分别给几个div定义css属性：
body{
margin: 0;
padding: 0;

}
.head{
width: 150px; //宽为150像素
height: 75px; //高为75像素
background-color: black; //背景颜色黑色
border-top-left-radius: 75px; //左上角圆角为75像素
border-top-right-radius: 75px; //右上角圆角为75像素
margin-left: 200px; //左外边距为200像素
margin-top: 100px; //上外边距为200像素
-webkit-transform: rotate(-20deg); //渐变：逆时针旋转20度
}
.head div:nth-child(1){ //.head下面的第一个div
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 40px;
top: 40px;
-webkit-animation: loopdiv 2s linear 0 infinite;
}
这里的代码和上面的都差不多我就不过多的解释代码！这里用了一个定位：absolute //绝对定位，相对与浏览器来说
left: 40px; //向左移动40像素
top: 40px; //向上移动40像素
-webkit-animation: loopdiv 2s linear infinite;（这串代码详细解释）
loopdiv：变量
2s：响应2秒时间
linear：线性，平滑。
infinite：无限循环
.head div:nth-child(3){
width: 20px;
height: 70px;
background-color: black;
position: absolute;
top:-40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-transform:rotate(-40deg);
}
解释同上。
.head div:nth-child(4){
width: 20px;
height: 70px;
background-color: black;
position: absolute;
top:-40px;
left: 120px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-transform:rotate(40deg);
}
解释同上。
.head div:nth-child(5){
width: 150px;
height: 170px;
background-color: black;
position: absolute;
top: 100px;
left: -35px;
-webkit-transform:rotate(20deg);
}
解释同上。
.head div:nth-child(6){
width: 30px;
height: 140px;
background-color: black;
position: absolute;
left: -80px;
top: 85px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
解释同上。
.head div:nth-child(7){
width: 30px;
height: 140px;
background-color: black;
position: absolute;
left: 120px;
top: 160px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
解释同上。
.head div:nth-child(8){
width: 30px;
height: 150px;
background-color: black;
position: absolute;
left: -80px;
top: 250px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
解释同上。
.head div:nth-child(9){
width: 30px;
height: 150px;
background-color: black;
position: absolute;
top: 285px;
left: 15px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
解释同上。
最后就是动画部分：
@-webkit-keyframes loopdiv{
0%{-webkit-transform: rotate(0deg)}
25%{-webkit-transform: rotate(-90deg)}
50%{-webkit-transform: rotate(-180deg)}
75%{-webkit-transform: rotate(-270deg)}
100%{-webkit-transform: rotate(-360deg)}
}
loopdiv变量用于接收数据,旋转角度分五次都是逆时针旋转90度。这动画就是安卓娃娃的眼睛。
我把全部代码给大家，可以去看看，小小的动画效果。

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>(3)</title>
<style>
body{
margin: 0;
padding: 0;

}
.head{
width: 150px;
height: 75px;
background-color: black;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
margin-left: 200px;
margin-top: 100px;
-webkit-transform: rotate(-20deg);
}
.head div:nth-child(1){
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 40px;
top: 40px;
-webkit-animation: loopdiv 2s linear infinite;
}
.head div:nth-child(2){
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 90px;
top: 40px;
-webkit-animation: loopdiv 2s linear 0 infinite;
}
.head div:nth-child(3){
width: 20px;
height: 70px;
background-color: black;
position: absolute;
top:-40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-transform:rotate(-40deg);
}
.head div:nth-child(4){
width: 20px;
height: 70px;
background-color: black;
position: absolute;
top:-40px;
left: 120px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-transform:rotate(40deg);
}
.head div:nth-child(5){
width: 150px;
height: 170px;
background-color: black;
position: absolute;
top: 100px;
left: -35px;
-webkit-transform:rotate(20deg);
}
.head div:nth-child(6){
width: 30px;
height: 140px;
background-color: black;
position: absolute;
left: -80px;
top: 85px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
.head div:nth-child(7){
width: 30px;
height: 140px;
background-color: black;
position: absolute;
left: 120px;
top: 160px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
.head div:nth-child(8){
width: 30px;
height: 150px;
background-color: black;
position: absolute;
left: -80px;
top: 250px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
.head div:nth-child(9){
width: 30px;
height: 150px;
background-color: black;
position: absolute;
top: 285px;
left: 15px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-transform:rotate(20deg);
}
.monkey{
width: 150px;
height: 70px;
background-color: black;
color: red;
text-align: center;
margin-left: 450px;
margin-top: -120px;
border-radius: 5px;
}
.lise{
border: 10px solid black;
width: 0px;
height: 0px;
border-left-color: white;
border-bottom-color: white;
border-right-color: white;
position: absolute;
top: 125px;
left: 460px;

}
.circle1{
width: 18px;
height: 18px;
border-radius: 50%;
background-color: black;
position: absolute;
top:140px;
left: 440px;
}
.circle2{
width: 13px;
height: 13px;
border-radius: 50%;
background-color: black;
position: absolute;
top:155px;
left: 410px;
}
.circle3{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
position: absolute;
top:170px;
left: 380px;
}

@-webkit-keyframes loopdiv{
0%{-webkit-transform: rotate(0deg)}
25%{-webkit-transform: rotate(-90deg)}
50%{-webkit-transform: rotate(-180deg)}
75%{-webkit-transform: rotate(-270deg)}
100%{-webkit-transform: rotate(-360deg)}
}

</style>
</head>
<body>
<div class="head">
<div>0</div>
<div>0</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="lise"></div>
<div class="monkey">你是猴子请<br>来的救兵嘛??</div>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>

</body>
</html>
这里面后面五个div都是设置的样式可以不要的，知识为了写上好看而已！

posted @ 2015-06-21 14:35 多多了梦阅读(144) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

css

公告