2.css
一.定义位置和方式
代码：
base.css
h3{
color: blue;
}
css1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link href="base.css" type="text/css" rel="stylesheet">
<style>
h2{
color: aqua;
}
</style>
</head>
<body>
<!-- css 行内样式 -->
<h1 STYLE="color: red">这是H1</h1>
<!-- css 内联样式 -->
<h2>这是H2</h2>
<!-- css 外联样式 -->
<h3>这是H3</h3>
</body>
</html>
即可
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link href="base.css" type="text/css" rel="stylesheet">
<style>
h2{
color: aqua;
}
#y1{
color: red;
}
.y2{
color: greenyellow;
}
</style>
</head>
<body>
<!-- css 行内样式 -->
<h1 STYLE="color: red">这是H1</h1>
<!-- css 内联样式 -->
<h2>这是H2</h2>
<!-- css 外联样式 -->
<h3>这是H3</h3>
<h1 id="y1">这是id选择器</h1>
<h1 class="y2">这是class选择器</h1>
</body>
</html>
即可
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css2</title>
<style>
.div1{
color: red;
}
.div2{
color: green;
}
.myclass{
font-size: 28px;
}
</style>
</head>
<body>
<div class="div1">这是div1
<div class="div2 myclass">这是div2</div>
<div class="div3">这是div3</div>
</div>
</body>
</html>
效果
即可
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css2</title> <style> .div1{ color: red; } .div2{ color: green; } .myclass{ font-size: 28px; color: blueviolet; text-align: center; text-decoration: line-through; } .div3 a{ text-decoration: none; } </style> </head> <body> <div class="div1">这是div1 <div class="div2 myclass">这是div2</div> <div class="div3"><a href="http://www.baidu.com">这是div3</a></div> </div> </body> </html>
text-decoration: none; 可以用作<a>标签去掉下划线
即可
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myid{
display: none;
}
.myc1{
width: 400px;
height: 200px;
color: black;
background-color: red;
}
.c2{
color: greenyellow;
border: 1px solid;
margin: 20px ;
padding: 20px ;
}
.c3{
color: green;
border: 1px solid;
}
.c4{
background-color: aqua;
border: dashed;
height: 100px;
}
.c5{
background-image: url("mei.jpeg");
height: 150px;
}
</style>
</head>
<body>
<h1 id="myid">这是H1</h1>
<div class="myc1">
这是盒子div
</div>
<div class="c2">
这是盒子的margin和padding
</div>
<div class="c3">
这是盒子的margin和padding的对比
</div>
<div class="c4">
盒子边框和背景
</div>
<div class="c5">
背景图片
</div>
</body>
</html>
效果
即可
