zoukankan      html  css  js  c++  java
  • CSS自学笔记(5):CSS的样式

    CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓。

    一.CSS-背景

    CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景。

    p {background-color: #000;}

    是用纯色作为背景。这时你可以定义其他属性,生成不同效果的背景。

    CSS中也可以用图片作为背景,这是就需要使用background-image属性了,如果属性值为一个URL值,并且图片文件存在,那么就可以看到用该图片做为背景的网页了

    body {background-image: url(4.gif);}

    注:background-image属性也可以用在其他标签里。

    这时可以定义其他属性,改变图片的位置,大小等等。

    可以使用 background-repeat 属性,对页面上的图片背景进行平铺处理,利用 background-position 属性改变图像在背景中的位置。

    需要注意的是,在改变图片背景的位置时,可以使用关键字,也可以使用百分比,还可以使用长度值来确定图片的位置。

    当文档很长,一个屏幕显示不下的时候,在向下滚动的时候,我们不希望背景也一起滚动,这是就可以用到background-attachment 属性防止这种滚动,防止背景滚动,将背景固定到一个可视区域中(fixed),不会收到网页滚动的影响。

    二.CSS-文本

    文本,应该是一个网页中占据内容最多的部分,所以文本的样式是比较重要的。

    CSS中的属性可定义文本的外观,包括文本的颜色、字符间距、对齐方式,还可以对文本进行装饰、排版等。

    CSS 文本属性

    属性 描述
    color 设置文本颜色
    direction 设置文本方向。
    line-height 设置行高。
    letter-spacing 设置字符间距。
    text-align 对齐元素中的文本。
    text-decoration 向文本添加修饰。
    text-indent 缩进元素中文本的首行。
    text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
    text-transform 控制元素中的字母。
    unicode-bidi 设置文本方向。
    white-space 设置元素中空白的处理方式。
    word-spacing 设置字间距。

    注:在文本属性中的部分属性值,可以用长度、百分比、关键字等等来设置。

    三.CSS-字体

    CSS的字体属性定义文本的字体、大小、风格(加粗、倾斜)和变形等。

    CSS的字体系列

    在 CSS 中,有两种不同类型的字体系列名称:

    • 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
    • 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")

    除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

    • Serif 字体
    • Sans-serif 字体
    • Monospace 字体
    • Cursive 字体
    • Fantasy 字体

    定义文本的字体属性时,应用到font-family属性。定义它的属性值时,可以用通用字体系列,也可以用指定字体系列,这两种字体系列也可以同时使用。

    body {font-family: Serif;}

    希望html文档使用Serif字体,但又不关心是哪种字体,这时可以用到通用字体系列。

    body {font-family: Georgia;}

    将body元素的字体设置成具体的Georgia字体。

    定义字体风格时,应用到font-style属性

    font-style属性值有:

    • normal - 文本正常显示
    • italic - 文本斜体显示
    • oblique - 文本倾斜显示

    注:斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

    CSS 字体属性

    属性 描述
    font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
    font-family 设置字体系列。
    font-size 设置字体的尺寸。
    font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。
    font-stretch 对字体进行水平拉伸。
    font-style 设置字体风格。
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight 设置字体的粗细。

    四.CSS-链接

    CSS中我们也可以为链接设置各种规格样的样式。不过相对于其他的,链接样式比较简单。

    链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

    链接的四种状态:

    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻

    当为链接的不同状态设置样式时,请按照以下次序规则:

    • a:hover 必须位于 a:link 和 a:visited 之后
    • a:active 必须位于 a:hover 之后

    五.CSS-列表

    CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

    在html中有效的使用列表,可以使页面变得非常丰富的同时,也很整齐。

    列表最常用的属性是它的标志类型:list-style-type

    同样,当列表项不够用(不想用)时,我们也可以用图片来做列表项。

    ul li {list-style-image : url(1.gif)}

    QQ截图20140728210346

    由于列表的使用频率比较高,所以可以将列表的属性简写

    li {list-style : url(1.gif) square inside}

    CSS 列表属性(list)

    属性 描述
    list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image 将图象设置为列表项标志。
    list-style-position 设置列表中列表项标志的位置。
    list-style-type 设置列表项标志的类型。

    六.CSS-表格

    有效的使用表格属性,可以将那些看起来很死板的表格变得很个性。

    table, th, td
      {
      border: 1px solid red;;
      }

    将表格table、th 以及 td 设置了蓝色边框。

    也可以对表格边框的其他属性进行定义,从而得到各式各样边框的表格。

    对表格的大小(高宽)进行定义,使之更符合html的布局设计,是网页更加美观。

    我也可以对表格内部的文本属性进行定义,text-align 和 vertical-align 属性设置表格中文本的对齐方式

    td
      {
      text-align:right;
      }

    为表格td和th元素设置padding属性,可以改变表格内容对表格内边框的距离。

    和其他背景一样,也可以为表格添加背景颜色,可以为纯色,也可以为图片。

    CSS Table 属性

    属性 描述
    border-collapse 设置是否把表格边框合并为单一的边框。
    border-spacing 设置分隔单元格边框的距离。
    caption-side 设置表格标题的位置。
    empty-cells 设置是否显示表格中的空单元格。
    table-layout 设置显示单元、行和列的算法。

    七.CSS-轮廓

    轮廓可以理解为包围在某元素周围的一条线,起强调作用。

    QQ截图20140728213707

    CSS 边框属性

    属性 描述
    outline 在一个声明中设置所有的轮廓属性。
    outline-color 设置轮廓的颜色。
    outline-style 设置轮廓的样式。
    outline-width 设置轮廓的宽度。
  • 相关阅读:
    转基因(转载)
    Diwali
    使用Matplotlib画图
    项目格式规范
    关于Dapper
    JQuery
    javascript封装
    2015年2月16日——作者观点
    2015年2月12日——不懂点
    在VS2013上使用git
  • 原文地址:https://www.cnblogs.com/lonzhe/p/3873612.html
Copyright © 2011-2022 走看看