CSS
2016-01-31 22:43
543 查看
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
input.btnStyle {
text-align:center;
height: 30px;
width: 30px;
font-size: 14px;
border-style: solid;
}
.center {
margin:auto;
width:70%;
}
</style>
</head>
<body>
<form>
<button id="btnTest" onclick="jianchiyixia()"> yuiyiuyiuyiheolorl</button>
</form>
<div class="center" style="color:#00FF00;">
<input class="btnStyle" type="button" value="<" id="btn1"/>
<input class="btnStyle" type="button" value="1" id="btn2"/>
<input class="btnStyle" type="button" value="2" id="btn3"/>
<input class="btnStyle" type="button" value="3" id="btn4"/>
<input class="btnStyle" type="button" value="4" id="btn5"/>
<input style="height: 30px;width: 30px;font-size: 14;" type="button" value=">" id="btn6"/>
<input type="text">page</input>
</div>
</body>
</html>
</span>层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落
CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
语法
*.important {color:red;}
.important {color:red;}
结合元素选择器
只有段落显示为红色文本
p.important {color:red;}
和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
CSS 多类选择器
果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
</p>
假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景（类名的顺序不限）
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐