css的引入方法2
2024-08-21 12:03:40
id 方法精确
#div1 {
font-size:30px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
#div1 {
font-size:30px;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<div id="div1">diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
class 按类
.red {
color:red;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
.red {
color:red;
}
.size40{
font-size:40px;
} </style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p class="red">段落</p>
<div class="red">diyihgsddg</div>
<div class="red size40">diyihgsddg</div>
<!--class嵌套-->
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
标签选择：div,p不精确，面广
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css</title>
<style type="text/css">
div {
color:red;
}
p {
font-size:50px;}
</style>
</head>
<body>
<p>111111111111</p>
<p>222222222222</p>
<p>333333333333</p>
<p>555555555555</p>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
交集选择
div.red {
color:red;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div.red {
color:red;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p class="red">段落</p>
<div class="red">diyihgsddg</div>
<div class="red size40">diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
并集选择器
div,p,li{
color:green;
font-size:30px;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div,p,li{
color:green;
font-size:30px;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<ul><li>123</li><li>456</li></ul>
</body>
</html>
子后代关系
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div p{
color:green;}
</style>
</head>
<body>
<div>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
</div>
</body>
</html>
后代的后代
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div p{
color:green;}
div li{
color:yellow;}
</style>
</head>
<body>
<div>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
</div>
<div>
<ul>
<li>123456</li>
<li>123456</li>
</ul>
</div>
</body>
</html>
伪类 a:hover鼠标放上去变色
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
a:hover{color:red;}/*hover鼠标放上去变色*/
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
*通配选择器 选中所有元素
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
*{
font-size:30px;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaa</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
body继承 类似于*
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
body{
font-size:30px;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaa</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
最新文章
- SILVERLIGHT 应急卫生模拟演练项目之loading界面实现
- 链式前向星+SPFA
- PAT 解题报告 1049. Counting Ones (30)
- 数据库SQL语句练习题5--9
- 13.首次安装CY7C68013A驱动失败记（结果竟然是这样）
- sql查询最大id
- CABasicAnimation添加动画离开屏幕就动画停止的问题
- apache+php+mysql常见集成环境安装包
- 条形码（JBarcode）
- Thread类常用方法
- java文件传输之文件编码和File类的使用
- Spring boot加载REACTIVE源码分析
- Multi-Anti-Nim游戏结论及证明
- 前端开发者不得不知的ES6十大特性
- WebMagic实现分布式抓取以及断点抓取
- 常见hash算法的原理（转）
- git 常见命令，规范 整理
- 算法笔记_216:第六届蓝桥杯软件类校赛部分真题(Java语言C组)
- python学习之----urllib与urllib2的区分
- 傅里叶变换--MP3、JPEG和Siri背后的数学