css3，css和css3 有什么区别

大家好，今天给各位分享css3的一些知识，其中也会对css和css3 有什么区别进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

css和css3 有什么区别

都是网页样式code，不同的在于css3比css多了一些样式设置而已。

css3是向前兼容的，也就是说，css中有效的code在css3也有效。

以上是纯code方面来看，而对于具体的显示效果，还要看浏览器对其的支持情况。

举2个简单的例子：

一、一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。

二、一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。

css3和css，在编写code的时候，除了对一些css3中新出现的属性设置，其它完全一样。

css3和css一样吗

首先可以确认一点的是，CSS3和CSS本质上是一样的，都是层叠样式表，但两者又有很大的区别，或者说CSS3是CSS的升级补充版本。

CSS3和CSS本质上是一样的

CSS是层叠样式表（CascadingStyleSheets）的英文简称，它主要用来对页面进行样式修饰（定义了HTML元素的显示方式）的。

而CSS3是CSS的最新“标准”，也是CSS的版本升级，推出了一些新的东西：盒子模型、多栏布局、媒体查询、动画、背景和边框、列表模块、语言模块、文字特效等模块。

可能有人会问，有CSS和CSS3，那有没有CSS2呢？其实，我们现在所说的CSS就是CSS2版本，CSS2的精髓就是内容和表现分离。

CSS3并未成为真正的标准

特别是现在移动互联网及H5的兴起，CSS3的应用更为广泛了，但值得注意的是：CSS3当前依旧没能成为真正的标准！为什么呢？因为现在市面上的浏览器太多，而不同浏览器对于CSS3的支持程度不同，不同浏览器还使用了不同的前缀来修饰样式，如：

谷歌Chrome、苹果Safari：-webkit-

微软IE：-ms-

火狐Firefox：-moz-

css3美化网页有几种形式

css3美化网页元素

<span>标签</span>

属性名含义举例

font-family设置字体类型 font-family:"隶书"

font-size设置字体大小 font-size：12px;

font-style设置字体的风格 font-style:italic;

font-weight设置字体粗细 font-weight：bold;

font在一个声明设置所有字体属性 font：italicbold36px"宋体"

font-style属性

normal正常

italic倾斜（用的多）

oblique斜体

font-weight属性

值说明

normal默认值定义标准字体

bold粗体字体

bolder更粗字体

lighter更细字体

100....900定义由粗到细的字体400等同于normal,700等同于bold

font属性

字体属性的顺序：字体风格---字体粗细--字体大小---字体类型

p span{

font:obiqer bold 12px"楷体"

}

文本属性

属性含义举例

color设置文本颜色 color#ooc;

text-align设置元素水平对齐方式 text-align:right;

text-indent设置首行文本缩进 text-indent:20px;

line-height设置文本行高 line-height:25px;

text-ddecoration蛇者文本装饰 text-decoration:underline;

值说明

left把文本排列到左边。默认值：由浏览器决定

right把文本排类到右边

center把文本排类到中间

justify实现两端对齐文本效果

首行缩进

text-indent：em或px

行高

line-height：px

文本装饰

text-decortion属性

值

none默认值，定义标准文本

underline设置文本下划线

overline设置文本上划线

line-through设置文本删除线

垂直对齐方式

vertical属性：middle、top、bottom。

文本阴影

text-shadow：color x-offset y-offset blur-radius

字体属性

字体属性的顺序：字体风格----字体粗细----字体大小---字体类型

伪类名称含义实例

a：link未单击访问时超链接样式 a:link{color：#9ef5f9;}

a:visited单击访问后超链接样式 a：visited{color：#333；}

a:hover（记住）鼠标悬浮上的超链接样式 a:hover{color:#ff7300;}

a:active鼠标单击未释放的超链接样式 a:active{color:#999;}

伪类样式

标签名：伪类名{声明；}

设置伪类的顺序：a:link>a:visited>a:hover>a:active

list-style-type

none无标记符号

disc实心圆

circle空心圆 list-style-type：none；

square实心正方形

decimal数字

list-style-image

list-sytle-position

list-style（记住）

背景颜色

background-color

transparent透明色

背景图像

background-image:url(图片路径)

背景重复方式

background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

背景定位

background-position属性

值含义

xpos单位：px，Xpos表示水平位置，Ypos表示垂直位置

X% Y%使用百分比表示背景位置

X Y方向关键字水平方向关键字：left center right

垂直方向关键词：top center bottom

背景尺寸 background-size

属性值描述

auto默认值，使用背景图片保持原样

percentage当使用百分值时，不是相对于背景的尺寸大小来计算的而相对元素宽度来计算的

cover整个背景图片放大填充了整个元素

contain让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适合所定义背景的区域

线性渐变

颜色沿着一条直线过渡；从左到右、从右到左、从上到下

语法

liner-gradient{position(渐变方向）color1,color2,...)

经向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，从而从一个起点朝所有方向混合

css3的选择器有哪些

css3选择器如下：

一、通配符选择器（*）

通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。

二、元素选择器（E）

元素选择器，是css选择器中最常见而且最基本的选择器。

三、类选择器（.className）

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名

四、id选择器（#ID）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）,

五、后代选择器（E F）

后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E

F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。

六、子元素选择器（E&gt;F）

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E&gt;F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E

F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E&gt; F，其中F仅仅是E的子元素而以。

七、相邻兄弟元素选择器（E+ F）

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。

文章分享结束，css3和css和css3 有什么区别的答案你都知道了吗？欢迎再次光临本站哦！