150 lines
3.7 KiB
HTML
150 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<!-- 外联样式测试 -->
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>样式选择器</title>
|
|||
|
|
<style>
|
|||
|
|
#main {
|
|||
|
|
color: cornflowerblue;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
color: red;
|
|||
|
|
/* display 修改标签类型
|
|||
|
|
block 块级标签，占一行
|
|||
|
|
inline 行内标签，无宽和高
|
|||
|
|
inline-block 行内快标签，有宽和高
|
|||
|
|
*/
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
/* border: 2px solid red; */
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 100px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
margin: 10px;
|
|||
|
|
box-shadow: 10px 10px 20px gray;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item2 {
|
|||
|
|
/* display 修改标签类型
|
|||
|
|
block 块级标签，占一行
|
|||
|
|
inline 行内标签，无宽和高
|
|||
|
|
inline-block 行内快标签，有宽和高
|
|||
|
|
*/
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
color: rgba(255, 71, 71, 0.555);
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-family: "宋体";
|
|||
|
|
box-shadow: 5px 5px 10px rgb(220, 238, 130);
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
父选择器 > 子选择器 {
|
|||
|
|
> 表示父子关系，只会选择子选择器
|
|||
|
|
|
|||
|
|
父选择器 子选择器 {
|
|||
|
|
空格表示父子关系，会选择子选择器和子选择器的子选择器
|
|||
|
|
*/
|
|||
|
|
#content > div {
|
|||
|
|
/* dashed 虚线，solid 实线，dotted 点线 */
|
|||
|
|
border: 1px dotted blueviolet;
|
|||
|
|
margin: 5px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
i,
|
|||
|
|
b,
|
|||
|
|
u,
|
|||
|
|
.c1,
|
|||
|
|
.c2 {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
box-shadow: 2px 2px 5px grey;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
border-top: 2px dashed yellowgreen;
|
|||
|
|
border-width: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[type] {
|
|||
|
|
color: rgb(132, 9, 255);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: 2px 2px 5px aquamarine;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type="time"][value="12:10"] {
|
|||
|
|
padding: 10px;
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* content 子后代的第一个元素 */
|
|||
|
|
#content > div:first-child,
|
|||
|
|
#content > div:last-child {
|
|||
|
|
color: darkgoldenrod;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#content:hover {
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid green;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle:hover {
|
|||
|
|
width: 90px;
|
|||
|
|
height: 90px;
|
|||
|
|
/* border: 1px solid yellow; */
|
|||
|
|
box-shadow: 0 0 100px rgb(0, 128, 163);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<p>ID 不是 main</p>
|
|||
|
|
<p id="main">ID 是 main</p>
|
|||
|
|
<div class="item">ABC</div>
|
|||
|
|
<div class="item">BCD</div>
|
|||
|
|
<div class="item">FFF</div>
|
|||
|
|
<div class="item">LLL</div>
|
|||
|
|
<div>
|
|||
|
|
<form>
|
|||
|
|
<input value="123" /><br />
|
|||
|
|
<input type="text" value="123" /><br />
|
|||
|
|
<input type="time" value="12:10" /><br />
|
|||
|
|
<input type="time" value="12:17" /><br />
|
|||
|
|
|
|||
|
|
<input class="item2" /> <button class="item2">提交</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<br /><br />
|
|||
|
|
<div id="content">
|
|||
|
|
<div class="title">标题</div>
|
|||
|
|
<div class="text">
|
|||
|
|
<h3>精彩即将到来</h3>
|
|||
|
|
<div>
|
|||
|
|
<p>内容</p>
|
|||
|
|
<p>内容2</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>这是最后一段内容</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="title">外部标题</p>
|
|||
|
|
<p>
|
|||
|
|
<b>加粗的文字</b>
|
|||
|
|
<i>倾斜的文字</i>
|
|||
|
|
<u>带下划线的文字</u>
|
|||
|
|
<span class="c1"> 自定义c1类的文字 </span>
|
|||
|
|
<span class="c2"> 自定义c2类的文字 </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<img class="circle" src="images/head_w1.png" width="100px" height="100px" />
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|