zoukankan      html  css  js  c++  java
  • css设计指南-笔记6

    一.字体

    字体系列 font-family

    字体名多于一个单词时,加引号

    serif		//衬线字体
    sans-serif 	//无衬线字体
    monospace	// 等宽字体(代码体)
    cursive		//手写体或草书体
    fantasy		//奇幻字体
    

    字体大小 font-size

    font-size: 16px		//绝对大小
    font-size: .75em	//相对大小
    font-size: 75%		//相对大小
    font-size: .75rem	//只相对HTML根元素
    

    字体样式 font-style

    font-style: italic		//斜体(把正体设为斜体)
    font-style: oblique		//斜体
    font-style: normal		//正体(把斜体设为正体)
    

    字体粗细 font-weight

    最好只用bold、normal

    字体变化 font-variant

    只有normal和small-caps(使所有小写英文字母变成小型大写字母)

    简写字体

    必须声明font-size和font-family
    所有值必须按照顺序声明

    font-weight, font-style, font-variant不分先后
    font-size
    font-family
    
    font: bold iatlic small-caps .9em helvetica, arial, sans-serif
    

    二.文本

    文本缩进 text-indent

    设定行内盒子相对于包含元素的起点

    字符间距 letter-spacing

    单词间距 word-spacing

    文本装饰 text-decoration

    underline, overline, line-through, none

    a {text-decoration: none;}
    a:hover {text-decoration: underline;}
    //控制链接的下划线
    

    文本对齐 text-align

    left, right, center, justify

    行高 line-height

    font: 1.2em/1.4 helvetica, arial, sans-serif	//与font-size写在一起
    

    不用指定单位
    行高平均分布在一行的上方和下方
    eg:字体大小12px,行高20px,则文本上方和下方各加4px的空白
    行高不叠加(垂直外边距叠加)

    文本转换 text-transform

    none, uppercase, lowercase, capitalize

    capitalize	//每个单词的首字母转换为大写
    uppercase	//全部转换为大写
    lowercase	//全部转换为小写
    

    垂直对齐 vertical-align

    只影响内联元素,块级元素可以将display设置为inline
    以基线为参照上下移动文本,常用于上标和下标

    三.web字体

    //保存在第三方网站上的字体
    在<head>标签中添加<link>标签	//使用时需要引号
    
    //保存在自己web服务器上的字体
    @font-face {
    	font-family: "UbuntuTitlingBold";
    	src: url("UbuntuTitling-Bold-webfont.eot");
    		src: url("UbuntuTitling-Bold-webfont.eot?#iefix")
    		format("embedded-opentype"),
    		url("UbuntuTitling-Bold-webfont.woff")
    		format("woff"),
    		url("UbuntuTitling-Bold-webfont.ttf")
    		format("truetype"),
    		url("UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold")
    		format("svg");
    	font-weight: normal;
    	font-style: normal;
    }
  • 相关阅读:
    第二十一章流 1流的操作 简单
    第二十章友元类与嵌套类 1友元类 简单
    第十九章 19 利用私有继承来实现代码重用 简单
    第二十章友元类与嵌套类 2嵌套类 简单
    第十九章 8链表类Node 简单
    第二十一章流 3用cin输入 简单
    第十九章 10 图书 药品管理系统 简单
    第十九章 11图书 药品管理系统 简单
    第二十一章流 4文件的输入和输出 简单
    第十九章 12 什么时候使用私有继承,什么时候使用包含 简单
  • 原文地址:https://www.cnblogs.com/u14e/p/5207311.html
Copyright © 2011-2022 走看看