Html5与Css3知识点拾遗(六)
web字号
px()
百分比(较常用)
em(最常用):一般1em=16px,相对单位。以父元素作参照系,父元素大小是不确定的
body{
font-size:100%; /*父元素默认为16px*/
}
h1{
font-size:2.1875em; /*35px/16px*/
}
css3新增:rem,以根元素为参照系,根元素大小是确定的
html{
font-size:100%; /*通常为16px*/
}
h1{
font-size:2.1875rem; /*35px/16px*/
}
使用关键字:xx-small、x-small、small、large、x-large、xx-large、
行高
line-hight:n;
n是数字(最常用方法),与字体的乘积为行高
混合属性
font设置步骤
前三顺序随意:
字型(normal、italic/oblique)
粗细(normal、bold、bolder、lighter、100~900的倍数)
取消或设置小型大写字母(normal、small-caps)
按顺序:
字体大小
/行高
空格 优先次序输入字体系列,以“,”分隔
.p{
font:italic small-caps bold .875em/1.3 "Palayino Linotype",Palatino,serif;
}
/**斜体,小型大写字母,加粗,字号,行高,字体类型、备选字体/
设置背景
背景图片: background-image:url(01.png)
是否重复:background-repeat:repeat-x/repeat-x/no-repeat/repeat(默认)
起始位置: background-position:100px 100px;(或者top(页面位置),center(显示位置))
是否滚动:background-attachment:fixed/scroll(默认)/local
css3新增
background-clip:border-box(默认)
background-origin:padding-box(默认)
都接受相同的值:content-box包含内容,padding-box包含内容和内边距
background-size
contain:在显示图像完整宽高的情况下,尽可能的扩大图像的尺寸。背景图像可能不会填充整个背景区域
cover:在填充元素整个背景区域的情况下,让图像尽可能地小。图像的一部分可能会超出元素的范围,因而不可见
px、百分比或auto
控制间距
字间距:单词之间
word-spacing:0.4em
字偶距:字母之间
letter-spacing:0.4em
添加缩进
text-indent:2em
默认情况下对em、strong、cite等内联元素没有效果
仅适用块级元素。设置为dispay:block;或display:inline-block变为行内元素,就可以强制为其应用text-indent属性
对齐文本
text-align:justify 文本两端对齐
仅适用块级元素。设置为dispay:block;或display:inline-block变为就可以强制为其应用text-indent属性
文本大小写
text-transform
uppercase:大写
lowercase:小写
none:用于消除继承
capitalize:每个单词首字母都大写
小型大小写
font-variant
使用:samll-caps
取消:none
换行
text-wrap:normal;
装饰文本
text-decoration
underline:下划线
overline:上划线
line-through:删除线
none:没有
a:link{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
设置空白属性
white-space
pre:浏览器显示原文本中所有空格和回车
nowrap:文本全部显示在一行。可以手动创建br换行,但还是尽量避免而去用css控制
normal:正常
引用服务端字体
@font-face{
font-family:WebFont;
/*ttf:o,otf:t*/
src:(xxx.ttf)format("truetype");
font-weight:normal;
}
div{font-famliy:WebFont;}
若客户端有这个字体
@font-face{
font-family:MyArial;
src:local("Arial"),/*客户端字体*/
url("xxx.otf");/*服务端字体*/
}
div{font-famliy:MyArial;}
修改字体种类而保持尺寸一致
font-size-adjust
aspect=height/字体大小
浏览器实际显示的aspect=(实际使用的aspect/修改前aspect)/当前字体尺寸
Html5与Css3知识点拾遗(六)的更多相关文章
- Html5与Css3知识点拾遗(二)
页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...
- Html5与Css3知识点拾遗(八)
css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...
- Html5与Css3知识点拾遗(七)
布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...
- Html5与Css3知识点拾遗(五)
css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...
- Html5与Css3知识点拾遗(九)
css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...
- Html5与Css3知识点拾遗(四)
web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...
- Html5与Css3知识点拾遗(三)
文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...
- Html5与Css3知识点拾遗(一)
1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...
- HTML5与CSS3知识点总结
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...
随机推荐
- win7 80端口被iis占用
下载iis管理器,打开,关闭80端口占用
- Linux下Memcached安装与启用
http://www.linuxidc.com/Linux/2016-07/133423.htm
- 性能监控工具以及java堆分析OOM
一.性能监控工具 1.系统性能监控 Linux -确定系统运行的整体状态,基本定位问题所在 -uptime: ------系统时间 ------运行时间(例子中为127天) ------连接数(每 ...
- AtomicInteger类和int原生类型自增鲜明的对比
AtomicInteger这个类的存在是为了满足在高并发的情况下,原生的整形数值自增线程不安全的问题.比如说 int i = 0 ; i++; 上面的写法是线程不安全的. 有的人可能会说了,可以使 ...
- uni-app开发小程序准备阶段
1.软件安装 开始之前,开发者需先下载安装如下工具: HBuilderX:官方IDE下载地址 下面开发工具根据需求进行安装: 微信小程序开发工具安装 https://developers.weixin ...
- Centos创建用户
1.创建用户: adduser fish 2.用户设置密码: passwd linuxidc 3.创建文件夹: mkdir fish 4.删除文件夹 rm -rf fish 5.文件夹重命名: mv ...
- Sybase采用load table加载文本数据中的部分字段数据
LOAD TABLE语句实现从数据文件中装载部分列数据的方法.转载自:https://www.cnblogs.com/lizm166/p/8116475.html(有修改) LOAD TABLE:从数 ...
- [Redis]Redis的五种数据类型与键值/服务器相关命令
-------------------------------------------------------------------------------------- String(字符串):最 ...
- php 获取数组深度的key
1.数组 深度遍历 function fun($a,&$b) { foreach ($a as $k=>$val) { if (is_array($val)) { $b[]=$k; fu ...
- jieba分词/jieba-analysis(java版)
简介 支持分词模式Search模式,用于对用户查询词分词Index模式,用于对索引文档分词特性支持多种分词模式全角统一转成半角用户词典功能conf 目录有整理的搜狗细胞词库因为性能原因,最新的快照版本 ...