文章目录
CSS使用的三种方式内联定义方式实现代码实现结果样式块方式实现代码显示结果链入外部样式表文件实现代码图是结果#id 选择器 #id名实现代码实现结果标签选择器 标签名实现代码实现结果类选择器 .类名实现代码图是结果列表装饰实现代码图是结果绝对定位实现代码显示结果CSS使用的三种方式
内联定义方式
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS样式：内联定义方式</title></head><body><divstyle="width: 300px;height: 300px;background-color: blue;border-color: chartreuse;border-width: 10px;border-style: solid; display: none;"></div><div style="border:yellow solid 10px; width: 300px; height: 300px; background-color: black;"></div></body></html
实现结果
样式块方式
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 样式块</title><style type="text/CSS">#password{font-size: 100px;color: darkorange;}</style></head><body><span id="password">对不起，你输入的密码不符规则</span></body></html>
显示结果
链入外部样式表文件
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本装饰</title><link rel="stylesheet" href="1.css" type="text/CSS"></head><body><a href="">百度</a><br><br><br><br><span id="baidu"><a href="">点击我跳转到百度</span></body></html>
a{text-decoration: none;}#baidu{text-decoration: underline;cursor: pointer;}
图是结果
#id 选择器 #id名
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 样式块</title><style type="text/CSS">#password{font-size: 100px;color: darkorange;}</style></head><body><span id="password">对不起，你输入的密码不符规则</span></body></html>
实现结果
标签选择器 标签名
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器</title><style type="text/CSS">div{color: darkred;font-size: 100px;text-align: center;}</style></head><body><div>我是老大</div><div>我是老二</div><div>我是老三</div><div>我是老四</div></body></html>
实现结果
类选择器 .类名
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><style type="text/CSS">.Student{font-size: 20px;border: 10px solid rgb(12, 201, 22);}</style></head><body><input type="text" name="query" class="Student">搜索框<br><br><br><select name="option" class="Student" size="2"><option value="河南">河南</option><option value="河北">河北</option><option value="山东">山东</option></select></body></html>
图是结果
列表装饰
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表装饰</title><style>ul {/* list-style-type: none; *//* list-style-type: square; */list-style-type: circle;}</style></head><body><ul><li>中国<ul><li>上海</li><li>北京</li></ul></li><li>美国</li><li>俄国</li></ul></body></html>
图是结果
绝对定位
实现代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style type="text/css">#qwe {width: 300px;height: 300px;border: 10px solid rgb(48, 22, 196);background-color: deeppink;position: absolute;left: 100px;top: 100px;/* right: 100px;bottom: 100px; */}</style></head><body><span id="qwe"></span></body></html>
