CSS

来源：互联网发布：网络管理师考试内容编辑：程序博客网时间：2024/05/20 09:08

<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;
}
我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
<ol>
<li>我是斜体字。这是因为 strong 元素位于 li 元素内。</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），就可以写作：

This paragraph is a very important warning.


假设 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;
}

0 0