编程知识 cdmana.com

css3总概

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) 选择属于其父元素第二个元素的每个元素。

版权声明
本文为[魂界良人]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/zkh-blog/p/14384742.html

Scroll to Top