css学习（一）-CSS基础、css选择器
1）理论：
一.CSS基础：
1.css3的新特性：
a.强大的css3选择器
b.抛弃图片的视觉效果
c.背景的变革
d.盒模型变化
e.阴影效果
f.多列布局与弹性盒模型布局
g.web字体和web font图标
h.颜色与透明度
i.圆角与边框的新法
j.盒容器的变形
i.css3过渡与动画交互效果
j.媒体特性与Responsive布局
2.使用css3的好处：
a.减少开发与维护的成本
b.提高页面性能
3.渐进增强：
a.在设计的时候先考虑低端设备用户能否看到所有的内容，然后在此基础上为所有高端用户进行设计。这称为“优雅降级”
二.css选择器：
1.基本选择器：
a.通配选择器：(*)用来选择所有元素
b.元素选择器：(E)用来坂HTML元素
c.ID选择器：根据元素ID来找到对应的元素
d.类选择器：以独立于文档元素的方式来指定元素的样式。类选择器在一个页面中可以有多个相同的类名
e.多类选择器：如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到匹配的元素
f.群组选择器：将具有相同样式的元素分组在一起
2.层次选择器：
a.E F（后台选择器）: F包含在E元素内
b.E>F（子选择器）：F元素是E元素的子元素
c.E+F（相邻兄弟选择器）：F紧邻在E元素后面
d.E~F（通用选择器）：位于匹配E元素后面所有匹配的F元素
3.动态伪类选择器：
a.E:link（链接伪类选择器）：未访问过的链接或锚点
b.E:visited（链接伪类选择器）：已访问过的链接或锚点
c.E:active（用户行为伪类选择器）：匹配元素被激活，常用于锚点与按钮上
d.E:hover（用户行为伪类选择器）：鼠标停留时激活
e.E:focus（用户行为伪类选择器）：元素获得焦点
2）实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css basic</title>
<style type="text/css">
*{margin: 0;padding:0;}
.clearfix:after, .clearfix:before{display:table;content:""}
.clearfix:after{
clear:both;
overflow: hidden;
}
.demo{
width:250px;
border:1px solid #ccc;
padding:10px;
margin:20px auto
}
.demo *{
background: orange;
}
ul{
background: grey;
}
li {
list-style:none outside none;
float:left;
height:20px;
line-height: 20px;
width:20px;
border-radius: 10px;
text-align:center;
background: #f36;
color:green;
margin-right: 5px;
}
#first{
background: lime;color:#000;
}
#last{
background: #000;color:lime;
}
.item{
background: green;
color:#fff;
font-weight: bold;
}
.item.important{
background: red;
}
</style>
</head>
<body>/home/abc/test/css/2-1.html
<ul class="clearfix demo">
<li class = "first" id = "first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class = "last" id ="last">10</li>
</ul>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body{
width:300px;
margin:0 auto;
}
div{
margin:5px;
padding:5px;
border:1px solid #ccc;
}
div div {
background: orange;
}
body > div{
background: green;
}
.active + div{
background: lime;
}
.active ~ div{
background: red;
}
</style>
</head>
<body>
<div class ="active">1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.download-info{
text-align: center;
}
.btn{
background-color: #0074cc;
*background-color:#0055cc;
background-image: -ms-linear-gradient(top,#0088cc,#0055cc);
border-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));
border-image: -webkit-linear-gradien(top,#0088cc,#0055cc);
border-image: -o-linear-gradient(top,#0088cc,#0055cc);
border-image: -moz-linear-gradien(top,#0088cc,#0055cc);
border-image: linear-gradient(top,#0088cc,#0055cc);
border-image: linear-gradient(top,#0088cc,#0055cc);
background-repeat: repeat-x;
display: inline-block;
*display:inline;
border:1px solid #cccccc;
*border:0;
border-color: #ccc;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-radius: 6px;
color: #ffffff;
font-size: 20px;
font-weight: 20px;
font-weight: normal;
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
line-height: normal;
padding:14px 24px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-decoration: none;
vertical-align: middle;
*zoom:1;
}
.btn:hover{
background-position: 0 -15px;
background-color: #0055cc;
*background-color:#004ab3;
color:#ffffff;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
-webkit-transition:background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ma-transition:background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
}
.btn:active{
background-color: #0055cc;
*background-color:#004ab3;
background-color: #004099 \9;
background-image: none;
outline: 0;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
color:rgba(255,255,255,0.75);
}
.btn:focus{
outline:thin dotted #333;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
</style>
</head>
<body>
<div class = "download-info">
<a href="#" class = "btn">View project on GitHub</a>
</div>
</body>
</html>4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.accordionMenu{
background: #fff;
color:#424242;
font:12px Arial,Verdana,sans-serif;
margin: 0 auto;
padding: 10px;
width:500px;
}
.accordionMenu h2{
margin:5px 0;
padding: 0;
position: relative;
}
.accordionMenu h2:before{
border:5px solid #fff;
border-color: #fff transparent transparent;
content:"";
height: 0;
position: absolute;
right: 10px;
top:15px;
width:0;
}
.accordionMenu h2 a{
background: #8f8f8f;
background: -moz-linear-gradient(top,#cecece,#8f8f8f);
background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f));
background: -webkit-linear-gradient(top,#cecece,#8f8f8f);
background: -o-linear-gradient(top,#cecece,#8f8f8f);
background: linear-gradient(top,#cecece,#8f8f8f);
border-radius: 5px;
color:#424242;
display: block;
font-size: 13px;
font-weight: normal;
margin:0;
padding: 10px 10px;
margin:0;
padding: 10px;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration: none;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active{
background: #2288dd;
background: -moz-linear-gradient(top,#6bb2ff,#2288dd);
background: -webkit-gradient(linear,left top,left bottom,from(#6bb2ff),to(#2288dd));
background: -webkit-linear-gradient(top,#6bb2ff,#2288dd);
background: -o-linear-gradient(top,#6bb2ff,#2288dd);
background: linear-gradient(top,#6bb2ff,#2288dd);
color:#FFF;
}
.accordionMenu p{
margin:0;
height:0;
overflow: hidden;
padding: 0 10px;
-moz-transition:height 0.5s ease-in;
-webkit-transition:height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
.accordionMenu :target p{
height:100px;
overflow: auto;
}
.accordionMenu :target h2:before{
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="accordionMenu">
<div class = "menuSection" id ="brand">
<h2><a href="#brand">Brand</a> </h2>
<p>Lorem ipsum dolor...</p>
</div>
<div class = "menuSection" id = "promotion">
<h2><a href = "#promotion">Promotion</a></h2>
<p>Lorem ipsum dolor sit amnt2...</p>
</div>
<div class="menuSection" id = "event">
<h2><a href ="#event">Event3</a></h2>
<p>Lorem ipsum dolor sit emet...3</p>
</div>
</div>
</body>
</html>5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
:lang(en){
quotes: '"' '"';
}
:lang(en) {background: red;}
:lang(fr){
quotes:'<<' '>>';
}
:lang(fr) q {background: green;}
</style>
</head>
<body>
<p>target is test
<q cite="www.test.comet">
build a future where people live in harmony with nature
</q>we hope they succeed.</p>
</body>
</html>