zoukankan      html  css  js  c++  java
  • 14 ,CSS 文字与文本

    1.CSS 中长度与颜色

    2.CSS 中的文字属性

    3.CSS 中的文本属性

    14.1 CSS 中长度与颜色

    长度单位 说明

    in 英寸

    cm 公分

    mm 公里

    cm 以目前字体高度为单位

    ex 以小写字母高度为单位(大部分不支持)

    pt 1pt/72英寸

    pc 1pc/12pt

    px 像素(推荐使用)

    颜色单位: 说明

    十六进制 如:color:#ff0000

    颜色名称 如:color:red

    三原色单位 如:rgb(255,0,0)

    一般最常用的是十六进制,三原色单位的原理【红(r,绿(g,(b)】混合而成。。

    每个值域在0255之间

    14.2 CSS 中的文字属性

    属性名称 属性值 说明

    font-style normal 正常显示

    italic 斜体

    font-variant normal 正常显示

    small-caps 将英文大小写字母写调为同宽

    font-weight normal 正常显示

    bold 粗体

    font-size 像素 字体大小

    百分比 字体大小

    font-family 字体名称 设置字体名称

    font属性简化的使用方法:

    font:是否斜体 是否同宽 是否粗体 大小 字体名称

    例如:font:italic bold 200 隶书;

    14.3 CSS中的文本属性

    属性名称 属性值 说明

    color 十六进制 颜色

    英文名称 颜色

    三原色单位 颜色

    letter-spacing normal 正常显示

    长度 文本间隔

    word-spacing normal 正常显示

    数字 单词间距

    white-space normal 文本自动处理换行

    pre 换行和空白受保护

    nowrap 强制在同一行显示

    text-align left 文字靠左

    right 文字靠右

    center 文字靠中

    text-decoration none 正常显示

    underline 加上下划线

    overline 加顶线

    line-through 加删除线

    text-indent 长度 首行缩进

    百分比 同上

    line-height 像素 行高

    数字/百分比 行高

    text-transform none 正常显示可以包含大,小字符

    capitalize 字符串第一个字符大写

    uppercase 设置大写字符

    lowercase 设置小写字符

    vertical-align sub 设置文字为下标。

    super 设置文字为上标。

    top 元件往上端靠齐。

    middle 设置文字是在中线位置。

    bottom 元件往下端靠齐。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    
    ul li{
    	font-style:italic;	
    	}
    
    	p{
    		font-weight:bold;
    		color: #D82326;
    		
    }
    	span{
    		font-size:26px;
    		font-family:Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace
    }
    	ol{
    		font:italic bold 200 隶书;
    	}
    	h1{
    		letter-spacing: 20px;
    	}
    	h2{
    		word-spacing:30px;
    	}
    	h3{
    		white-space:pre;
    	}
    	h4{
    		text-align: center;
    	}
    	h5{
    		text-decoration:line-through;
    }
    	img{
    		vertical-align:-50px;
    	}
    	</style>
    </head>
    
    <body>
    <pre>
    	1 CSS 中长度与颜色
    长度单位 说明
    in 英寸
    cm 公分
    mm 公里
    cm 以目前字体高度为单位
    ex 以小写字母高度为单位(大部分不支持)
    pt 1pt/72英寸
    pc 1pc/12pt
    px 像素(推荐使用)
    颜色单位: 说明
    十六进制 如:color:#ff0000
    颜色名称 如:color:red
    三原色单位 如:rgb(255,0,0)
    一般最常用的是十六进制,三原色单位的原理【红(r),绿(g),蓝(b)】混合而成。。
    每个值域在0-255之间
    </pre>
    <ul>
    	<li>italic 斜体</li>
    	<li>italic 斜体</li>
    	
    </ul>
    
    <p>bold 粗体,color,颜色</p>
    <span>font-size 像素 百分比 字体大小,font-family,字体名称 设置字体名称</span>
    <ol>
    	<li>font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称</li>
    	<li>font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称</li>
    </ol>
    <h1>letter-spacing字间距,文本间隔</h1>
    <h2>单词间距,汉字无效,zhe shi yige laoshi </h2>
    <h3>pre 换行和空白受保护  nowrap 强制在同一行显示,
    pre 换行和空白受保护  nowrap 强制在同一行显示
    pre 换行和空白受保护  nowrap 强制在同一行显示
    </h3>
    <h4>文本居中</h4>
    <h5> none 正常显示
    underline 加上下划线
    overline 加顶线
    line-through 加删除线</h5>
    <p>text-indent 长度 首行缩进
    百分比 同上</p>
    <p>line-height 像素 行高数字/百分比 行高</p>
    <Pre>text-transform none 正常显示可以包含大,小字符
    					capitalize 字符串第一个字符大写
    					uppercase 设置大写字符
    					lowercase 设置小写字符
     vertical-align sub 设置文字为下标。
    					super 设置文字为上标。
    					top 元件往上端靠齐。
    					middle 设置文字是在中线位置。
    					bottom 元件往下端靠齐。</Pre>
    <P><img src="images/pic7.jpg"/>设置文字是在中线位置</P>
    
    </body>
    </html>
    

      

    柳志军:13418977808(手机微信),QQ:93684042
  • 相关阅读:
    设置debian6源
    debian7编译安装tengine添加lua和ldap模块
    elasticsearch5使用snapshot接口备份索引
    logstash5生成init脚本后台启动
    Xpack集成LDAP
    debian安装filebeat5.5收集nginx日志
    kibana5画图
    安装Xtrabackup,设置定时备份msyql数据库
    编译安装nrpe,配置监控mysql端口和主从状态
    编译安装keepalived,实现双主mysql高可用
  • 原文地址:https://www.cnblogs.com/liu-zhijun/p/10628124.html
Copyright © 2011-2022 走看看