css3基础教程(前端基础CSS3)

知识点1:CSS3CSS3是CSS语言的最新版本,旨在扩展CSS2.1,它增加了许多新特性与新的布局方式,今天小编就来聊一聊关于css3基础教程?接下来我们就一起去研究一下吧!

css3基础教程(前端基础CSS3)

css3基础教程

知识点1:CSS3

CSS3是CSS语言的最新版本,旨在扩展CSS2.1,它增加了许多新特性与新的布局方式。

为了加快那些已经确认没有问题的特性的标准化速度,CSS3划分了一系列相互独立的模块,按照各自进度来进行标准化。因此现在标准CSS包括修订后的CSS2.1以及完整模块对它的扩充,模块的level数并不一致。W3C会定期发布snapshots(快照),列出CSS2.1和成熟的模块。

有的CSS模块已经十分稳定,使用时也不必添加前缀,其状态为CSSWG规定的三个推荐品级之一:候选推荐、建议推荐或推荐。不稳定的特性应以浏览器引擎为前缀并谨慎使用。

知识点2:颜色模块Level3

1.增加opacity属性,用于指定元素透明度,可为0.0~1.0。被应用元素和其子元素会被当成一个整体看待,具有相同透明度,即便子元素有不同opacity值;

2.可使用hsl()、hsla()、rgba()、rgb()来创建color值;

3.transparent颜色目前是真彩色而且是rgba(0, 0, 0, 0.0)的别名。

知识点3:选择器Level3

1.增加子串匹配的属性选择器,E[attribute^="value"],E[attribute$="value"],E[attribute*="value"];

2.增加新的伪类,如:enabled,:disabled,:checked,:nth-child,:nth-of-type,:empty,:not等;

3.伪元素使用两个冒号而不是一个冒号来表示;

4.新的普通兄弟选择器~,用于选择“某元素后所有同级的指定元素”。

知识点4:媒体查询

使用@media媒体查询,可以针对不同的设备定义不同的样式。其包含一个可选的媒体类型和零或多个媒体特性表达式(表达式要用括号),语法为:@media mediatype and|not|only (media feature) {CSS-Code;},也可以在link中使用media="mediatype and|not|only (media feature)"属性来针对不同媒体使用不同样式表。

可以使用not(对整个媒体查询取反)、and(同时满足)和only(防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式)来构建复杂的媒体查询。若使用了not或only则必须指定一个媒体类型。也可以将多个媒体查询以逗号分隔放在一起,相当于or。

常见媒体查询有:

//宽高比为16:9或者16:10的宽屏设备

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { CSS-Code }

//向显示在设备最大宽度800px的屏幕上的文档应用样式表

<link rel="stylesheet" media="screen and (max-device-width: 800px)" />

//设备处于竖屏模式

@media all and (orientation: portrait) { CSS-Code }

//可视区域的宽度在500到800px之间的屏幕

@media screen and (min-width: 500px) and (max-width: 800px) { CSS-Code }

知识点5:背景与边框模块Level3

1.支持多背景图片,例:background-image:url(bg_flower.gif),url(bg_flower_2.gif);

2.新增属性background-size规定背景图片的尺寸,例:background-size:63px 100px;

3.新增属性background-origin规定背景图片的定位区域,例:background-origin:content-box;

4.支持圆角边框:border-radius,该属性是一个简写属性,也可分别设置四个属性:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。例:border-radius:25px;

5.支持图片创建边框:border-image,该属性是一个简写属性,用于设置border-image-source图片路径、border-image-slice图片边框向内偏移、border-image-width图片边框宽度、border-image-outset图像区域超出边框的量、border-image-repeat是否平铺铺满或拉伸。例:border-image:url(border.png) 30 30 round;

6.支持元素阴影:box-shadow。例:box-shadow: 10px 10px 5px #888888;前两个值必须,为水平阴影与垂直阴影的位置。

知识点6:值和单位模块Level3

1.initial(最初值)和inherit(从父元素继承值)关键字能被用于任意CSS属性中;

2.定义了新的相对字体长度单位:rem和ch。rem相对于html的font-size,而1ch=1英文=1数字=0.5汉字。

3.定义了相对视口长度单位:vm,vh,vmax和vmin。vw为可视区域宽度,总宽度为100vw,vh为可视区域高度,总高度100vh,vmin在可视区域宽度和高度取小,vmax则取大。

知识点7 . 盒模型

7.01 、盒子模型的概念

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容,内边距(padding),边框(border)和外边距(margin)组成。

a、网页就是多个盒子嵌套排列的结果

b、内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的背景色或背景图像也将出现在内边距中

c、外边距是该元素与相邻元素之间的距离

d、如果给元素定义边框属性,边框将出现在内边距和外边距之间

注意:虽然盒子模型拥有内边距,边框,外边框,宽和高这些基本属性,但是并不是要求每个元素都必须定义这些属性。

2 . 边框属性

border:设置元素的边框(width stylecolor)/四边宽度,四边样式,四边颜色

border-width:设置元素边框的宽度、像素值

border-style:设置元素边框的样式 none:无(默认)/solid(单实线)/dashed(虚线)/dotted(点线)/double(双实线)

border-color:设置元素边框的颜色

7.01、单独设置元素上边框

border-top :宽度/样式/颜色

border-top-width :宽度

border-top-style :样式

border-top-color:颜色

7.02、单独设置元素右边框

border-right:宽度/样式/颜色

border-right-width:宽度 border-right-style:样式 border-right-color:颜色

7.03、单独设置元素的下边框

border-bottom:宽度/样式/颜色

border-bottom-width:宽度

border-bottom-style:样式

border-bottom-color:颜色

7.04、单独设置元素的左边框

border-left:宽度/样式/颜色

border-left-width:宽度

border-left-style:样式

border-left-color:颜色

7.05、综合设置边框

像border,border-top等这样,能够一个属性定义元素的多种样式,在CSS中称之为复合属性。

常用的复合属性有font、border、margin、padding和background等。

复合属性可以简化代码,提高页面的允许速度,但是如果只有一项值,最好不要用复合属性,以免样式不被兼容。

Tips:

a. 表单的边框通常改为0;

Border:0 none;//兼容所有浏览器

b. 表格的细线边框

Table{border-collapse:collapse;}

c. 轮廓(链接有虚线和文本框有蓝色边框)

Outline-style:none;

Padding属性用于设置内边距,也是复合属性,相关设置如下:

Padding-top:上内边距

Padding-right:右内边距

Padding-bottom:下内边距

Padding-left:左内边距

Padding:上内边距、右内边距、下内边距 、左内边距

内边距是享有背景色的

7.06、外边距属性

Margin属性用于设置外边框,也是复合属性,相关设置如下:

Margin-top:上外边距

Margin-right:右外边距

Margin-bottom:下外边距

Margin-left:左外边距

Margin:上外边距/右外边距/下外边距/左外边距

Margin相关属性的值,以及符合属性margin取1~4个值得情况与padding相同

外边距可以使用负值,使相邻元素重叠

对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中,实际工作中常用这种方式进行网页布局,实例代码如下:

.header{width:960px;margin:0 auto};

为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:

*{padding:0 /*清除内边距*/

Margin:0; /*清除外边距*/}

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页