Day 13:
css:
- css定义样式位置:
css位置优先级
行内样式 > 内部样式 > 外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞,秋水共长天一色</p>
<p style="color:#99FF99">I love java</p>
<p color="#724935">I love java</p>
</body>
</html>
输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
输出:
- css选择器:
标签选择器中的优先级
ip选择器 > class选择器 > 标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#p1 {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p id="p1">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.selectp {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
输出: