CSS

最新推荐文章于 2021-06-24 14:41:45 发布

jiangxt211

最新推荐文章于 2021-06-24 14:41:45 发布

阅读量284

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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" οnclick="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;
}

jiangxt211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

Title of the documentinput.btnStyle { text-align:center; height: 30px; width: 30px; font-size: 14px; border-style: solid;}.center { margin:auto; width:70%;} yuiyiuyiuyiheolorl
复制链接

扫一扫