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;
    }
  • 相关阅读:
    例如找出令人信服的权威C++中间malloc与new
    nRF905
    POJ 3280 间隔DP
    SharePoint管理中心来配置资源限制(大名单)
    C#值传递和按引用传递
    UVA 810
    hdu 4870 Rating(可能性DP&amp;高数消除)
    【Espruino】NO.06 关键是你的仆人(继续)
    Struts2_1_struts2建立一个执行环境
    kendoui仪表板和直方图 演示样本
  • 原文地址:https://www.cnblogs.com/u14e/p/5207311.html
Copyright © 2011-2022 走看看