CSS样式

来源：互联网发布：淘宝拍a发b是什么意思编辑：程序博客网时间：2024/06/12 00:11

在web前端开发时，要想获得一个漂亮的页面，仅靠html文件是不够的，还需要CSS和JS文件来帮助润色。html文件制作的网页就像一个毛坯房，需要CSS和JS的装修。

这里我主要介绍CSS的一些基本结构：

首先介绍CSS的三种样式：
1、行内样式：只有当前标签可用，写法比较繁琐，这种写法要极力避免
例：
电脑1元起

2、内部样式：只在当前页面可用，比行内写法要好一些。缺点：多个页面无法功用一个样式
例：<style type="text/css">/*type属性可加可不加*/

#price{
color: red;
font-size: 40px;
}
</style>


电脑1元起

3、外部样式: 推荐写法：样式可以复用。做到了样式和文件的分离。
例：
在htm的body文件中写:

电脑1元起

在CSS文件中定义样式：
#price{
color: red;
font-size: 40px;
}

二、选择器
1、标签选择器：作用于当前页面所有匹配标签
2、类选择器:作用于当前页面所有class值为red的标签
3、id选择器：id在当前页面具有唯一性

代码实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        li{/*标签选择器：作用于当前页面所有匹配标签*/            color: blue        }        .red{/*类选择器:作用于当前页面所有class值为red的标签*/            color: red;        }        #firstLine{/*id选择器：id在当前页面具有唯一性*/            color: red;        }    </style>    <title>CSS标签选择器</title></head><body><ul><!--通过标签选择器来实现样式-->    <!--通过类选择器来实现样式-->    <li>家用电器</li>    <li class="red">各类书籍</li>    <li>手机数码</li>    <li class="red">日用百货</li></ul><ol>    <li id="firstLine">aaaa</li><!--id具有唯一性-->    <li>bbbb</li>    <li>cccc</li>    <li>dddd</li></ol></body></html>

三、样式的优先级
行内样式的优先级比内部样式高
内部样式的优先级比外部样式高
以上效果的实现要符合“就近原则”

0 0