HTML网页应用CSS样式的方法
使用行内样式表
使用内部CSS样式表
引入外部样式表
导入外部样式文件
注释CSS样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2{
color: blue; /*颜色*/
font-size: 20px; /*字体大小*/
font-family: 宋体; /*字体类型*/
}
</style>
<link rel="stylesheet" href="style1.css">
<style>
@import "style2.css";
</style>
</head>
<body>
<!--使用行内样式表,字体颜色为红色,字体大小为20像素,字体类型为微软雅黑-->
<h1 style="color: red;font-size: 20px;font-family: 微软雅黑;">使用行内样式表2</h1>
<!--使用内部CSS-->
<h2>使用内部CSS样式表</h2>
<!--引入外部样式表-->
<p>导入外部样式表</p>
<!--引入外部样式文件-->
<h3>导入外部样式文件</h3>
</body>
</html>
p{
color: green;
font-size: 20px;
font-family: 隶书;
}
h3{
color: orange;
font-size: 20px;
font-family:华文隶书;
}
输出:
CSS三大特性
CSS层叠性
权重低的选择器效果会被权重高的选择器效果覆盖掉,若权重相同时取后者。
CSS继承性:如a标签的颜色不能继承,必须对a标签本身进行设置,h标签的字体大小不能继承,必须对h标签本身进行设置。
CSS优先性:!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-size: 20px;
text-shadow: 2px 2px 2px #FF0000;
color: gold;
}
#box2 {
color: gold;
}
.box2 {
color: red !important; /*!important优先性最高*/
}
</style>
</head>
<body>
<div>
<p>p标签的继承性</p>
<a href="">a标签的继承性</a>
<h1>h标签的继承性</h1>
</div>
<p id="box2" class="box2">!important优先性最高</p>
</body>
</html>
输出:
在脚本中修改显示样式
随机改变页面的背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.show {
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
border-right: #222222 20px solid;
border-bottom: #222222 20px solid;
border-left: #dddddd 20px solid;
border-top: #dddddd 20px solid;
background-color: #cccccc;
}
</style>
</head>
<body>
<input type='button' value='动态增加立体效果' onclick="change()"/>
<hr/>
<div id="box">立体效果</div>
</body>
</html>
<script>
function change() {
//getElementById获取页面的body元素,给box添加show样式
document.getElementById("box").className = "show";
}
</script>
输出:
实践案例_设计登陆和注册界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录和注册页面设计</title>
<style>
.content {
background-color: #1cff89;
position: absolute; /*绝对定位*/
width: 100%;
height: 400px;
}
.main {
text-align: center; /*文本居中*/
padding: 50px 0px; /*设置内边距上下为50px,左右为0*/
margin: 0 auto; /*设置上、下外边距为0px,左右自适应*/
}
h2 {
font-family: "微软雅黑"; /*设置字体*/
font-size: 40px; /*设置字体大小*/
font-weight: bold; /*调整字体粗细*/
}
input {
border: 1px solid white;
display: block; /*设置成块级标签*/
margin: 10px auto; /*设置上、下外边距为10px,左右自适应*/
padding: 5px;
width: 230px;
border-radius: 15px; /*设置圆角边框*/
font-size: 18px;
font-weight: 300;
text-align: center;
}
button {
background-color: #20a7ff;
border-radius: 10px;
border: 0;
height: 30px;
width: 80px;
padding: 5px;
color: white;
}
</style>
</head>
<body>
<div class="content">
<div class="main">
<h2>You are welcome!</h2>
<form>
<input type="text" placeholder="用户名"/>
<input type="password" placeholder="密码">
<p>
<button type="submit">登 录</button>
<button type="submit">注 册</button>
</p>
</form>
</div>
</div>
</body>
</html>
输出: