web字号

px()

百分比(较常用)

em(最常用):一般1em=16px,相对单位。以父元素作参照系,父元素大小是不确定的

  1. body{
  2. font-size:100%; /*父元素默认为16px*/
  3. }
  4. h1{
  5. font-size:2.1875em; /*35px/16px*/
  6. }

css3新增rem,以根元素为参照系,根元素大小是确定的

  1. html{
  2. font-size:100%; /*通常为16px*/
  3. }
  4. h1{
  5. font-size:2.1875rem; /*35px/16px*/
  6. }

使用关键字: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)

按顺序:

字体大小

/行高

空格 优先次序输入字体系列,以“,”分隔

  1. .p{
  2. font:italic small-caps bold .875em/1.3 "Palayino Linotype",Palatino,serif;
  3. }
  4. /**斜体,小型大写字母,加粗,字号,行高,字体类型、备选字体/

设置背景

背景图片: 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:没有

  1. a:link{
  2. text-decoration:none;
  3. }
  4. a:hover{
  5. text-decoration:underline;
  6. }

设置空白属性

white-space

pre:浏览器显示原文本中所有空格和回车

nowrap:文本全部显示在一行。可以手动创建br换行,但还是尽量避免而去用css控制

normal:正常

引用服务端字体

  1. @font-face{
  2. font-family:WebFont;
  3. /*ttf:o,otf:t*/
  4. src:(xxx.ttf)format("truetype");
  5. font-weight:normal;
  6. }
  7. div{font-famliy:WebFont;}

若客户端有这个字体

  1. @font-face{
  2. font-family:MyArial;
  3. src:local("Arial"),/*客户端字体*/
  4. url("xxx.otf");/*服务端字体*/
  5. }
  6. 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. 如何在ORACLE中查询某一用户下所有的空表

    先分析表 select 'analyze table '||table_name||' compute statistics;' from user_tables; 把查询结果依次执行 把所有表分析一 ...

  2. Oracle导出表数据与导入表数据dmp,以及导入导出时候常见错误

    使用DOS 操作界面导出表数据,导入表数据(需要在数据库所在的服务器上边执行) exp UserName/Password@192.168.0.141/orcl   file=d:\xtables.d ...

  3. 【产品设计】【转】APP界面设计规范编写指南(人人都是产品经理)

    转自 :http://www.woshipm.com/ucd/608557.html 作者:EID_UX_DESIGN,微信公众号:EID_center 原文地址:http://www.ui.cn/d ...

  4. 基于LNMP的Zabbix4.0.1部署

     转:http://www.safecdn.cn/monitor/2018/12/lnmp-zabbix4-0-1-install/306.htmlZabbix4.0.1部署   一 安装源和Zabb ...

  5. Music Recommendation System with User-based and Item-based Collaborative Filtering Technique(使用基于用户及基于物品的协同过滤技术的音乐推荐系统)【更新】

    摘要: 大数据催生了互联网,电子商务,也导致了信息过载.信息过载的问题可以由推荐系统来解决.推荐系统可以提供选择新产品(电影,音乐等)的建议.这篇论文介绍了一个音乐推荐系统,它会根据用户的历史行为和口 ...

  6. mysql timestamp字段定义的

    Cause: java.sql.SQLException: Cannot convert value '2017-07-26 20:40:41.000000' from column 10 to TI ...

  7. Nginx虚拟目录设置

    location ~ .*\.html$   匹配所有以.html结尾的链接 --------------------------------------------------------- 关于a ...

  8. board_led.h/board_led.c

    /******************************************************************************* Filename: board_led ...

  9. ReactiveX 学习笔记(23)RxCpp

    RxCpp RxCpp 是 ReactiveX 的 C++ 语言实现. 下载 RxCpp $ git clone --recursive https://github.com/ReactiveX/Rx ...

  10. 35.Spring-jdbc支持.md

    目录 1.JdbcTemplate类 1.1导入jar包 1.2创建Dao对象 1.3将上述例子封装后 2. 3. 1.JdbcTemplate类 传统的jdbc开始,需要对Connection.St ...