全栈工程师-前端开发-CSS3_响应式设计.docxVIP

PAGE1

PAGE1

CSS3基础

1CSS3选择器

1.1原理与内容

CSS3选择器扩展了CSS2.1的选择器功能，提供了更强大、更灵活的元素定位方式。这些选择器包括但不限于属性选择器、伪类选择器、伪元素选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器等。

1.2示例

/*属性选择器*/

a[target=_blank]{

color:red;

}

/*伪类选择器*/

a:hover{

color:blue;

}

/*伪元素选择器*/

p::first-letter{

font-size:2em;

}

/*子元素选择器*/

ulli{

list-style-type:none;

}

/*相邻兄弟选择器*/

h1+p{

color:green;

}

/*通用兄弟选择器*/

h1~p{

color:orange;

}

以上代码展示了如何使用CSS3选择器来定位和样式化HTML元素。例如，属性选择器可以定位具有特定属性的元素，伪类选择器可以定位元素在不同状态下的样式，而伪元素选择器则可以定位元素的特定部分，如首字母。

2CSS3属性与值

2.1原理与内容

CSS3引入了许多新的属性和值，以增强网页的视觉效果和交互性。这些新属性包括动画、过渡、多列布局、文本阴影、边框阴影等，而新值则包括颜色值、单位、函数等。

2.2示例

/*动画*/

@keyframesfadeIn{

from{opacity:0;}

to{opacity:1;}

}

div{

animation-name:fadeIn;

animation-duration:3s;

}

/*过渡*/

button{

transition:background-color0.5s;

}

button:hover{

background-color:yellow;

}

/*多列布局*/

.container{

column-count:3;

column-gap:20px;

}

/*文本阴影*/

h1{

text-shadow:2px2px5pxred;

}

/*边框阴影*/

.box{

box-shadow:0010px5pxrgba(0,0,0,0.5);

}

以上代码展示了如何使用CSS3的新属性和值来创建动画、过渡效果、多列布局、文本阴影和边框阴影。例如，@keyframes规则用于定义动画，transition属性用于定义过渡效果，而column-count和column-gap属性则用于创建多列布局。

3CSS3盒模型

3.1原理与内容

CSS3盒模型定义了元素的布局和尺寸，包括边框、填充、内容和边距。盒模型的属性包括width、height、padding、border和margin。CSS3还引入了box-sizing属性，可以更灵活地控制盒模型的尺寸计算方式。

3.2示例

/*默认盒模型*/

div{

width:200px;

padding:20px;

border:10pxsolidblack;

margin:10px;

}

/*box-sizing:border-box*/

div{

width:200px;

padding:20px;

border:10pxsolidblack;

margin:10px;

box-sizing:border-box;

}

在默认盒模型中，元素的总宽度等于width、padding和border的总和。而在box-sizing:border-box中，元素的总宽度等于width，padding和border的尺寸将从width中减去。

4CSS3背景与边框

4.1原理与内容

CSS3背景和边框属性提供了更丰富的样式化选项，包括背景图片的重复、位置、大小，以及边框的样式、颜色、宽度和圆角等。

4.2示例

/*背景图片*/

body{

background-image:url(background.jpg);

background-repeat:no-repeat;

background-position:center;

background-size:cover;

}

/*边框*/

div{

border:5pxsolidblack;

border-radius:10px;

}

/*多重边框*/

button{