html5常用属性text-shadow、vertical-align、background如何使用
html5常用属性text-shadow、vertical-align、background如何使用
一、总结
一句话总结:
1、text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]
2、vertical-align注意语义, 注意父元素的基线
3、background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
4、background: transparent url(h2.png) repeat scroll 0% 0% !important;
其它:
div加背景色了调,不然你真的不知道div的情况
把元素变大,也容易找错
关注你加了样式之后,是元素根本没有效果,还是效果很微小,还是效果不是你想要的效果
仔细读样式的说明:比如 top 把元素的顶端与行中最高元素的顶端对齐
弄清楚各个定义:比如父元素基线,比如元素的顶端,还还要关注你是操作的哪个元素
vertical-align是操作自己,然后达到在父元素中的位置,操作的是自己。
父元素的高度:在没有设置高度的情况下:是有最高元素的顶端+最低元素的底端构成的。
当父元素设置了高度的时候:元素还是依次占据父元素的顶端,父元素的基线不会变,除非有元素变大,撑开父元素的基线。
字体摆放时:是字体的下端对着父元素的基线,因为字体下端还会有一点,所以这样会撑开父元素。
vertical-align:middle的作用:让元素的middle去对着父元素的基线。
给一个元素加margin-top和增加元素的高度都可以改变父亲元素的高度。
也就是说:vertical-align:middle;根本就不是用来做下面的效果的,下面的效果可以通过自己顶端与最高元素的顶端对齐,然后margin-top下移来实现。margin-top:65px;vertical-align:top;
至于为什么表格中可以用这个来实现垂直居中呢:因为在表格的单元格中,基线就在中部啊,所以设置vertical-align:middle后,让元素的中部与表格的基线对齐,那肯定实现了字体在表格中的垂直居中,而且注意这里是字体。我们现在设置的是元素。
所以vertical-align:middle就是紧抓定义,抓这句话的定义,然后关注父亲元素的基线。
二、text-shadow讲解
语法:
text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是:
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
取值:
<length>:长度值,可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值,Y Offset是垂直偏移值
<color>:指定阴影颜色,也可以是rgba透明色
<shadow>:阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。
如下图所示:
说明:
可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。
三、文字居中:CSS属性:vertical-align:middle,设置为什么无效!
最近,在学习CSS中,每次对一个页面进行排版的时候,总是需要对文字居中,每次在div里面设置text-align和vertical-algin两个属性就会以为他会居中!
废话不多说了!直接上代码!
图一:
图二:
图三:
这是外面一个div里面在分几个div,我在其中一个中输入文字,但是写了text-align即文字居中和vertical-align垂直居中,以为就会让文字居于正中间,但是却显示如图二的效果!这是为什么呢!所以查找了许多资料,原来vertical-align属性只对行内元素有效,对块内元素无效!而此时就会用到display属性,大家也看到我里面有设置display属性为inline-block属性,确没有效果,那是因为将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内!说的通俗点,就是你设置的当前div属性还是块对象呈递,但是允许同一级别的div在同一行内,也可以设置宽度和高度!所以才会呈现如上图二所示的没有效果!
解决办法:
1.而如果我们将display属性设置为table-cell,将块元素转化为单元格,然后加上vertical-align:middle,就可以了呈现图三的效果了。(温馨提示:但是你们别忘记加text—align属性为center哟!)、
2.或者可以设置行高即line-height,但是要注意,要与div的高度一致!否则也会有偏差的(温馨提示:而display:inline-block是这个)!
四、自己vertical-align属性测试
div加背景色了调,不然你真的不知道div的情况
把元素变大,也容易找错
关注你加了样式之后,是元素根本没有效果,还是效果很微小,还是效果不是你想要的效果
仔细读样式的说明:比如 top 把元素的顶端与行中最高元素的顶端对齐
弄清楚各个定义:比如父元素基线,比如元素的顶端,还还要关注你是操作的哪个元素
vertical-align是操作自己,然后达到在父元素中的位置,操作的是自己。
父元素的高度:在没有设置高度的情况下:是有最高元素的顶端+最低元素的底端构成的。
当父元素设置了高度的时候:元素还是依次占据父元素的顶端,父元素的基线不会变,除非有元素变大,撑开父元素的基线。
字体摆放时:是字体的下端对着父元素的基线,因为字体下端还会有一点,所以这样会撑开父元素。
vertical-align:middle的作用:让元素的middle去对着父元素的基线。
给一个元素加margin-top和增加元素的高度都可以改变父亲元素的高度。
- vertical-align 设置元素的垂直对齐方式。
- baseline 默认。元素放置在父元素的基线上。
- top 把元素的顶端与行中最高元素的顶端对齐
- middle 把此元素放置在父元素的中部。
- bottom 把元素的底端与行中最低的元素的底端对齐。
- 数值(像素)/百分比
- text-top 把元素的顶端与父元素字体的顶端对齐
- text-bottom 把元素的底端与父元素字体的底端对齐。
- sub 垂直对齐文本的下标。
- super 垂直对齐文本的上标
也就是说:vertical-align:middle;根本就不是用来做下面的效果的,下面的效果可以通过自己顶端与最高元素的顶端对齐,然后margin-top下移来实现。margin-top:65px;vertical-align:top;
至于为什么表格中可以用这个来实现垂直居中呢:因为在表格的单元格中,基线就在中部啊,所以设置vertical-align:middle后,让元素的中部与表格的基线对齐,那肯定实现了字体在表格中的垂直居中,而且注意这里是字体。我们现在设置的是元素。
所以vertical-align:middle就是紧抓定义,抓这句话的定义,然后关注父亲元素的基线。
五、background属性
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
background: transparent
url(http://images.cnblogs.com/cnblogs_com/Renyi-Fan/1188097/o_h2.png)
repeat scroll 0% 0% !important;
一、background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值。
先来一个简单的背景设置:
#show-box {
width: 800px;
height: 500px;
background: #000;
background-image: url(image url);
}
</style>
这里只是简单的设置了颜色和背景贴图。
下面让我们来看一下官方的background的属性:
语法格式:
background: color position size repeat origin clip attachment image;
注意:如果同时设置了“position”和“size”两个属性,应该用左斜杠“/”,而不是用空格把两个参数值隔开:“position/size”。
background: url("img.jpg") center center/100% 100% no-repeat;
属性表(图片可能会显示得太小,请右键“在新标签中打开”以查看原图):
1.color:背景颜色值。这个属性会把整个元素添加颜色,而且处于最底层(在有背景图片的情况下就可以看出)。
可选值:默认是透明,其他值可以通过查看“CSS颜色值表”来设置。
<style>
#show-box {
width: 180px;
height: 180px;
border: 20px dashed #000;
background-color: #000000;
background-color: blue;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
}
</style>
2.position:背景图片的定位。如果没有图片设置,那么这个属性不起效果。
可选值:两个参数,水平位置和垂直位置。如果只有一个值,第二个值为“center”。
默认值是元素的左上顶角。可以使用位置关键字(top,right,bottom,left,center)。百分比(以元素大小为基值)。像素值。
<style>
#show-box {
width: 180px;
height: 180px;
border: 20px dashed #000;
background-position: center;
background-position: center top;
background-position: 0 100px;
background-position: 10% 20%;
}
</style>
3.size:图片尺寸。应用于图片。
可选值:两个数值,如果只有一个值,第二个值为auto。
默认是图片自身大小。可以使用像素值,百分百(以元素大小为基值)。
cover:等比例缩放图片,覆盖这个元素。类似与windows中桌面背景的“填充”。
contain:等比例缩放图片,适应元素的宽或者高。类似于windows中桌面背景的“适应”。
4.repeat:平铺方式。
repeat:完全平铺,复制图片把整个元素填满。(默认)
repeat-x:水平平铺,在水平方向复制并平铺。
repeat-y:垂直平铺,在垂直方向复制并平铺。
no-repeat:不平铺,只使用一张图片。
5.origin:背景的参考区域。
可选值:border-box,padding-box,content-box。
6.clip:背景的可视区域。
可选值:border-box,padding-box,content-box。
对比一下不同值的效果图:
1.origin:border-box;clip:border-box;
<style>
#show-box {
width: 180px;
height: 180px;
margin: 20px;
padding: 20px;
border: 20px dashed #000;
background: url("img.jpg") no-repeat border-box border-box;
}
</style>
2.origin:padding-box;clip:border-box;
<style>
#show-box {
width: 180px;
height: 180px;
margin: 20px;
padding: 20px;
border: 20px dashed #000;
background: url("img.jpg") no-repeat padding-box border-box;
}
</style>
3.origin:content-box;clip:border-box;
<style>
#show-box {
width: 180px;
height: 180px;
margin: 20px;
padding: 20px;
border: 20px dashed #000;
background: url("img.jpg") no-repeat content-box border-box;
}
</style>
4.origin:border-box;clip:content-box;
<style>
#show-box {
width: 180px;
height: 180px;
margin: 20px;
padding: 20px;
border: 20px dashed #000;
background: url("img.jpg") no-repeat border-box content-box;
}
</style>
可以看出,origin设置的是位置,clip则会根据区域裁剪出背景图片。
7.attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
默认值是scroll:背景图片随页面的其余部分滚动。fixed:背景图像是固定的。
8.多背景设置。
导入图片:background-image: url(image url);
二、多背景设置。
多背景的写法:使用逗号“,”隔开,继续写背景属性。
background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;
也可以具体属性单独设置:background-image:url(image url 1),url(image url 2);
<style>
#show-box {
width: 180px;
height: 180px;
border: 20px dashed #000;
background: url("img.jpg1") left top/100% 100% no-repeat,
url("img.jpg2") left center/100% 100% no-repeat,
url("img.jpg3") left bottom/100% 100% no-repeat,
url("img.jpg4") center top/100% 100% no-repeat;
}
</style>
<style>
#show-box {
width: 180px;
height: 180px;
border: 20px dashed #000;
background-image: url("img.jpg1"), url("img.jpg2"), url("img.jpg3"), url("img.jpg4");
background-position: left top, left center, left bottom, center top;
background-size: 100%;
background-repeat: no-repeat;
}
</style>
html5常用属性text-shadow、vertical-align、background如何使用的更多相关文章
- Android开发中XML布局的常用属性说明
<!-- 常用属性说明: android:id="@+id/button" 为控件指定Id android:text="NNNNNNNNNN" 指定控件的 ...
- TextView之二:常用属性
参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...
- Delphi 常用属性说明(超长)
Delphi组件的常用事件Onclick——当单击时触发这个事件中的代码Onchange——当改变该组件内容时触发其中的代码Oncreate——当创建时触发这个事件中的代码Onclose——当关闭的时 ...
- web 开发:CSS3 常用属性——速查手册!
web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...
- Android EditText常用属性
一.EditText介绍 ①EditText是一个输入框,在Android开发中是常用的控件.也是获取用户数据的一种方式. ②EditText是TextView的子类,它继承了TextView的所有属 ...
- 【转】Spring Boot干货系列:常用属性汇总
转自Spring Boot干货系列:常用属性汇总 附录A.常用应用程序属性 摘自:http://docs.spring.io/spring-boot/docs/current/reference/ht ...
- ListView and gridview常用属性
刷新:notifyDataSetChanged 1.gridview常用属性 GridView的一些特殊属性: 1.Android:numColumns=”auto_fit” //GridVi ...
- Android基础TOP3:线性布局的特点,常用属性,及权重值
线性布局是一种让视图水平或者垂直布排列的布局: 常用属性: androuid:orientation :表示布局方向 取值vertical表示垂直布局 取值horizontal表示水平布局 andro ...
- TextView之二:常用属性 分类: H1_ANDROID 2013-10-30 12:43 3203人阅读 评论(0) 收藏
参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...
随机推荐
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- .v 和 .sdf
DC输出的.v(网表?)和.sdf(储存的是延时的信息) 用于后仿真
- ECMALL功能拓扑图以及模式分析
ECMALL VS 常规的B2C产品(以ECSHOP做对比)的区别: 1.支持多用户在同一个域名下开店. 2.开店的卖家各自结算,直接收钱.平台只是提供了一个类似传统行业的摊位.平台不过手金钱 3 ...
- ORACLE使用WITH AS和HINT MATERIALIZE优化SQL解决FILTER效率低下
在做项目的过程中,一个页面使用类似例如以下的SQL查询数据.为了保密和使用方便,我把项目中有关的表名和字段替换使用ORACLE数据库中的系统表和字段. 在我所做的项目中.类似ALL_TABLES ...
- Android Studio - no debuggable applications 的解决的方法
之前logcat总是无法显示调试应用的信息 曾经我都是卸载重装.后来发如今StackOverflow有一个哥们说的非常对.一次就成功. 原话是这么说的: You also should have To ...
- iOS_01_C语言简介
1.先学C语言的原因 * oc基于C. * oc 跟 C的思想和语法很多地方不太一样,而且OC能和C混用. * C 是所有编程语言中的经典,很多高级语言都是从C语言中衍生出来的,比如 C++,C#.O ...
- Altium Designer中Electrical Type的意思
:之前Altium Designer设计图时发现: 它的引脚上有两个三角 双击打开引脚,打开配置: 于是从网上查了一下:http://blog.csdn.net/jbb0523/article/det ...
- python3 随机生成6位数的验证码
python3 随机生成6位数的验证码 要求是数字:0~9 及大小写字母. #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung ...
- 在 Windows 10 x64 上安装及使用 ab 工具的流程
本文转自:www.shuijingwanwq.com/2017/04/18/1568/ 1.基于AB测试工具进行高并发情形下的模拟测试,打开:http://httpd.apache.org/docs/ ...
- [React Intl] Get locale value from intl injector
Get 'injectIntl' from 'react-intl', it is a high order componet. We need to wrap our component into ...