长沙网站建设:CSS3在果壳中 - 新功能,它能做什么和资源

善微科技 2018 09月27日 发布

虽然,它已经有一段时间正式发布了。如果你还没有阅读关于HTML5的文章,长沙网站建设强烈建议你这样做,因为CSS3可以更好地使用万维网联盟的最新标记语言。


CSS2早在1998年出现,从那时起互联网上发生了很多事情。它的唯一修订是在2011年制作的,CSS2.1,但业内专家表示,CSS3应该发布只是时间问题,因为它带来的功能是完全必要的,并且在过去几年中被遗漏了。


您的Designer Toolbox 

Unlimited下载:500,000多个Web模板,图标集,主题和设计资产


现在下载


许多人对CSS3不了解的是,它的开发仅在提交其先前版本一年后开始。所以W3C自1999年以来一直在研究这个改进的版本,已经有超过12年的时间,直到第一个CSS3稳定版本发布。


虽然听起来CSS2和CSS3之间存在很大差异(这是非常正确的),但所有现代浏览器都很快采用了W3C系列的新增功能。所有主流浏览器都支持当前可用的大多数CSS3功能。


您可能也喜欢:HTML5简介。


与HTML5一样,联盟仍然认为CSS3处于持续开发状态,并且它不太可能获得最终版本,原因与HTML5可能不同。随着网络需求和整个行业的变化如此之快,编码需要以同样的速度向前发展。


CSS3中的CSS3与CSS2的主要区别

也许CSS2和CSS3之间的最大区别在于模块的分离。虽然在之前的版本中,所有内容都是定义不同功能的大型单一规范,但CSS3分为几个文档,称为模块。


每个模块都具有新功能,而不会损害先前稳定版本的兼容性。当我们谈论模块时,我们可以命名超过五十个。但是,其中四个已作为正式建议发布。该四大包含以下内容:


媒体查询(2012年发布)

命名空间(2011年发布)

选择者等级3(2011年出版)

颜色(2011年出版)

该媒体查询很可能是最重要的除了CSS。它的作用很简单:它允许将某些条件应用于不同的样式表,使网站流畅并适合各种屏幕尺寸。媒体查询允许开发人员定制到不同的分辨率,而无需更改或删除内容。


媒体查询

使用媒体查询构建的响应网格示例


媒体查询非常容易,一旦你完成了设置就可以使用它们。让我们看一下代码行。


@media screen和(max-width:600px){屏幕和(最大- 宽度:600px ){   

    背景:#FFF;:#FFF; 

}}

通过在上面的媒体查询中开始设置样式,您将仅为最大宽度为600像素的屏幕设置样式。在上面的示例中,所有最大宽度为600像素的屏幕将显示白色背景。


但是,max-width不是可以应用于样式表的唯一条件。您也可以使用max-device-width(这是屏幕分辨率,不同于最大宽度,即查看区域),您可以使用min而不是max,但您也可以组合两个条件,例如下面的示例,这仅适用于观看区域在600到900像素之间的屏幕。


@media screen和(min-width:600px)和(max-width:900px){屏幕和(最小- 宽度:600px )和(最大- 宽度:900px ){      

    背景:#FFF;:#FFF; 

}}

CSS3为便携式设备提供了一些预定义的样式表,例如iPhone或iPad,您可以在下面看到:


<link href =“iphone4.css”rel =“stylesheet”media =“only screen and(-webkit-min-device-pixel-ratio:2)”type =“text / css”/>

<link href = “iphone4.css” rel = “stylesheet” media = “only screen and(-webkit-min-device-pixel-ratio:2)” type = “text / css” />     


<link href =“portrait.css”rel =“stylesheet”media =“all and(orientation:portrait)”/>

<link href = “portrait.css” rel = “stylesheet” media = “all and(orientation:portrait)” />    

 


<link href =“landscape.css”rel =“stylesheet”media =“all and(orientation:landscape)”/>

<link href = “landscape.css” rel = “stylesheet” media = “all and(orientation:landscape)” />    

如您所见,当开发人员需要使流体网格在不同屏幕尺寸的不同设备上工作时,媒体查询可以非常方便。


CSS3的其他一些重要的设计考虑因素是,例如,边框,现在可以在没有黑客的情况下进行圆整。CSS3实际上引入了更圆的边框,这对设计人员和开发人员来说是一个巨大的帮助。


但是,许多这些功能在旧版本的Internet Explorer中不起作用,但这对我们来说并不新鲜,我们之前已经听过。您需要在样式表中添加的唯一代码(在特定类中)类似于:


-moz-border-radius:5px;moz - border - radius :5px ; 

-webkit-border-radius:5px;- webkit - border - radius :5px ; 

边框:2px solid#897048;:2px solid #897048; 

如您所见,它比以前容易得多。


渐变也可以在CSS3中使用,这是我们想要看一段时间的另一个很酷的补充,以及框/文本阴影和边框图像。


为了在没有任何黑客的情况下向内容添加文本阴影,CSS3只需要类似于以下代码行的内容:


text-shadow:2px 2px 2px #ddccb5;

- shadow :2px 2px 2px #ddccb5;    

创建内容列比使用CSS3更容易,因为现在您可以随时使用四行代码。这些是:


列数

列宽

柱隙

列治

另一个节省时间的选择是直接从CSS插入多个背景,而不是像以前那样使用各种黑客。代码很容易编写和记忆,我相信你会在某个时间点使用它。


.multiplebackgrounds {multiplebackgrounds {

身高:100px;:100px ; 

宽度:200px;:200px ; 

填充:20px;:20px ; 

background:url(top.gif)右上角不重复,:URL (顶部。GIF )右上角没有- 重复,

url(bottom.gif)左上方重复y,(底部。GIF ),左上重复- ? ,

url(middle.gif)bottom repeat-z;(中间。GIF )底部重复- ? ;

}}

供应商前缀

当CSS3新发布时,供应商前缀一直被使用,因为它们帮助浏览器解释代码。有时你仍然需要在今天使用它们,以防你正在测试的浏览器没有读取代码。以下是主要浏览器的所有供应商前缀的简短列表:


-moz- :Firefox

-webkit- :Webkit浏览器,如Safari和Chrome

-o- :歌剧

-ms- : IE浏览器

请注意,根据几周前的官方新闻稿,Opera也将很快在WebKit上构建他们的新桌面和移动浏览器,而不是他们当前的Presto渲染引擎。这意味着-o-供应商前缀将在某个时间点消失,只剩下三个主要前缀。


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/436.html