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知识点拾遗(六)的更多相关文章

  1. Html5与Css3知识点拾遗(二)

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  2. Html5与Css3知识点拾遗(八)

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  3. Html5与Css3知识点拾遗(七)

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  4. Html5与Css3知识点拾遗(五)

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  5. Html5与Css3知识点拾遗(九)

    css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...

  6. Html5与Css3知识点拾遗(四)

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  7. Html5与Css3知识点拾遗(三)

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

  8. Html5与Css3知识点拾遗(一)

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. uva-10602-贪心

    题意:有个编辑器,支持三种操作,摁下一个键盘上的字符,重复最后一个单词,删除最后一个字符.给N个字符串,必须先在编辑器内输入第一个字符, 问,输入完所有字符串最少需要摁下多少次键盘. 最多100个字符 ...

  2. 使用Jmeter进行http接口测试(转载)

    原文:http://www.cnblogs.com/puresoul/p/4740436.html  前言: 本文主要针对http接口进行测试,使用Jmeter工具实现. Jmter工具设计之初是用于 ...

  3. 学习node.js 第2篇 介绍node.js 安装

    Node.js - 环境安装配置 如果愿意安装设置Node.js环境,需要计算机上提供以下两个软件: 一.文本编辑器 二.Node.js二进制安装包 文本编辑器 这将用来编写程序代码. 一些编辑器包括 ...

  4. show出相应单据列表

    var Fids=AddGroupItems.Select(o=>Convert.ToString(o["Id"])).ToArray(); string filter=st ...

  5. Nmap扫描命令使用详解

    Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在实施这些扫描工作之前,需要先简单 ...

  6. php 获取数组深度的值

    匿名函数(闭包) $val = array(); array_walk_recursive($array, function ($x) use (&$val) { $val[] = $x; } ...

  7. Windows 配置nginx服务器 运行php项目

    1下载 http://nginx.org/en/download.html 选择稳定版下载. 2 解压后 直接双击nginx.exe 双击后一个黑色的弹窗一闪而过 3 修改配置文件nginx.conf ...

  8. SpringCloud Feign context-path踩到的坑

    最近在使用SpringCloud的context-path时,遇到了一些坑,记录一下. server.context-path(上下文) 服务提供者的application配置文件中有一个属性叫ser ...

  9. 每月IT摘录201903

    技术 1.在开发高并发系统时,有很多手段来保护系统,如缓存.降级.限流等.缓存可以提升系统的访问速度,降级可以暂时屏蔽掉非核心业务,使得核心业务不受影响.限流的目的是通过对并发访问进行限速,一旦达到一 ...

  10. 安装Python-Jenkins

    有两种方式安装: ①有网络:sudo pip install python-jenkins ②无网络: 下载文件:https://pypi.org/project/python-jenkins/#fi ...