1.CSS引用
<link href="css/styles.cs" type="text/css" rel="stylesheet">
2.选择器
(1)通用选择器*{},选取所有元素
(2)类型选择器h1,h2,h3{}
(3)类选择器.note{}应用所有类名为note的元素
p.note{}应用于所有p元素中类名是note的元素
(4)ID选择器#introduction{}
(5)子元素选择器 li>a{}应用于所有父元素是Li的a元素。对其他<a>不起作用
(6)后代选择器p a{}应用于所有位于<p>元素中的<a>元素
(7)相邻兄弟选择器h1+p{} 应用于h1元素后第一个p元素
(8)普通兄弟选择器h1~p{}如果有两个P元素都是h1的兄弟元素,两个都被选中。
3.CSS规则级联
<!DOCTYPE html>
<html>
<head>
<title>How CSS Rules Cascade</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;}
h1 {
font-family: "Courier New", Courier, monospace;}
i {
color: green;}
i {
color: red;}
b {
color: pink;}
p b {
color: blue !important;}
p b {
color: violet;}
p#intro {
font-size: 100%;}
p {
font-size: 75%;}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p id="intro">There are <i>dozens</i> of different <b>potato</b> varieties.</p>
<p>They are usually described as early, second early and maincrop potatoes.</p>
</body>
</html>
(1)就近原则
如果两个选择器相同,后出现的优先级高于先出现的。
(2)具体性原则
如果一个选择器比其他选择器更加具体,那么具体的选择器优于一般的选择器。
h1优于* p b优于p
p#inftro优于 p
(3)重要性,添加!important强调规则重要。
4.继承
font-family可以继承。background-color,border不会继承。
将属性值设为inherit来强制继承
<!DOCTYPE html>
<html>
<head>
<title>Inheritance</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #665544;
padding: 10px;}
.page {
border: 1px solid #665544;
background-color: #efefef;
padding: inherit;}
</style>
</head>
<body>
<div class="page">
<h1>Potatoes</h1>
<p>There are dozens of different potato varieties.</p>
<p>They are usually described as early, second early and maincrop potatoes.</p>
</div>
</body>
</html>
标签:元素,color,h1,初步,font,选择器,CSS
From: https://www.cnblogs.com/zhongta/p/18442841