fighting_使用CSS美化文字
CSS3颜色渐变
background-image:linear-gradient(black,blue,green,red);
默认从上到下显示。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body>
<ul>
<li>
<h3>颜色渐变(默认从上到下)</h3>
<div style="background-image:linear-gradient(black,blue,green,red) ;background-color:gray; height:200px;border:1px solid red;background-repeat:no-repeat;"> </div>
</li> </ul>
</body>
</html>
background-repeat背景图片平铺
背景填充的方式。
语法:background-repeat:<repeat-style>[,<repeat-style>]
repeat-style可以取的值:repeat-x(北京在横向上平铺), repeat-y(背景在纵向上平铺),repeat(在横向上和纵向上平铺),no-repeat(背景图像不平铺),round(CSS3背景图片自动缩放直到适应并填充满整个容器),space(背景图像以相同的间距平铺且填充满整个容器或某个方向)。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body>
<ul>
<li>
<h3>背景图片默认平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;">
背景图片
</div>
</li>
<li>
<h3>背景图片no-repeat不平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:no-repeat;">
背景图片
</div>
</li>
<li>
<h3>背景图片repeat-x横向平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-x;">
背景图片
</div>
</li>
<li>
<h3>背景图片repeat-y纵向平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-y;">
背景图片
</div>
</li>
<li>
<h3>背景图片round:将背景图片自动缩放知道适应并填充满整个容器</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:round;">
背景图片
</div>
</li>
<li>
<h3>背景图片space:以相同的间距平铺且填充满整个容器或某个方向</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:space;">
背景图片
</div>
</li>
</ul>
</body>
</html>
backgroun-attachment
背景图像是随对象内容滚动还是固定的。(使用频率:几乎不用)
语法:background-attachment:<attachment>[,<attachment>]*
attchment:fixed(背景图像相对于窗体固定),local(背景图像相对于元素固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容,CSS3),scroll(默认方式,背景图像相对于元素固定,也就是说元素内容滚动时背景图像不会跟着动,因为背景图像总是要跟随元素本身。但会随着元素的祖先元素或窗体一起滚动)
background-position(重点难点)
设置或者检索对象的背景图像位置,必须先指定background-image属性值。
使用频率非常高。
语法:background-position:<position>[,<position>]
position可以取的值有:left | center | right | top | bottom | <percentage> | <length> | 等(查看手册)
background-position该属性提供两个参数值。CSS3中可以提供四个值,每个percentage或length偏移前都必须跟着一个关键字(即left|right|center|bottom|top),偏移量相对关键字位置进行偏移。例如(假设要定义背景图像在容器中右下方,并且距离邮编和底部各20px):
background:url(test1.jpg) no-repeat right 20px bottom 20px
也可以设置3个参数值,例如:
background:url(test1.jpg) no-repeat left bottom 20px
如果提供两个参数,则第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,则该值用于横坐标,纵坐标默认为50%(即center)。
不适用具体坐标的常见位置如下图所示:(这种应用并不多)
使用坐标,显示图片中的某一位置。(向下为正方向,向上为负方向,向左为负方向,向右为正方向)。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;">
<ul>
<li>
<h3>背景图片的位置(原图)</h3>
<div style="background-image:url(../images/jd2015img.png);height:200px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
原图样式
</div>
</li>
<li>
<h3>背景图片的位置(难点)</h3>
<div style="background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
手机未选中
</div>
</li>
<li>
<h3>背景图片的位置(难点)</h3>
<div style="background-position:0 -26px;background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
手机选中
</div>
</li> </ul>
</body>
</html>
background
背景设置的复合属性,可以只通过这一个属性设置背景图片,背景颜色,是否平铺等内容。使用频率非常高。
语法:background:[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
顺序方面内有特别的要求。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;">
<ul>
<li>
<h3>背景属性的综合属性设置</h3>
<div style="background:url(../images/jd2015img.png) 0 -26px no-repeat;padding-left:20px;height:20px;">
手机选中
</div>
</li>
</ul>
</body>
</html>
list-style-type
列表项样式,主要用在<li>标签,使用频率较低。
也可以通过list-style-image属性指定自己的图片作为列表项样式。
取值的种类较多,查看操作手册即可。
一般都是使用list-style-type:none,即没有列表项图标。
列表属性都具有继承性。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表项样式</title>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>
<h3>列表类型的样式</h3>
<ul>
<li style="list-style-type:square;">第一项(列表项图标为方块)</li>
<li style="list-style-type:none;">第二项(没有列表项图标)</li>
</ul>
</li>
<li>
<h3>列表类型的样式</h3>
<ul>
<li style="list-style-type:square;">第一项(列表项图标为方块)</li>
<li style="list-style-type:none;">第二项(没有列表项图标)</li>
</ul>
</li>
<li>
<h3>列表项都具有继承性</h3>
<ul style="list-style-type:none;">
<li>第一项(继承父标签)</li>
<li style="list-style-type:square;">第二项(不适用从父标签继承过来的样式)</li>
</ul>
</li>
</ul>
</body>
</html>
list-style-image
自定义列表项前面的图标。使用频率几乎为0。
list-style
列表项属性的综合设置(可以综合设置上述的列表项属性),使用频率较高。
最新文章
- make[2]: *** No rule to make target `/root/.pyenv/versions/anaconda3-2.4.0/lib/libpython3.5m.so&#39;, needed by `evaluation.so&#39;. Stop.
- 关于.NET大数据量大并发量的数据连接池管理
- jQuery Label Better – 友好的表单输入框提示插件
- 用js 向h5 中的table 动态添加数据 (简单实现)
- RSA非对称加密
- NEERC 2014, Eastern subregional contest
- 用setTimeout实现与setInteval类似的功能
- STM32位带操作总结---浅显易懂
- 面向对象15.3String类-常见功能-转换
- 基于zookeeper的Swarm集群搭建
- ldap数据库--ODSEE--安装
- TP手册学习第三天
- 如何使用微信小程序云函数发送短信验证码
- java 各种数据类型的互相转换
- fiddler使用指南
- linux下zip文件解压乱码的问题
- SQL SERVER字符串中的空格去除
- sql连接详解
- js处理想要得到数据结构
- window本地运行mapreduce程序
热门文章
- 耦合 Coupling the object-oriented paradigm &;&; data coupling
- P1970 花匠
- Oracle存储过程基本语法 存储过程
- Medusa: Gauges for JavaFX
- OAuth的机制原理讲解及开发流程
- CC254x(cc2540/cc2541)的微信AirSync调试笔记
- 编写category时的便利宏(用于解决category方法从静态库中加载需要特别设置的问题)
- css“变形”效果
- linux关机
- The Shortest Path in Nya Graph---hdu4725(spfa+扩点建图)