CSS新手入门之———简介+常用选择器

​

CSS简介

CSS，是层叠样式表（Cascading Style Sheets），用来对网页中的元素进行控制，对排版进行美化。能够做到页面的样式和结构分离。

区分CSS和HTML、JavaScript

把网页理解为一个人，HTML就是人的骨架，即网页的结构；JavaScript就是人的魂魄，即网页的行为动作；CSS则是人的皮，即网页的外观表现。

CSS基本语法规范

选择器＋｛１条／N条声明｝

<style>
    p {
        color: red;
        font-size: 13px;
    }
</style>

<p>hello</p>

---

CSS分类：

1. 内部样式表： 写在style标签中，放在html的head标签内部。可以让样式与页面结构分离，样式在头部head标签里，结构在正文body中。

2. 外部样式表： 创建一个CSS文件，使用link标签引入html。

<link rel="stylesheet" href="[CSS文件路径]">

3. 内联样式表（行内样式表）： 通过style属性，来指定某个标签的样式。只针对某个标签生效。优先级较高，会覆盖其他样式。

---

几种常用的选择器：

一、基础选择器

---

1. 标签选择器：

可以快速把同一类型的标签都选择出来。但是不能差异化选择。

<style>
	p{
		color:red;
	}
	div{
		color:green;
	}
</style>

<p>How are you?</p>
<div>Fine,thank you.</div>

效果如下：

2. 类选择器：

在标签选择器的基础上，差异化不同的标签。使用class属性来调用，用‘ . ’开头。

一个标签可以使用多个类，一个类也可以被多个标签使用。

<style>
	.blue{
		color:blue;	
	}
	.decoration{
		text-decoration:underline;
		/*设置下划线 */
	}
</style>

<div class="blue">类选择器</div>
<div>类选择器</div>
<div class="blue decoration">类选择器</div>

效果如下：

3.id选择器：

和类选择器类似，两个选择器最大的区别是id选择器是唯一的。使用id属性来调用，用‘ # ’开头。

<style>
	#test {
		color:blue;	
		font-family:黑体;
		font-size:40px;
	}
</style>
	
<div id="test">测试</div>

效果如下：

4.通配符选择器：

使用‘ * ’，选择所有标签。

*{
	color:red;
	/* 将页面的所有内容都改成红色*/
}

二、复合选择器

后代选择器:

又叫包含选择器，可以选择父元素中的某个子元素，或者子元素的子元素。
只需要把父元素标签、子元素标签、子元素的子元素标签依次写下即可，中间使用空格分割。

<ul>
	<li>111</li>
	<li>222</li>
	<li>333</li>
</ul>

<ol>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
</ol>

<style>
	ul li {
		color:red;
	}
</style>

效果如下：

还有一些复合选择器如子选择器、并集选择器等没有提到，以上介绍的是比较常用的几个选择器，有兴趣的朋友可以去搜搜看其他的复合选择器学习一下。