十·CSS常用样式

字数 9732阅读 382

1.块级元素和行内元素

  • 块级(block-level)元素;行内(内联、inline-level)元素。
  • 块元素的特点:
    a.总是在新行上开始;
    b.高度、行高以及外边距和内边距都可控制;
    c.宽度默认是它容器的100%,除非设定一个宽度;
    d.他可以容纳内联元素和其他块元素。
  • 内联元素的特点:
    a.和其他元素都在同一行;
    b.高,行高及外边距和内边距不可改变;
    c.宽度就是它的文字和图片的宽度,不可改变;
    d.内联元素只能容纳文本或者其他内联元素。
  • 行内元素智能设置左右内外边距,设置上下边距会把面积撑开,但是不会影响该元素的实际大小。
  • 常见的块级元素:
    address - 地址
    blockquote - 块引用
    center - 举中对齐块
    dir - 目录列表
    div - 常用块级容易,也是css layout的主要标签
    dl - 定义列表
    fieldset - form控制组
    form - 交互表单
    h1 - 大标题
    h2 - 副标题
    h3 - 3级标题
    h4 - 4级标题
    h5 - 5级标题
    h6 - 6级标题
    hr - 水平分隔线
    isindex - input prompt
    menu - 菜单列表
    noframes - frames可选内容(对于不支持frame的浏览器显示此区块内容)
    noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    ol - 排序列表
    p - 段落
    pre - 格式化文本
    table - 表格
    ul - 非排序列表
  • 常见的行内元素:
    a - 锚点
    abbr - 缩写
    acronym - 首字
    b - 粗体(不推荐)
    bdo - bidi override
    big - 大字体
    br - 换行
    cite - 引用
    code - 计算机代码(在引用源码的时候需要)
    dfn - 定义字段
    em - 强调
    font - 字体设定(不推荐)
    i - 斜体
    img - 图片
    input - 输入框
    kbd - 定义键盘文本
    label - 表格标签
    q - 短引用
    s - 中划线(不推荐)
    samp - 定义范例计算机代码
    select - 项目选择
    small - 小字体文本
    span - 常用内联容器,定义文本内区块
    strike - 中划线
    strong - 粗体强调
    sub - 下标
    sup - 上标
    textarea - 多行文本输入框
    tt - 电传文本
    u - 下划线
    var - 定义变量

2.属性:宽高

  • 只对块级元素设置生效,对行内元素设置无效。
  • 例子:
<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>
<div class="box"></div>
  • width为元素的宽度,height为元素的高度。
  • 这种方式设置的是元素的宽高,不包括内边距、外边距和边框。

3.属性:边框

1.边框与背景

  • CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
  • CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。

2.边框的样式

  • 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
  • 定义多种样式
    您可以为一个边框定义多个样式,例如:
p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们看到了这里的值采用了 top-right-bottom-left 的顺序。

  • 定义单边样式
    如果希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
    border-top-style
    border-right-style
    border-bottom-style
    border-left-style
    因此这两种方法是等价的:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。

  • 没有边框
    在前面的例子中,您已经看到,如果希望显示某种边框,就必须设置边框样式,比如 solid 或 outset。
    那么如果把 border-style 设置为 none 会出现什么情况:
    p {border-style: none; border-width: 50px;}
    尽管边框的宽度是 50px,但是边框样式设置为 none。在这种情况下,不仅边框的样式没有了,其宽度也会变成 0。边框消失了,为什么呢?
    这是因为如果边框样式为 none,即边框根本不存在,那么边框就不可能有宽度,因此边框宽度自动设置为 0,而不论您原先定义的是什么。
    记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。根据以下规则,所有 h1 元素都不会有任何边框,更不用说 20 像素宽了:
    h1 {border-width: 20px;}
    由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。
  • 各种border-style:
意义
none 定义无边框
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突
dotted 定义点状边框。在大多数浏览器中呈现为实线
dashed 定义虚线。在大多数浏览器中呈现为实线
solid 定义实线
double 定义双线。双线的宽度等于 border-width 的值
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值
inset 定义 3D inset 边框。其效果取决于 border-color 的值
outset 定义 3D outset 边框。其效果取决于 border-color 的值
inherit 规定应该从父元素继承边框样式

3.边框的宽度

  • 您可以通过 border-width 属性为边框指定宽度。
  • 为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。
    注释:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。
    所以,我们可以这样设置边框的宽度:
p {border-style: solid; border-width: 5px;}

或者:

p {border-style: solid; border-width: thick;}
  • 定义单边宽度
    您可以按照 top-right-bottom-left 的顺序设置元素的各边边框:
p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为(这样写法称为值复制):

p {border-style: solid; border-width: 15px 5px;}

您也可以通过下列属性分别设置边框各边的宽度:
border-top-width
border-right-width
border-bottom-width
border-left-width
因此,下面的规则与上面的例子是等价的:

p { 
border-style: solid; 
border-top-width: 15px; 
border-right-width: 5px; 
border-bottom-width: 15px; 
border-left-width: 5px; 
}

4.边框的颜色

  • 设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性。
  • 它一次可以接受最多 4 个颜色值。可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:
    p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
  • 如果颜色值小于 4 个,值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色,左右边框是红色:
    p { border-style: solid; border-color: blue red; }
    注释:默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元素的文本颜色相同。另一方面,如果元素没有任何文本,假设它是一个表格,其中只包含图像,那么该表的边框颜色就是其父元素的文本颜色(因为 color 可以继承)。这个父元素很可能是 body、div 或另一个 table。
  • 定义单边颜色
    还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:
    border-top-color
    border-right-color
    border-bottom-color
    border-left-color
  • 要为 h1 元素指定实线黑色边框,而右边框为实线红色,可以这样指定:
    h1 { border-style: solid; border-color: black; border-right-color: red; }
  • 透明边框
    我们刚才讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
    CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:
    <a href="#">AAA</a><a href="#">BBB</a><a href="#">CCC</a>
    我们为上面的链接定义了如下样式:
    a:link, a:visited { border-style: solid; border-width: 5px;border-color: transparent;}
    a:hover {border-color: gray;}
  • 从某种意义上说,利用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。
  • 重要事项:在 IE7 之前,IE/WIN 没有提供对 transparent 的支持。在以前的版本,IE 会根据元素的 color 值来设置边框颜色。

3.属性:边距

盒模型

1.内边距

  • 元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
  • CSS padding 属性定义元素边框与元素内容之间的空白区域。
  • CSS padding 属性
    CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
    例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:
    h1 {padding: 10px;}
  • 您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
    h1 {padding: 10px 0.25em 2ex 20%;}
  • 单边内边距属性
  • 也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
    padding-top
    padding-right
    padding-bottom
    padding-left
  • 也许已经想到了,下面的规则实现的效果与上面的简写规则是完全相同的:
    h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
  • 内边距的百分比数值
    前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。
    下面这条规则把段落的内边距设置为父元素 width 的 10%:
    p {padding: 10%;}
    例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算。
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div> 

注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。

2.外边距

  • 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
  • CSS margin 属性
    设置外边距的最简单的方法就是使用 margin 属性
    margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
    margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:
    h1 {margin : 0.25in;}
    下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):
    h1 {margin : 10px 0px 15px 5px;}
  • 与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:
    margin: top right bottom left
  • 另外,还可以为 margin 设置一个百分比数值:
    p {margin : 10%;}
    百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
  • margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。
  • 单边外边距属性
    您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto),而是可以采用以下方法:
    p {margin-left: 20px;}
    您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:
    margin-top
    margin-right
    margin-bottom
    margin-left
    一个规则中可以使用多个这种单边属性,例如:
    h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
    当然,对于这种情况,使用 margin 可能更容易一些:
    p {margin: 20px 30px 30px 20px;}
    不论使用单边属性还是使用 margin,得到的结果都一样。一般来说,如果希望为多个边设置外边距,使用 margin 会更容易一些。不过,从文档显示的角度看,实际上使用哪种方法都不重要,所以应该选择对自己来说更容易的一种方法。
  • 注意:对于块级元素设置属性:margin:0 auto;可以设置该块级元素格式为居中。
  • *{margin: 0;padding: 0}:消除当前浏览器的默认边距样式,浏览器的默认样式为:user agent stylesheet。

4.属性:display

  • display CSS属性指定用于元素的呈现框的类型。在 HTML 中,默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中,其默认值为 inline。
  • 除了多种不同的生成的元素的盒类型,值 none 可以关闭一个元素的显示;当你使用 none 所有的后代元素他们的显示也会被关闭。文档渲染的过程中就好像在文档树中这个元素不存在一样。
  • 初始值:inline
  • 是否能继承:否
  • 块级元素常用的display值:block, list-item, table。
  • 行内元素常用的display值:inline, inline-table, inline-block。
  • display值查询:display-CSS|MDN

5.属性:font

  • CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
  • 文字的各种属性都可以继承给后代元素。

1.文字的字体

  • font-size 属性设置文本的大小。
  • 有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。
    请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。
    font-size 值可以是绝对或相对值。
  • 绝对值:
    将文本设置为指定的大小
    不允许用户在所有浏览器中改变文本大小(不利于可用性)
    绝对大小在确定了输出的物理尺寸时很有用
  • 相对大小:
    相对于周围的元素来设置大小
    允许用户在浏览器改变文本大小
  • 注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
    使用像素来设置字体大小
    通过像素设置文本大小,可以对文本大小进行完全控制:
    实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
  • chrome的最小字体:默认字体大小16px, 最小字体 12px,可以在chrome的设置-工具-首选项-高级-字体中对最小字体和默认字体进行设置。

2.文字的字体

  • 使用 font-family 属性 定义文本的字体系列。
  • 使用通用字体系列
    如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:
    body {font-family: sans-serif;}
    这样用户代理就会从 sans-serif 字体系列中选择一个字体(如 Helvetica),并将其应用到 body 元素。因为有继承,这种字体选择还将应用到 body 元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。
  • 指定字体系列
    除了使用通用的字体系列,您还可以通过 font-family 属性设置更具体的字体。
    下面的例子为所有 h1 元素设置了微软雅黑字体:
    h1 {font-family: '微软雅黑';}
  • 中文字体为了避免乱码,应该尽量应用unicode来表示字体。如:
    宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
  • 如何得到中文字体的unicode:利用谷歌浏览器的开发者选项中的console,输入escape('微软雅黑'),如下图所示:

    得到的就是该字体的unicode码将其中的%u换为\即可使用。

  • 这样的规则同时会产生另外一个问题,如果用户代理上没有安装 Georgia 字体,就只能使用用户代理的默认字体来显示 h1 元素。
    我们可以通过结合特定字体名和通用字体系列来解决这个问题:
    h1 {font-family: Georgia, serif;}
  • 如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的一种字体),用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配,但至少足够接近。
    因此,我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。
    如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:
    p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
    根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。
  • 使用引号
    您也许已经注意到了,上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
    单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

3.文字的风格

  • font-style 属性最常用于规定斜体文本。
  • 该属性有三个值:
    normal - 文本正常显示
    italic - 文本斜体显示
    oblique - 文本倾斜显示
  • 实例
p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}
  • italic 和 oblique 的区别
  • font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
    斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
    通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

4.文字的变形

  • 字体变形
    font-variant 属性可以设定小型大写字母。
    小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。
  • 实例p {font-variant:small-caps;}

5.文字的加粗

  • font-weight 属性设置文本的粗细。
  • 使用 bold 关键字可以将文本设置为粗体。
  • 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
  • 如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
    实例
    p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}

6.文字的缩写

  • 字体缩写
    网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句:

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
  • 注意:
    1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
    2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

6.属性:文本

1.水平对齐

  • text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。
  • 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
  • 西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在元素中居中。
  • 提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
    text-align:center 与 <CENTER>
  • text-align:center 与 <CENTER> 的区别:
    <CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
  • justify
    最后一个水平对齐属性是 justify。
    在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
    需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。如需了解详情,请参阅 CSS text-align 属性参考页

2.缩进文本

  • 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
  • CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。
  • 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
  • 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:
    p {text-indent: 5em;}
  • 注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
  • 提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
  • 使用负值
    text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边。
    p {text-indent: -5em;}
    不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
    p {text-indent: -5em; padding-left: 5em;}
  • 使用百分比值
    text-indent 可以使用所有长度单位,包括百分比值。
    百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。
    在下例中,缩进值是父元素的 20%,即 100 个像素:
div {width: 500px;}p {text-indent: 20%;}<div><p>this is a paragragh</p></div>
  • 继承
    text-indent 属性可以继承,请考虑如下标记:
div#outer {width: 500px;}div#inner {text-indent: 10%;}p {width: 200px;}<div id="outer"><div id="inner">some text. some text. some text.<p>this is a paragragh.</p></div></div>

以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

3.文本装饰

  • 接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
    text-decoration 有 5 个值:
    none
    underline
    overline
    line-through
    blink
  • 不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
  • none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:
    a {text-decoration: none;}
  • 注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:a:link a:visited {text-decoration: underline overline;}不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:
h2.stricken {text-decoration: line-through;}h2 {text-decoration: underline overline;}

对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来

4.字符转换

  • text-transform 属性处理文本的大小写。这个属性有 4 个值:
    none
    uppercase
    lowercase
    capitalize
  • 默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
    作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:
    h1 {text-transform: uppercase}
  • 使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。

5.字间隔

  • word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
  • word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
p.spread {
word-spacing: 30px;
}
p.tight {
word-spacing: -0.5em;
}
<p class="spread">
This is a paragraph. The spaces between words will be increased.</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.</p>

6.字母间隔

  • letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
  • 与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

7.处理空白符

  • white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
  • 通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
    <p>This paragraph has many spaces in it.</p>
    可以用以下声明显式地设置这种默认行为:
    p {white-space: normal;}
  • 上面的规则告诉浏览器按照平常的做法去处理:丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。
  • 值 pre
    不过,如果将 white-space 设置为 pre,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像 XHTML 的 pre 元素一样;空白符不会被忽略。
    如果 white-space 属性的值为 pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre 元素。
    注意:经测试,IE 7 以及更早版本的浏览器不支持该值,因此请使用非 IE 的浏览器来查看上面的实例。
  • 值 nowrap
    与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个 br 元素。
  • 值 pre-wrap 和 pre-line
    CSS2.1 引入了值 pre-wrap 和 pre-line,这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
    如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。
    注意:我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例,但是结果是,值 pre-wrap 和 pre-line 都没有得到很好的支持。
  • 总结:
空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

8.文本方向

  • 如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
  • direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
    注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
  • direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。

9.文本溢出设置

  • 设置 overflow 属性:
div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }
  • 可能的值
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

10.颜色

  • 单词:
    red
    blue
    pink
    yellow
    white
    black
  • 十六进制:
#000000
#fff
#eee
#ccc
#666
#333
#f00
#0f0
#00f
  • rgb:
    rgb(255, 255, 255)
    , rgb(0, 255, 0)
  • rgba:
    rgba(0,0,0,0.5),a为透明度。
  • 更多

11.单位

px: 固定单位
百分比(宽高?文字大小?line-height? position?)
em: 相对单位,相对于父元素字体大小
rem: 相对单位,相对于根元素(html)字体大小
vw vh: 相对单位,1vw 为屏幕宽度的1% 兼容性

7.属性:背景

  • 属性 描述
    background:简写属性,作用是将背景属性设置在一个声明中
    background-attachment :背景图像是否固定或者随着页面的其余部分滚动
    background-color :设置元素的背景颜色
    background-image: 把图像设置为背景
    background-position :设置背景图像的起始位置
    background-repeat :设置背景图像是否及如何重复
    background-size :设置背景的大小(兼容性)
  • background-position:默认左上角
    x y
    x% y%
    [top | center | bottom] [left | center | right]
  • background-repeat
    no-repeat:背景图片在规定位置
    repeat-x:图片横向重复
    repeat-y:图片纵向重复
    repeat:全部重复
  • background-size
    100px 100px
    contain:调整图片宽度刚好充满框。
    cover:调整图片高度刚好充满框。
  • background-color: #F00;
    background-image: url(background.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
    可以缩写为一句:
    background: #f00 url(background.gif) no-repeat fixed 0 0;
  • CSS Sprite
    指将不同的图片/图标合并在一张图上。
    使用CSS Sprite 可以减少网络请求,提高网页加载性能。

8.隐藏or透明

opacity: 0 ; 透明度为0,整体
visibility: hidden ; 和opacity:0 类似,看不见元素的存在,但是占用位置。
display:none; 消失,不占用位置
background-color: rgba(0,0,0,0.2) 只是背景色透明,0.2位透明度。

9.inline-block

  • 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
    又呈现 block 特性 (可设置宽高,内外边距)
    inline-block时,两个元素如果高度不一样,对齐的位置是文字底部的基线,修改方法是使用:vertical-align=top/bottom来设置对齐的位置。
  • 缝隙问题
    两个元素之间有空白字符,很多个空白字符和换行被识别为一个空格。
    可以将父元素的字体设置为0 ,然后再将本元素的字体大小变回去。
    或者通过设置空白字符的属性来消去空格。
    10.line-height
  • 用于设置单行文本的行
  • line-height:2意思是它本身字体高度的两倍。
  • line-height:200%是它父容器的两倍。
  • 用line-height可以使文本垂直居中。

10.盒模型

-使用css3新样式box-sizing
box-sizing: content-box:w3c标准盒模型
box-sizing: border-box:“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>

  • text-overflow
    1、text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),也就是说 overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用,只有这样才能实现溢出文本显示省略号的效果。

2、一定要给容器定义宽度.

3、如果少了overflow: hidden;文字会横向撑到容器的外面

4、如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉

5、如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 文档流:normal flow文...