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
列表项属性的综合设置（可以综合设置上述的列表项属性），使用频率较高。
fighting_使用CSS美化文字的更多相关文章
- css美化页面
css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...
- CSS美化自己的完美网页
CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...
- 学习笔记 第六章 使用CSS美化图片
第六章 使用CSS美化图片 6.1 在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
- 学习笔记 第五章 使用CSS美化网页文本
第五章 使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
- 只用CSS美化选择框
只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- css控制文字长度，超出长度显示...
css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
- (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号
css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
- CSS美化页面滚动条
文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...
随机推荐
- mac终端中显示tree的命令
寻觅了良久终于找到了mac下如何在终端显示tree的命令了,作为从linux下转过来的人,还没适应mac的finder,还是喜欢在命令行下查看文件. 命令: find . -print | sed - ...
- Thwarting Buffer Overflow Attacks Stack Randomization
Computer Systems A Programmer's Perspective Second Edition address-space layout randomization
- Subset sum problem
https://en.wikipedia.org/wiki/Subset_sum_problem In computer science, the subset sum problem is an i ...
- Fortran并行计算的一些例子
以下例子来自https://computing.llnl.gov/tutorials/openMP/exercise.html网站 一.打印线程(Hello world) C************* ...
- Python中布尔类型
我们已经了解了Python支持布尔类型的数据,布尔类型只有True和False两种值,但是布尔类型有以下几种运算:与运算:只有两个布尔值都为 True 时,计算结果才为 True.True and T ...
- （转）web网站架构演变
浅谈web网站架构演变过程 前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变. 该系统具备的功能: 用户模块:用户注册和管理 商品模块:商品展示和管 ...
- EF的表连接方法Include()
在EF中表连接常用的有Join()和Include(),两者都可以实现两张表的连接,但又有所不同. 例如有个唱片表Album(AlbumId,Name,CreateDate,GenreId),表中含外 ...
- java JDK8 学习笔记——第11章 线程和并行API
第11章 线程与并行API 11.1 线程 11.1.1 线程 在java中,如果想在main()以外独立设计流程,可以撰写类操作java.lang.Runnable接口,流程的进入点是操作在run( ...
- php---JSON和JSONP
JSON和JSONP (含jQuery实例)(share) 来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jque ...
- ArcGIS Engine开发之旅10--空间参考及坐标转换
原文:ArcGIS Engine开发之旅10--空间参考及坐标转换 空间参考(Spatial Reference)是 GIS 数据的骨骼框架,能够将我们的数据定位到相应的位置,为地图中的每一点提供准确 ...