CSS is specifically used to "beautify" tags.
- Basic CSS, write simple pages & understand & learn to modify.
- Modules, tweaks and modifications.
1. Quick understanding
<img src="..." style="height:100px" />
<div style="color:red;">中国联通</div>
2. CSS application method
- 1. On the label
<img src="..." style="height:100px"/>
<div style="color:red;">中国联通</div>
- 2. Write the style tag in the head tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red；
}
</style>
</head>
<body>
<h1 class='c1'>查看更多</h1>
<h1 class='c1'>查看更多</h1>
<h1 class='c1'>查看更多</h1>
</body>
</html>
- 3. Write to the file (the above is the css file, the bottom is the html file, import the css file into the html file)
.c1{
color:red；
}
.c2{
height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--下面语句是将css文件导入到html文件中-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h1 class='c1'>查看更多</h1>
<h1 class='c2'>查看更多</h1>
<h1 class='c1'>查看更多</h1>
</body>
</html>
3. Selector
Used more: class selector, label selector, descendant selector
less used: attribute selector, ID selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器，和class关联（常用）*/
.c1{
color:red;
}
/*id选择器，和id关联*/
#c2{
color:gold;
}
/*标签选择器，和标签关联*/
li{
color:pink;
}
/*属性选择器*/
input[type='text']{
border:1px solid red;
}
/*后代选择器*/
.yy li{
color:pink;
}
</style>
</head>
<body>
<div class="c1">中国</div>
<div id="c2">广西</div>
<ul>
<li>beijing</li>
<li>shanghai</li>
<li>shenzhen</li>
</ul>
<input type="text">
<input type="password">
<div class="yy">
<ul>美国</ul>
<ul>中国</ul>
<ul>日本</ul>
</div>
</body>
</html>
Multiple styles have coverage problems (if you don’t want to be covered, add a !import)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*如果有重复的，下面的样式会把上面覆盖掉*/
.c1{
color:red;
border:1px solid red;
}
.c2{
font-size:28px;
color:green;
}
</style>
</head>
<body>
<div class="c1 c2">中国联通</div>
</body>
</html>
Reference content:
The latest Python web development family bucket (django+front-end+database)