Css选择器
http://www.w3.org/TR/selectors/#selectors
1. 标签选择器,就是给常用的tag加上样式:
div{padding:0; margin:0}
2. * 所有元素的选择器,整个文档内的所有元素都被设上该样式
3. class选择器:. 表示
.test{fontweight:bold} <div class=”test”></div>
4. id选择器:#表示
#hello{color:red} <div id=”hello”>world</div> world 将变成红色
5. 你还可以用方括号的形式指定其他属性,如
input[type=”text”]{background:yellow;color:green}/*把text里的背景色设为黄色了,如下,框中的green字样显示绿色,如果是[name=“test”]效果一样*/
<input type=”text” name=”test” value=”green”/>
6. 伪类::hover;:focus;:enabled;:checked…..见超链接。
例子:对于anchor a来说。有:a:visited{点击过超链接} a:hover{鼠标划过} a:active{点击时的样子,点过了就变成visited} a:link{最开始加载出来时}
a.homepage:link{
padding: 1px 10px 1px 10px;
color: #fff;
background: #222;
border-radius: 3px;
border: 1px outset rgba(50,50,50,.5);
font-family: georgia, serif;
font-size: 14px;
font-style: italic;
text-decoration: none;
}
a.homepage:visited{
background:forestgreen;
color:white;
}
a.homepage:hover {
background-color: #666;
}
a.homepage:focus{}
a.homepage:active {
background:dodgerblue;
}
<p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
7. 基于关系的选择器:
常见的基于关系的选择器 | |
选择器 | 选择的元素 |
A E | 任何是元素A的后代元素E (后代节点指A的子节点,子节点的子节点,以此类推) |
A > E | 任何元素A的子元素 |
E:first-child | 任何元素的第一个子元素E |
B + E | 任何元素B的下一个兄弟元素E |
实例:带下拉菜单的导航,重点在:
.class ul ul{
display:none;
}
.class li:hover>ul{
display:block}
第一个ul li a加了>;为了让
.menubar{
position:relative;
height:50px;
width:100%;
background:#666666;
text-align:center;
line-height:50px;/*让内容垂直居中*/
}
.menubar ul{
height:100%;
width:100%;
list-style-type:none;
position:absolute;
overflow:visible;
}
.menubar ul li {
display: block;
float: left;
height: auto;
/* menu header's items width*/
width: 200px;
font-size:15pt;
}
.menubar ul li>a:link, .menubar ul li>a:active, .menubar ulli>a:visited{
background:rgba(0,0,0,.3);
display:block;
cursor:pointer;
color:#fff;
text-decoration:none;
width:100%;
height:100%;
border-bottom:2px solid wheat;
}
.menubar ul li>a:hover{
background: palevioletred;
color:#222
}
/*vertical menu*/
.menubar ul ul{
background: lightblue;
margin:0 auto;
display: none;
position: relative;
height: auto;
border-top:1px solid palevioletred;
/* vertical-menus width */
width: 150px;
}
.menubar li:hover>ul{
display:block;
}
.menubar ul ul li {
text-align:left;
position: relative;
float: none;
display: block;
height: 35px;
line-height:35px;
width: 100%;
border: none;
font-size:12pt;
}
.menubar ul ul li>a:link, .menubar ul ul li>a:visited,.menubar ul ulli>a:active{
margin-left:4px;
color:lightcoral;
display:block;
border-bottom:0px;
background:transparent;
}
.menubar ul ul li > a:hover{
text-decoration:underline;
color:gray;
}
.menubar ul ul ul {
position: absolute;
top: 4px;
left: 150px;
margin: 0;
}
a.menu-bar:after {
content: "\00BB";
float: right;
margin-right: 8px;
}
div如下:
<divclass="menubar">
<ul>
<li><ahref="mcd">HOME</a>
</li>
<li><ahref="mcd">CONTENT</a>
<ul>
<li><aclass="menu-nav" href="mcd.html">list1</a>
<ul>
<li>skfjakls</li>
<li>kljfklsajf</li>
</ul>
</li>
<li><ahref="mcd.html">list2</a>
</li>
<li><ahref="mcd.html">list3</a>
</li>
</ul>
</li>
<li><ahref="mcd">about</a></li>
</ul>
</div>
背景
background 属性:
background-color, background-image,background-position, background-repeat, background-size, background-attachment。
Ø 对于background-image来说:也应该set一个background-color以免图像获取不到
.topbanner { background:url("topbanner.png") #00D repeat-y fixed; }
Ø 根据background-repeat, 图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。repeat;repeat-x;repeat-y;no-repeat;inheritd
Ø 背景图像根据background-position,来放置位置;
eg: background-position:50% 50% 意味着图像中描述为 50%50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。这就是让背景图像在元素内居中
Ø background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动.默认值:scroll可选fixed, inherit
Ø backgound-size:100% 100%会将背景图像从原来的大小拉伸到全屏
将内容重合在一起写:
background:<bg-image>||<position> [ / <bg-size> ]|| <repeat-style>|| <attachment>|| <background-color>
background-color在前在后都可以。
body
{
background:#ff0000 url(eg_bg_03.gif) no-repeat fixed center/100% 50%;
}
背景渐变
1. 有两种形式:linear-gradient()线性;radial-gradient(),放射状
background: linear-gradient(to bottom, blue, white); 上到下是从蓝到白的
background: linear-gradient(to right, blue, white); 从左到右是从蓝到白的
background: linear-gradient(to bottom right, blue, white); 从左上角到右下,蓝-白
-prefix-linear-gradient(top, blue, white); 这个是老浏览器的方法。注意和新的正好相反。
上面也可以用角度:linear-gradient(<90deg>,red, white)
2.可以多设几条渐变线:
background: linear-gradient(to bottom, blue, white 80%, orange);
一般第一个和最后一个的百分数不用写,默认为0 和100;写好中间就好。如果不懈写则平均分。如果颜色改用,rgba,配合图片,怎会呈现出渐隐等效果,
background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1)), url(http://foo.com/image.jpg);
参考网址,可以用css自己实现纹理效果,具体如下:真是太牛了。。。。。。。。。。。。。。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
文本内容:
l CSS可以在元素的前后插入文本:在选择器的后面加上:before 或者 :after 。在声明中,指定 content 属性,并设置文本内容。
例子:在每个类名为test的元素前面加上Test:字样
.test:before { font-weight: bold; color: navy; content: "Test: ";}
content中的内容可以使用默认的utf-8也可使用,还可以通过转义机制(通过反斜杠转义)指定单个字符。比如, \265B 是国际象棋黑皇后的符号
l 可以通过将content 属性值设置为某个图片的URL,可以将图片插到元素的前面或后面。
a.gallory:after {content:" "url("../images/testicon.gif");}