web前端核心--css3初篇

CSS3概述:

CSS是一种网页控制技术,全称(Cascading Style Sheet,层叠样式表)采用CSS技术,可以有效地对页面布局、字体、颜色、背景和其他效果实现更加精准的控制。网页最初是用HTML标签定义页面文档及格式的,如标题标签<h1>、段落标签<p>等,但是这些标签无法满足更多的文档样式需求。为了解决这个问题W3C在1997年颁布HTML4标准的同时,同时公布了CSS。目前,被广泛使用CSS3版本。

CSS3的主要新特性:

1. 功能强大的选择器:

选择器是CSS3中一个重要的内容,使用它可以大幅度开发人员书写或修改样式时的工作效率。选择器的使用可以避 免在标签添加大量的class和id属性,并且可以让设计师更方便地维护样式表。CSS3的选择器不必使用多余的类、id或者JavaScript的脚本。

2. 半透明效果的实现:

RGBA和HSLA不仅可以设定色彩,还能设定元素的透明度。另外,还可以使用opacity属性定义元素的不透明度。

3.多栏布局

在CSS3让网页设计师不必使用多个<div>标签就能实现多栏布局。浏览器能解决多栏布局属性并生成多栏,让文本实现纸质的多栏结构。

4. 多背景图

CSS3允许背景属性设置多个属性,如background-image、background-repea、background-size、background-position 、background-originand、background-clip.等,这样就可以在一个元素上添加多层背景图片。如果要设计复杂的网页效果(如圆角、背景重叠等),就不再用为HTML文档添加多个无用的标签了,使用改属性还可以优化网页文档结构。

5. 文字阴影

text-shadow在css2中就已经存在,但并没有被广泛应用。CSS3采用了改特性,并重新进行了定义。改属性提供了一种的、跨浏览器的方案使文字看起来更醒目。

6.开放字体类型

@font-face是最被期待的CSS3特性之一。它在CSS2中就已经被引入了,但是它在网站上仍然没有像其他CSS3属性那样被广泛普及,这主要受阻于授权和版权问题,潜入的字体很容易从网站上下载到,这是字体厂商的主要顾虑。

7.圆角边框

border-radius属性可以实现不使用背景图片也能给HTML元素添加圆角。它可能是现在使用最多的CSS3属性。改属性之所以这么受欢迎,主要是因为使用比较美观,而且不会与设计和可用性产生冲突。它不同于添加JavaScript或多个HTML标签,仅需添加一些CSS属性。这个方案简洁而有效,可以让开发人员免于花费更多的时间来寻找精巧的浏览器方案和基于JavaScript的圆角。

8. 边框图片

border-image属性允许在元素的边框上设定图片,这使得原本单调的边框样式变得丰富起来。改属性给设计师提供了一个很好的工具,使用它可以方便地定义和设计元素边框样式,比background-image属性和一些干燥的默认边框样式更好用。有了border-image属性以后,可以明确地定义一个边框应该如何缩放或平铺。

9.盒子阴影

box-shadow属性可以为HTML元素添加阴影而不需要使用额外的标签或背景图片。

10. 媒体查询

在CSS3中加入Media Queries 模板,在改模板中允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型来选择应该使用的样式。简单地来说,就是允许在不改变内容的情况下,在样式表中选择一种页面的布局以精确地适合不同的设备,从而改善用户体验。

最常用的css语法格式是css文件链接到HTML文件。
在HTML页面的<head>标签中添加如下代码:

<link href="css/stylesheet.css"type="text/css" rel="stylesheet">

其中href为CSS文件的地址,type表示所链接文件的类型,rel表示所链接文件与改HTML文件的关系。type和rel属于的属性值是不需要用户改变的。上面链接css文件必须写在<head></head>标签之间。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章