CSS3的chapter4
段落样式:
- 行高——line-height
p { line-height:25px | 150% | normal;}
- 段落缩进——text-indent
p { text-indent:2em;}
- 段落对齐——text-align
p { text-align:left | center | right | justify;}
- 文字间距——letter-spacing
p { letter-spacing:5px | normal;}
文字溢出——text-overflow
text-overflow:clip ——将内容裁切掉
text-overflow:elipsis——内容替换为省略号
注意:要先定义强制文本在一行显示——white-space:nowrap及溢出内容为隐藏——overflow:hidden ,才有显示省略号的效果。p{
overflow:
hidden;white-space:
nowrap;text-overflow:
ellipsis;}
- 段落换行——word-wrap
word-wrap:normal | break-word
- 行高——line-height
背景样式:
- 背景颜色——background-color
body { background-color:#CCCCCC | rgba(255,0,0,.5) | rgb(255,0,0) | transparent;} - 渐变——linear-gradient/radial-gradient
background-image:linear-gradient(to left,
red 30%,blue); - 背景图片——background-image
body { background-image:url(images/bg.jpg);} - 背景平铺方式——background-repeat
body
{ background-repeat:repeat-x | repeat-y | no-repeat | repeat;} - 背景定位——background-position
body { background-position:left bottom/30%
30%/20px 20px;} - 背景原点——background-origin
注意:必须设置背景平铺为background-repeat:no-repeat才生效body {background-origin:border-box |
padding-box | content-box;} - 背景显示区域——background-clip
body {background-clip:border-box
| padding-box | content-box | text } - 背景尺寸——background-size
body { background-size:80px 60px | 80% 60%
| auto | cover | contain;} - 缩写
body {
background-color:#
EDEDED;background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
body { background:#EDEDED
url(images/bg.png) no-repeat 50% 30px;}
- 背景颜色——background-color
列表样式:
- 项目符号——list-style-type
ul
{ list-style-type:disc | circle | square | none | decimal | lower-roman |
upper-alpha;} - 自定义项目符号——list-style-image
ul {list-style-image:url(images/arrow.gif)}
- 项目符号——list-style-type
CSS3的chapter4的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
随机推荐
- 括号配对nyoj2(疑问)
描述现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=100),表示有N组测试数据.后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的长 ...
- 外部引用JavaScript文件乱码问题
使用js外部文件输出中文乱码解决: 将js文件编码改为和页面的编码相同.
- BizTalk开发系列(十一) 在Orchestration中执行Pipeline
由于开发需要有时要在流程中执行Pipeline.比如从DB的某个字段中取消息的字符串并在流程中构造消息.该需要通过pipeline进行升级 属性字段,验证消息等处理.BizTalk架构已经开放了此接口 ...
- 让你的网站秒开 为IIS启用“内容过期”
让你的网站秒开,为IIS启用“内容过期” 什么是内容过期? 当用户第一次访问你的网站,浏览器从你的网站主机下载内容,如果用户第二次访问你的网站,浏览器从缓存读取内容.你知道浏览器从缓存读取网页有多快吗 ...
- Linux学习笔记---用户管理---帐号管理
root管理 (1)新增用户:useradd -u 指定UID -g 指定GID -G 作为组员添加到某个组 -M 不创建主用户目录 -m 创建主用户目录 -c 用户信息说明列 -d 指定某个目录为主 ...
- 杭电ACM题目分类
基础题: 1000.1001.1004.1005.1008.1012.1013.1014.1017.1019.1021.1028.1029.1032.1037.1040.1048.1056.1058. ...
- php预定义变量,超全局变量,魔术方法,特殊函数变量使用
<?php /* * 本代码全部为测试函数代码,部分注释和写实例 * * 修改php.ini variables_order=”EGPCS” * 请注意$_REQUEST在优先级传参的时候会造成 ...
- 【转载】James Whittaker:经营成功的测试职业生涯
转注:这篇文章出自 James A. Whittaker ,但未找到原始出处/译者.如果有知道原始出处的朋友,可在评论这留言. 你是如何开始做测试工作的? 1989年,我在田纳西大学读研究生的时候, ...
- AFNetworking 提示"The resource could not be loaded because the App Transport Security policy requires the use of a secure connection" 解决办法
原因:iOS9以后,苹果把原http协议改成了https协议,所以不能直接在http协议下GET/POST 解决方案之一: 直接编辑工程文件下的Info.plist文件,加入以下代码 <key& ...
- 带你玩转JavaWeb开发之三 - CSS从基础到实战
一,什么是CSS? Cascading Style Sheets层叠样式表 层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的 ...