H5基础第五课时CSS篇（1）

来源：互联网发布：环球黑卡知乎编辑：程序博客网时间：2024/06/07 01:41

一.css基本语法
1.css的写法分三类
(1):行内样式样式只在当前标签可用，写法比较繁琐，这种写法要极力避免。
<p>
电脑<span style="color: red;font-size: 40px">1</span>元起
</p>
(2):内部样式样式只在当前页面可用，比行内写法要好一些，缺点：无法做到多个页面共用一个样式
<head><style type="text/css">
#price2{
color: red;
font-size: 40px;
}
</style></head>
<body>
<p>
电脑<span id="price2">1</span>元起
</p>
</body>
(3):外部样式推荐写法！样式可以复用。做到了样式和文件的分离。
<head>
<link rel="stylesheet" href="../../css/first.css">
</head>
<body>
<p>
电脑<span id="price">1</span>元起
</p>
</body>
2.三类样式的优先级
默认情况下行内样式的优先级比内部样式高,内部样式比外部样式优先级高,但引入顺序变化时以上效果的实现要符合就近原则。样式的覆盖只会覆盖相同的样式
(1)显示的是外部样式
<style type="text/css">
#price{
color: yellow;
font-size: 50px;
}
</style>
<link rel="stylesheet" href="../../css/first.css">
(2)显示的是内部样式
<link rel="stylesheet" href="../../css/first.css">
<style type="text/css">
#price{
color: yellow;
font-size: 50px;
}</style>
二.选择器的分类
1.标签选择器 li 作用于当前页面的所以匹配标签
li{
color: red;
font-size: 30px;
}
2.类选择器 .+类名作用于所以class值为类名的标签
.red{
color: red;

}
<ul>
<li>家用电器</li>
<li class="red">各类书籍</li>
<li>手机数码</li>
<li class="red">日用百货</li>
</ul>
3.ID选择器 #+类名 id在当前页面具有唯一性
#firstLine{
color: yellow;
}
<ul>
<li id="firstLine">家用电器</li>
<li class="red">各类书籍</li>
<li>手机数码</li>
<li class="red">日用百货</li>
</ul>

0 0