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 ...
随机推荐
- 如何在ORACLE中查询某一用户下所有的空表
先分析表 select 'analyze table '||table_name||' compute statistics;' from user_tables; 把查询结果依次执行 把所有表分析一 ...
- Oracle导出表数据与导入表数据dmp,以及导入导出时候常见错误
使用DOS 操作界面导出表数据,导入表数据(需要在数据库所在的服务器上边执行) exp UserName/Password@192.168.0.141/orcl file=d:\xtables.d ...
- 【产品设计】【转】APP界面设计规范编写指南(人人都是产品经理)
转自 :http://www.woshipm.com/ucd/608557.html 作者:EID_UX_DESIGN,微信公众号:EID_center 原文地址:http://www.ui.cn/d ...
- 基于LNMP的Zabbix4.0.1部署
转:http://www.safecdn.cn/monitor/2018/12/lnmp-zabbix4-0-1-install/306.htmlZabbix4.0.1部署 一 安装源和Zabb ...
- Music Recommendation System with User-based and Item-based Collaborative Filtering Technique(使用基于用户及基于物品的协同过滤技术的音乐推荐系统)【更新】
摘要: 大数据催生了互联网,电子商务,也导致了信息过载.信息过载的问题可以由推荐系统来解决.推荐系统可以提供选择新产品(电影,音乐等)的建议.这篇论文介绍了一个音乐推荐系统,它会根据用户的历史行为和口 ...
- mysql timestamp字段定义的
Cause: java.sql.SQLException: Cannot convert value '2017-07-26 20:40:41.000000' from column 10 to TI ...
- Nginx虚拟目录设置
location ~ .*\.html$ 匹配所有以.html结尾的链接 --------------------------------------------------------- 关于a ...
- board_led.h/board_led.c
/******************************************************************************* Filename: board_led ...
- ReactiveX 学习笔记(23)RxCpp
RxCpp RxCpp 是 ReactiveX 的 C++ 语言实现. 下载 RxCpp $ git clone --recursive https://github.com/ReactiveX/Rx ...
- 35.Spring-jdbc支持.md
目录 1.JdbcTemplate类 1.1导入jar包 1.2创建Dao对象 1.3将上述例子封装后 2. 3. 1.JdbcTemplate类 传统的jdbc开始,需要对Connection.St ...