zoukankan      html  css  js  c++  java
  • css格式化文本

    选择字体

    font-family: "Times New Roman", Times, serif;

    注意:字体名称中包含多个单词要用("")括起来。

    字体颜色

    color:#cccccc(16进制)

    color: rgb(0%, 100%, 0%) 或者 color: rbg(0, 255, 0)

    rgb颜色,百分数表示0-255的一个数

    修改字号

    font-size

    font-szie后面可接keywords(关键字) px 百分比 em

    px:即像素值,最为常用,默认文本的像素值为16px;

    keywords: 总共有7个关键字,分别为 xx-large, x-large, large, medium, small x-small, xx-small。但是关键字不精确,而且也缺乏灵活性,因此较少使用。

    百分比:由于字号是一种可以继承的属性,因此使用百分比有时要通过计算。比如: 浏览器一般默认的字号都为16px,那么你将一个元素的字号设置为100%,那么这个元素的字号就为16px,也就是说100%对应16px,这是一个基准。因此,如果要将该元素的字号变为32px,那么,用百分比表示就是200%,即16 * 2。接下来,我们来看,如果有下面的结构:

    <p>  <!--字号为20px-->
        <span>文本</span> <!--字号为75%-->
    </p>

    由于span标签会继承p标签的字号20px,因此,此时span的字号计算公式为20 * 0.75(也就是75%) = 15px。类似的结构可以层层嵌套,只要计算一下就可以了。

    em: 表示一个大写M的高度。但是他的作用与百分比很相近,1em = 100%, .75em = 75%, 2em = 200%。

    格式化词语和字母

    斜体化 font-style

    italic(斜体) normal(正常) oblique(和italic一样)

    粗体 font-weight

    你可以选择100-900之间的整百数(900超粗,100不可见),但是由于浏览器支持的原因,用的很少。一般normal(正常) bold(粗体)

    大写化

    text-transform

    uppercase(大写) lowercase(小写) capitalize(首字母大写) none(不进行大小写)

    该属性可以被继承

    小型大写字母

    font-variant: small-cap;

    文本修饰

    text-decoration

    underline line-through overline none

    字母间距和字间距

    letter-spacing word-spacing

    对于这些属性,可以使用文本尺寸(px em 百分比) 正值代表扩大,负值为缩小。

    行高

    line-height

    px em 百分比 缩放因子

    要理解行高,首先要理解一些概念,可以参考这篇文章和里面的链接文章《深入理解css中的行高》

    使用行高时要注意一些问题:

    1 图片会将整行的行框撑开,但是却并不改变实际的行高

    2 em和百分比是相对于文本的字号来计算的,比如文本字号为12px,而行高被设置为150%(1.5em),那么行高为12 * 1.5

    3 行高可以被继承,但是em和百分比继承的是计算值,而缩放因子继承的是本身。比如p标签的行高被设置为150%,里面文本字号为10px,那么p里面所有标签都将继承15px的行高,而不是150%;但是缩放因子不同,如果p的缩放因子被设置为2,文本字号为10px,那么p里面所有后代标签都将继承2这个值,而不是20px的行高

    垂直对齐

    vertical-align

    baseline:基线对齐

    top:顶端对齐

    middle:中线对齐

    bottom:底端对齐

    text-top:文本顶端对齐

    text-bottom:文本底端对齐

    sub:下标

    super:上标

    em 百分比

    具体可以参考《垂直对齐:vertical-align属性》这篇文章

    使用垂直对齐要注意:

    1 浏览器的默认对齐方式为基线对齐,但是对于图片没有基线,故图片的底端会和基线对齐

    2 em和百分比值是相对于行高值来计算的,用来改变元素基线的高度,可正可负,正数是元素的基线升高,负数使元素的基线下降

    3 设置处置对齐可影响行框高

    4 这个属性只是用与行内元素,表单元素,以及图片,表格单元格

    文本对齐

    text-align

    left right center justify(两端对齐)

    文本缩进

    text-indent

    px em 百分比

    使用文本缩进要注意:

    1 px是精确值

    2 em相对于当前字号进行缩进

    3 百分比不是相对于字号,而是相对于当前元素的宽度值来计算

    4 可以使用负数来实现负缩进

    文本格式化有个快捷方法,就是只使用font属性,但是该属性中必须要有字号和字体属性,同时也可以指定行高,具体做法是在字号的后面加上"/",然后加上行高值。而且这两种属性必须在最后,其他属性可以以任意属性出现。

    给列表定义样式

    项目符号和数字

    list-style-type

    对于无序列表ul有3中项目符号可以选择

    disc(实心圆) square(方形) circle(空心圆)

    对于有序列表,有6中数字可以选择

    decimal(十进制) decimal-leadingzero(十进制前置0) upper-alpha(大写字母) lower-alpha(小写字母) upper-roman(大写罗马) lower-roman(小写罗马)

    用list-style-type:none 隐藏这些样式

    给项目符号和数字定位

    list-style-position

    outside:让项目符号和数字出现在文本外

    inside: 让项目符号和数字出现在文本内

    注意:可以使用padding-left调整项目符号和数字的间距,但是这种情况只有使用list-style-position:outside才有效或者根本没有使用list-style-position。

    图形项目符号

    list-style-image

    url(images/...jpg)

    注意:外部样式表中图片的路径是相对于样式表,而不是相对于网页

    这种方法可能让你并不能很好的控制图片的位置,通常都会用到background-image,这会更好用

    列表样式有一个快捷样式,list-style,它可以包含上面三种情况。

  • 相关阅读:
    精品绿色便携软件下载站
    DIV + CSS
    CSS基础
    尘封往事
    最近ゲームにはまってる。
    比水更浓的水
    有些事我得记下来
    一年前的今晚,注定是个岔路口.
    放下全世界
    超级保镖:国外精品个人防火墙亲密接触(2) java程序员
  • 原文地址:https://www.cnblogs.com/chaoguo1234/p/2934665.html
Copyright © 2011-2022 走看看