CSS3基本样式

最新推荐文章于 2024-07-24 20:47:06 发布

追光者de码农

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量244

点赞数

分类专栏： css3 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/weixin_48016008/article/details/120507840

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，
弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的兼容情况

CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性。

下面介绍这些私有属性：

Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。
Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。
Konqueror引擎浏览器使用“-khtml-”作为私有属性。
Opera浏览器浏览器使用“-o-”作为私有属性。
IE浏览器使用“-ms-”作为私有属性，只有IE8以上支持。

css:
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
transition:1s;
JS:
WebkitTransition:1s;
MozTransition:1s;
OTransition:1s;
Transition:1s;

这些专用私有属性虽然可以避免不同浏览器在解析相同属性时出现冲突，但是却给开发人带来了诸多不便。因为，开发人员不仅需要写更多的代码，而且还非常容易导致同一个页面在不同的浏览器之间表现不一致。当然随着CSS3的普及，这种情况一定会得到改善。

2. 新增选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。

2.1 选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器,

h1 + p {
    margin-top:50px;
}

2.2 匹配选择器

匹配所有在#div元素之后的同级p元素。

 div ~ p {
 	background-color: #f00;
 }

2.3 属性选择器

CSS3新增加了属性选择器，使选择器引入了通配符的概念。这3中常用的属性选择器如下所示：

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=*value]	匹配属性值中包含指定值的每个元素。
[attribute~=value]	用于选取属性值中（包含）指定词汇的元素，后面还可以空格为分隔符。
[attribute\|=value]	用于选取带有以指定值（开头）的属性值的元素，后面还可以连字符为分隔符。

2.4 结构性伪类选择器（重点）

结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示：

2.4.1 整体结构类型

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。

2.4.2 标签结构类型

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
:last-of-type 匹配某个父元素中最后一个某一类型的元素。

2.4.3 指定子元素的序号

:nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3），参数的索引起始值时1，而不是0。
:nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。
:nth-last-of-type(n) 匹配指定序号的同一种类型的子元素（从后往前数）。参数同上。

2.4.4 其他伪类选择器

:root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。
:empty 指定当元素内容为空白时使用的样式。
:not(selector)排除selector选择器选中的元素，不对它们应用样式解析。
:target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。

2.5 状态伪类选择器

2.5.1 文本选择伪类

::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性：color、background、cursor等。
:first-letter：对每个文本的首个字符
:first-line:对每段文本的第一行

2.5.2 内容追加伪类（重点）

::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)

//在每个 <p> 元素前面插入内容，并设置所插入内容的样式：

p:before
{ 
content:"开心";
background-color:yellow;
color:red;
font-weight:bold;
}
a::after {
  content: "每一天";
}

多学一招

注意：:before和::before写法的区别

相同点

1.都可以用来表示伪类对象，用来设置对象前的内容，:before和::before写法是等效的

2.伪类对象要配合content属性一起使用

3.伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

4.所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，

不同点

:before是css2的写法，::before是css3的写法，在H5开发中建议使用::before比较好。

2.5.3 表单中使用的状态伪类选择器

:disabled 指定当前元素处于不可用状态时的样式。
:enabled 指定当前元素处于可用状态时的样式。
:checked 指定表单中单选框或复选框处于选中状态时的样式。

2.6 JS新增的选择器（重点）

querySelector();

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function() {
			var div1 = document.querySelector("[myselect=hello]");
			div1.style.background = "red";
		}
	</script>
</head>
<body>
	<div id="div1" myselect="hello">哈哈哈</div>
</body>
</html>

querySelectorAll();

window.onload = function() {
		var boxs = document.querySelectorAll(".box");
		console.log(boxs);
}

3. 背景样式补充

多重背景

在CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示。（最后写在最下面）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			background-image: url(img/1.jpg),url(img/3.jpg),url(img/2.jpg);
			background-repeat: no-repeat, no-repeat, no-repeat;
			background-position: 5% 100%, 95% 0%, top;
			padding: 300px 0;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

追光者de码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基本样式

1. CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。CSS3的兼容情况CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性。下面介绍这些私有属性：Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safar
复制链接

扫一扫

专栏目录