目录
min-width属性:配置元素的内容在浏览器可视区域中最小的宽度。
max-width属性:配置元素的内容在浏览器可视区域中最大宽度。
CSS3 background-clip属性:配置背景图片的剪裁和大小
CSS3 background-origin属性:配置背景图片的位置
CSS3 background-size属性用于改变图片的大小和进行缩放
1.学习和运用CSS框模型;
width属性:配置元素的内容在浏览器可视区域中的宽度。
可以指定带单位的数值(比如700px或20em)或相对于父元素的百分比(比如80%)。但是这并不是元素的实际宽度。实际宽度有元素的内容、填充、边框和边距构成。width属性只指定内容宽度。
min-width属性:配置元素的内容在浏览器可视区域中最小的宽度。
可以指定带单位的数值(比如100px或20em)或相对父元素在百分比(比如75%)。设置最小宽度可防止内容在网页浏览器改变大小时跑来跑去。如果浏览器变得比最小宽度还小,就显示滚动条。
max-width属性:配置元素的内容在浏览器可视区域中最大宽度。
可以指定带单位的数值(比如90px)或相对父元素的百分比(比如90%)。设置最大宽度可以防止文本在高分辨率屏幕中显示很长的一行。
height属性:配置元素的内容在浏览器可视区域的高度。
可以指定带单位的数值(比如90px)或者相对父元素的百分比(比如60%)。没有配置height或者line-height属性可能造成背景图片的一部分被裁掉。
框模型
2.用CSS配置宽度和高度;
元素块的高度和宽度不止可以在HTML网页中的标签中设置,还可以用CSS设置配置,包括配置width、height、min-width、max-width;
eg:
#border2{ background-color: #6A6AA7; width:500px; min-width:400px; max-width:600px; height:100px; margin-left: auto; margin-right: auto; }
3.用CSS配置边距、边框和填充;
margin属性:配置元素各边的边距
- 配置元素与相邻元素之间的空白。
- 边距总是透明,在该区域看到的时网页或父元素的背景色;
- 使用带单位的数值(px或em)配置边距大小。设为0(不写单位)将消除边距。值"auto"告诉浏览器自动计算边距。
- 可单独配置margin属性值;
padding属性:配置HTML元素内容与边框之间的空白
padding默认为0.如果为元素配置了背景颜色或图片,该背景会同时应用于填充区域和内容区域。
边框 border属性:配置围绕元素的边框
边框默认设为0,就是不显示。
以下是CSS配置border-width设置为3px,border-color设置为#000033,border-style设置为dashed:
.dashedborder{ border-width:3px; border-style:dashed; border-color:#000033; }
4.用CSS居中页面内容;
在第五章中学习了如何在div或者其他元素快中居中显示文本,但是如何在网页中举重显示元素快呢?一个流行的写法就是用CSS样式规则配置;将元块的margin-right和margin-left设置成auto,这就是告诉浏览器自动分配左右边距;
eg:
#border2{ background-color: #6A6AA7; width:500px; height:100px; margin-left: auto; margin-right: auto; }
结果:
5.用CSS3添加阴影;
CSS3的box-shadow属性:为边框模型创建阴影效果
属性值包括阴影的水平偏移、垂直偏移、模糊半径(可选)、伸缩距离(可选)和颜色;
水平偏移:像素值。正值在右侧显示阴影,负值在左侧显示。
垂直偏移:像素值。正值在下方显示阴影,负值在上方显示。
模糊半径(可选):像素值。不能为负值。值越大越模糊。默认值0配置锐利的阴影。
伸展距离(可选):像素值。默认值0,正值时阴影扩大,负值使阴影收缩。
颜色值:为阴影配置有效颜色。
要配置内部阴影效果,请包含可选的inset关键字。默认阴影是在边框外。使用inset后,阴影在边框内(即使是透明边框)背景内容之上。
eg:设置边框阴影为 框内 深灰色,水平和垂直偏移都是5px,模糊半径是5px;使用默认伸展距离:
#border2{ width:500px; height:100px; margin-top: 20px; margin-left: auto; margin-right: auto; border-style:ridge; box-shadow:inset 5px 5px 5px #828282; }
结果:
CSS3的text-shadow属性:为文本创建阴影效果
属性值包括阴影的水平偏移、垂直偏移、模糊半径(可选)和颜色;
水平偏移:像素值。正值在右侧显示阴影,负值在左侧显示。
垂直偏移:像素值。正值在下方显示阴影,负值在上方显示。
模糊半径(可选):像素值。不能为负值。值越大越模糊。默认值0配置锐利的阴影。
颜色:为阴影配置有效颜色。
eg:为文本配置一个黄色的阴影,水平和垂直都是3px,模糊半径5px:
#TextShadow{ text-shadow: 3px 3px 5px #FF0000; }
结果:
6.用CSS3配置圆角;
border-radius属性:创建圆角边框
border-radius属性指定的是圆角的半径,可以是1~4个数值(包括像素或em单位)或百分比.如果只提供一个值,标识该值应用于全部4个角.就按左上、右上、右下和左下的顺序配置(顺时针)。
另外还有border-bottom-left-radius(左下)、border-bottom-right-radius(右下)、border-top-left-radius(左上)、border-top-right-radius(右上)属性配置每个角。
eg
#border1 { background-color: #74C0FF; margin-left:60px; padding:5px 20px; border-top-left-radius: 90px; border-bottom-left-radius: 90px; }
结果:
7.用CSS3配置背景图片在框模型的显示;
CSS3 background-clip属性:配置背景图片的剪裁和大小
属性值:
content-box: 剪裁图片使之适应内容后面的区域;
padding-box:剪裁图片使之适应内容和填充后面的区域;
border-box(默认):剪裁图片使之适应内容、填充和边框后面的区域;
eg:content-box:
#border2{ background-image:url(../img/1.jpg); background-clip: padding-box; width:500px; height:200px; margin-top: 20px; margin-bottom: 10px; margin-left: auto; margin-right: auto; padding :20px; border-style:dashed; border-width: 20px; }
content-box:
padding-box:
border-box:
CSS3 background-origin属性:配置背景图片的位置
属性值:
- content-box:相对内容区域定位;
- padding-box:相对填充区域定位;
- border-box:相对边框区域定位;
样例就留给大家把,这个样例就相当与游标图片相对信封的位置;
CSS3 background-size属性用于改变图片的大小和进行缩放
属性值:
- 一对百分比值(宽度、高度):如果只提供一个值,第二个值默认为auto;
- 一堆像素值(宽度、高度):如果只提供一个值,第二个值默认为auto;
- cover:缩放背景图片并保持图片的比例不变,使图片高度和宽度完全覆盖区域;
- contain:缩放背景图片并保持图片比例不变,使图片高度和宽度适应区域;
eg:一张完整的图片如图;用做div元素块的背景图片:代码:
#border2{ background-image:url(../img/2.jpg); background-clip: padding-box; background-size: cover; width:500px; height:200px; margin-top: 20px; margin-bottom: 10px; margin-left: auto; margin-right: auto; padding :20px; border-style:dashed; border-width: 20px; }
cover效果:
contain效果:
8.用CSS3配置透明、RGBA颜色和渐变;
CSS3的opacity属性:配置元素的不透明度
opacity的值从0(完全透明)到1(完全不透明),就是约靠近1越不透明。文字和背景同时透明。
eg:将标题h1文字和背景设置为50%透明:
body{ background-image:url(../img/1.jpg); } h1{ text-align: center; padding-top: 100px; height: 150px; background-color: #828282; opacity:0.5; }
结果:
后面会有文字不透明、图片不透明和背景透明,文字不透明的CSS3设置。
CSS3 RGBA颜色:
CSS3允许通过color属性配置透明度颜色,称为RGBA颜色。需要4个值:红、绿、蓝和alpha值(透明度)。RGBA颜色使用不是十六进制而是使用十进制。
红、绿和蓝必须使0~225的十进制。alpha值必须是0(完全透明)~1(完全不透明)之间的数字;
CSS3 HSLA颜色:
Web开发人员多年一直在用十六进制或者十进制配置RGB颜色.RGB颜色依赖于硬件,即使计算机显示屏发出红、绿、和蓝光。CSS3引进称为HSLA的一种新的颜色表示系统。它基于一个色轮模型。HSLA是Hue(色调)、Saturetion(饱和度)、Lightness(亮度)、Alpha(透明度)的手写字母缩写。
- 色调:是一个彩色的圆,色调定义实际的颜色。是0~360的一个数值;
- 饱和度:配置颜色的强度。用百分比值表示;
- 亮度:决定颜色明暗。用百分比值表示;
- alpha:表示颜色的透明度。取值范围是0~1.要省略alpha的值,就用hsl关键字代替hsla关键字。
RGBA、HSLA和opacity有什么区别?
opacity属性值同时设置文字和背景的透明度。
如果只想配置半透明背景,请用background-color属性编码RGBA颜色或者HSLA颜色。
如果只想配置半透明文字,请用color属性编码RGBA颜色或者HSLA颜色。
eg:半透明背景,文本不透明;
代码:
h1{ text-align: center; padding-top: 100px; height: 150px; background-color: #828282; background-color: rgba(100, 100, 100, 0.5); font-size: 5em; color:black }
结果:
eg:半透明文本,背景不透明;
代码:
h1{ text-align: center; padding-top: 100px; height: 150px; color: rgba(225, 100, 100, 0.5); font-size: 5em; }
结果:
啊啊啊————终于写完了,洗脸洗脸打游戏