CSS样式表和元素选择器
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式表和元素选择器相关的知识，希望对你有一定的参考价值。
CSS样式表和元素选择器
CSS语法单元是样式，每个样式包含两部分内容：选择器和声明。
选择器(Selector):指定样式作用于哪些对象
声明(Declaration）:指定浏览器如何渲染选择器匹配的对象
属性(Property):CSS预设的选项样式
属性值(Value):指定显示效果的值
在网页中 ，有三种方法可以引入CSS样式，让浏览器能够识别和解析。
1-行内样式
把CSS样式置于标签的style属性中，但是这样用法并没有真正的把html结构和CSS样式分离出来，一般不建议大规模使用，除非页面中某个元素临时设置特定样式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<span style="color:red">你好，加油，程序员！！！</span>
<div style="border: solid 1px blue; width:200px; height:200px"></div>
</body>
</html>
2-内部样式
把CSS代码放到style标签内，这种用法称为网页的内部样式，该方法适合为单页面定义CSS样式，不适合一个网站，或多个页面定义样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<style type="text/css">
body{
font-size: 12px;
color: #CCCCCC;
}
p {background-color: red ;}
</style>
青春真好！！！
</body>
</html>
3-外部样式
把样式放在独立的文件中，然后使用link标签或者@import关键字导入。一般网站都采用这样方法来设计样式，真正实现HTML和CSS的分离，以便统筹规划，设计，编辑和管理CSS样式。
首先创建my.css文件
body {font-size: 24px; color:#fff}
p{background-color: #00F}
在test.html中使用link标签导入css样式。
<!DOCTYPE html>
<link href="my.css" rel = "stylesheet" type = "text/css"/>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<p>加油吧，一群努力的程序员！</p>
</body>
</html>
或者使用@import方式导入外部样式my.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<style type="text/css">
@import url("my.css");
</style>
<p>加油吧，一群努力的程序员！</p>
</body>
</html>
元素选择器包含标签选择器，类选择器，ID选择器和通配选择器。
1-标签选择器
也成为欸类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。使用简单，直接应用，不过匹配范围过大，精度不够。
body {font-size: 24px; color:#fff}
p{font-size: 12px; color:red}
2-类选择器
类选择器以“.“符号为前缀，后面是一个类名，应用方法：在标签定义CSS属性，然后设置属性值为类选择器的名称。能够为不同标签定义相同样式，可以为同类标签定义多个样式，不过需要为标签定义class熟悉，影响文档结构，擦偶哦相对麻烦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<style type="text/css">
.red{color:red ;}
.underline{text-decoration: underline ;}
.italic{font-style:italic ;}
</style>
<body>
<p class = "red">我是红色字体</p>
<p class = "italic">我是斜体</p>
<p class = "underline">我是下划线</p>
<p class = "red italic underline">红色字体，斜体，下划线三合一</p>
</body>
</html>
3-ID选择器
ID选择器以#为前缀，后面是一个ID名，应用方法：在标签中定义id属性，然后设置属性名为ID选择器的名称。可以实现精确匹配，不过需要为标签定义id属性，相对于类选择器，缺乏灵活性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<style type="text/css">
#box{
background-color: red;
font-style: italic;
text-decoration: underline;
}
</style>
<body>
<div id = "box">问君能有几多愁，恰似一江春水向东流。</div>
</body>
</html>
加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<style type="text/css">
#box{
background:url(girl.png) center bottom;
height:200px ;
width:400px ;
border:solid 2px red;
padding: 100px ;
}
</style>
<body>
<div id = "box">问君能有几多愁，恰似一江春水向东流。</div>
</body>
</html>
4-通配符选择器
通配符用星号*表示，用来匹配文档中的所有标签。
以上是关于CSS样式表和元素选择器的主要内容，如果未能解决你的问题，请参考以下文章