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 ...
随机推荐
- uva-10602-贪心
题意:有个编辑器,支持三种操作,摁下一个键盘上的字符,重复最后一个单词,删除最后一个字符.给N个字符串,必须先在编辑器内输入第一个字符, 问,输入完所有字符串最少需要摁下多少次键盘. 最多100个字符 ...
- 使用Jmeter进行http接口测试(转载)
原文:http://www.cnblogs.com/puresoul/p/4740436.html 前言: 本文主要针对http接口进行测试,使用Jmeter工具实现. Jmter工具设计之初是用于 ...
- 学习node.js 第2篇 介绍node.js 安装
Node.js - 环境安装配置 如果愿意安装设置Node.js环境,需要计算机上提供以下两个软件: 一.文本编辑器 二.Node.js二进制安装包 文本编辑器 这将用来编写程序代码. 一些编辑器包括 ...
- show出相应单据列表
var Fids=AddGroupItems.Select(o=>Convert.ToString(o["Id"])).ToArray(); string filter=st ...
- Nmap扫描命令使用详解
Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在实施这些扫描工作之前,需要先简单 ...
- php 获取数组深度的值
匿名函数(闭包) $val = array(); array_walk_recursive($array, function ($x) use (&$val) { $val[] = $x; } ...
- Windows 配置nginx服务器 运行php项目
1下载 http://nginx.org/en/download.html 选择稳定版下载. 2 解压后 直接双击nginx.exe 双击后一个黑色的弹窗一闪而过 3 修改配置文件nginx.conf ...
- SpringCloud Feign context-path踩到的坑
最近在使用SpringCloud的context-path时,遇到了一些坑,记录一下. server.context-path(上下文) 服务提供者的application配置文件中有一个属性叫ser ...
- 每月IT摘录201903
技术 1.在开发高并发系统时,有很多手段来保护系统,如缓存.降级.限流等.缓存可以提升系统的访问速度,降级可以暂时屏蔽掉非核心业务,使得核心业务不受影响.限流的目的是通过对并发访问进行限速,一旦达到一 ...
- 安装Python-Jenkins
有两种方式安装: ①有网络:sudo pip install python-jenkins ②无网络: 下载文件:https://pypi.org/project/python-jenkins/#fi ...