首页 > 代码库 > CSS基础知识
CSS基础知识
CSS作用：
外观美化，布局，定位
CSS的几种选择器：
1标签选择器：
<head>
<meta charset="UTF-8">
<style>/*选择器：你要操作的页面元素 标签选择器:作用于当前页面的所有li标签*/
li{
color: red;
}
</style>
<title>标签选择器</title>
</head>
2 ID选择器：
<head>
<meta charset="UTF-8">
<style>
/*ID选择器：给当前页面指定的id元素添加样式，同一个页面，不能出现重复的id*/
#change{
color: red;
}
</style>
<title>ID选择器</title>
</head>
body>
<ul>
<li id="change">理学院</li><!--id不能重复-->
<li>计算机学院</li>
</ul>
3：类选择器：
<head>
<meta charset="UTF-8">
<style>
/*类选择器：给当前页面某一类标签添加样式，同一个页面，可以存在多个同名的类*/
.change{
color: red;
}
</style>
<title>类选择器</title>
</head>
<body>
<ul>
<li class="change">理学院</li>
<li>计算机学院</li>
<li class="change">外国语学院</li>
<li>汽车学院</li>
<li class="change">机械学院</li>
</ul>
4后置选择器：
<style>
.td <p>{
color: red;
}
</style>
CSS的三种样式：行内样式；内部样式；外部样式
下面是极端代码配合理解三种样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--外部样式-->
<link rel="stylesheet" href="http://www.mamicode.com/css/first.css">
<!--内部样式-->
<style>
li{
color: coral;
font-size: 19px;
font-weight: bold;
}
#qwer{
color: crimson;
}
</style>
<title>CSS使用方法{内部，行内}</title>
</head>
<body>
<!--CSS的使用方法分3类：
1：行内样式 <li style="color: ;size: ">
缺点：代码繁复，影响正常的代码审查，不利于后期维护（最不推荐！）
优点：样式的优先级高，可以实现整体风格下的单独效果。
2：内部样式
缺点：代码复用程度低（不同页面不能复用）。
3：外部样式
默认情况下，优先级:
行内样式 > 内部样式 > 外部样式
但是要考虑顺序，即就近原则
特殊情况下，那就是外部样式在内部样式的后面引入，会发现相同类名或ID定义的样式，行外的的优先级是高于行内的
再就是考虑权值原则
-->
<ul>
<!--行内样式-->
<li style="color: #4D2E83">数学院</li>
<li>法学院</li>
<li>理学院</li>
<li>工学院</li>
<li id="qwer">外国语学院</li>
<li>航海学院</li>
<li>国防生学院</li>
</ul>
</body>
</html>
上文提到的特殊情况的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li{
color: coral;
font-size: 19px;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="http://www.mamicode.com/css/first.css">
<title>CSS使用方法{内部，行内}</title>
</head>
<body>
<ul>
<li>数学院</li>
<li>法学院</li>
</ul>
</body>
</html>
CSS基础知识