2021年3月6日 css规则样式
css文件
如果每个页面的样式都有相同的可以创建单独的css后缀的文件
css后缀文件不需要输入style，直接输入css规则就可以使用
h1,h2{
font-family:sans-serif;
color:red
}
h1{
border-bottom:1px soild red;
}
这样的css后缀文件可以直接加入到你需要更改的html后缀文件中更方便的添加css规则
html后缀文件如何添加css文件
使用link
标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。添加css后缀完整代码
<link type="text/css" rel="stylesheet" href=".css">
type类型属性
text/css这段类型解析css
rel 规定当前文档与被链接文档之间的关系。
rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表
href 把样式表放进href中链接的意思
继承
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center
of downtown Webville. If you need help finding
us, check out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
css后缀文件内容
p{
font-family: sans-serif
}
如果body里的p元素还包含a、em标签那么就会变成父子关系
p是父 在p里包含的a、em是子
如果在css的p选择器使用font-family样式那么p下方的子标签也会跟着改变。
也就变成a、em里的字体也随之变化。
但并不是所有样式都会有继承效果。
父子子关系
body{
font-family: sans-serif
}
如果把css选择器放到body里面就会影响到body下方的子标签及子以下的标签。
body如果包含了h1、h2、p和p下方的a、em
这样所有body下方的子标签和p下方的子标签也全部变化规则。
覆盖继承
body{
font-family: sans-serif
}
em{font-family:serif}
使用了body规则后p下方的em也随之的改变了字体
如果em换另外的字体就要使用覆盖继承让em提供一个特定的规则来覆盖之前的body规则
覆盖的特点
覆盖继承的识别是优先特定规则。
上面的css规则中em规则特定编写了字体，所以html会优先读取指定特定的css规则。
浙公网安备 33010602011771号