CSS3重游之旅之css入门

1.css3简介

对CSS3已完全向后兼容，所以你就不必改变现有的设计.浏览器将永远支持CSS2.

---

2.css3模块

CSS3被拆分为"模块".旧规范已拆分成小块，还增加了新的.一些最重要CSS3模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

---

3.css3引入方式

<link rel="stylesheet" href="../css01.css">
<!--  使用的是link标签进行css样式表的引入 
或者可以在HTML文件中直接的来书写样式 -->
<style>
	body {
		background: red;
	}
</style>
<!-- 还有一种是内联样式 -->
<h1 style="color:green;">houdunren.com</h1>

---

4.选择器及其原理

样式是做用在元素标签上的，但是我们要先学会找到相应的元素,才可以查找元素来应用样式.

选择器	描述
.class	选择 class="intro" 的所有元素
#id	选择 id="firstname" 的所有元素
*	选择所有元素
element	选择所有 某个标签的元素
element,element	选择所有 某个标签的元素和选择所有 某个标签的元素
element element	选择元素内部的所有某个元素
element>element	选择父元素为某个元素的所有元素
element+element	选择紧接在某个元素之后的所有元素

标签选择器

body{
	margin: 0;
	padding: 0;
	background-color: #000000;
}

ID选择器

#lignt{
	width: 300px;
	height: 300px;
	border: 1px solid #00FA9A;
	border-radius: 30px;
	margin: 400px auto;
	position: relative;
}

类选择器

.title{
	width: 100%;
	height: 70px;
	line-height: 70px;
	font-size: 32px;
	text-align: center;
	margin-top: 30px;
}

后代选择器

main article h2,main h1 {
    color: green;
}

子元素选择

main article>h2 {
    color: green;
}

紧邻兄弟元素

main article+h2 {
    color: green;
}

后面兄弟选择器

main article~* {
    color: green;
}

---

5.伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则 .

状态	示例	说明
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数
:not(selector)	:not(p)	选择非元素的每个元素
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即html
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。