CSS简介

选择器 声明
h1 {font-family: arial;}
  特性 值
  • 选择器：它指定声明应用于哪个或哪些元素
  • 声明：它用于设置元素的样式。声明又由以冒号分隔的两个部分组成
  • 特性：所选元素希望被影响的特性。
  • 值：它是特性的值。

一个CSS规则可以应用于多个不同元素：

h1, h2, h3
{
    font-weight: bold;
    font-family: 'Arial Unicode MS';
    font-size: 1.5em;
    color: #000000;
    background-color: #FFFFFF;
}

一个基本的示例

页面文件（ch07_eg01.html）：

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>CSS Example</title>
    <

link rel="stylesheet" type="text/css" href

="ch07_eg01.css" />
</head>
<body>
    <h1>
        Basic CSS Font Properties</h1>
    <p>
        The following table shows you the basic CSS font properties that allow you to change
        the appearance of text in your documents.</p>
    <table>
        <tr>
            <th>
                Property
            </th>
            <th>
                Purpose
            </th>
        </tr>
        <tr>
            <td class="code">
                font-family
            </td>
            <td>
                Specifies the font used.
            </td>
        </tr>
        <tr>
            <td class="code">
                font-size
            </td>
            <td>
                Specifies the size of the font used.
            </td>
        </tr>
        <tr>
            <td class="code">
                font-style
            </td>
            <td>
                Specifies whether the font should be normal, italic or oblique.
            </td>
        </tr>
        <tr>
            <td class="code">
                font-weight
            </td>
            <td>
                Specifies whether the font should be normal, bold, bolder, or lighter
            </td>
        </tr>
    </table>
</body>
</html>

链接的css文件（ch07_eg01.css）：

/* Style sheet for ch07_eg01.html */

body
{
    color: #000000;
    background-color: #ffffff;
    font-family: arial, verdana, sans-serif;
}

h1
{
    font-size: 18pt;
}

p
{
    font-size: 12pt;
}

table
{
    background-color: #efefef;
    border-style: solid;
    border-width: 1px;
    border-color: #999999;
}

th
{
    background-color: #cccccc;
    font-weight: bold;
    padding: 5px;
}

td
{
    padding: 5px;
}

td.code
{
    font-family: courier, courier-new, serif;
    font-weight: bold;
}

继承

添加CSS规则的位置

css规则还可以出现在两个位置：

  • 在<head>元素内，通过<style>元素包含特性
<head>
    <title></title>
    <style type="text/css">
        body
        {
            color: #000000;
            background-color: #ffffff;
            font-family: arial, verdana, sans-serif;
        }
    </style>
</head>
  • 作为元素的style属性的值，称为内联样式规则
<td style="font-family: courier, courier-new, serif; padding: 5px; border-style: solid;
border-width: 1px; border-color: #999999;">

 

<link>

rel

type

href

hreflang

media

<style>

外部css样式表的优点

CSS特性

 

控制字体

字型：serif scans-serif

font-family

font-size

  • 绝对大小：xx-small x-small small medium large x-large xx-large
  • 相对大小：smaller larger
  • 单位：px em ex pt in cm pc mm
  • 百分比计算：相对于包含该文本的元素的比例

font-weight

normal bold bolder lighter [100*n,n=1..9]

font-style

normal italic oblique

font-variant

normal small-caps

font-stretch

相对值：normal wider narrower

固定值：ultra-condensed ex

font-size-adjust

宽高比

 

文本格式化

color

text-align

vertical-align

text-decoration

text-indent

text-shadow

text-transform

letter-spacing

word-spacing

white-space

direction

unicode-bidi

文本伪类

first-letter

first-line

选择器

通用选择器

*{ }

Tag选择器

h1,h2,p{}

类选择器

 

id选择器

子选择器

另外一个元素的直接子元素

后继选择器

相邻兄弟选择器

利用子选择器和相邻兄弟选择器降低标记中类的相关性

属性选择器

长度

绝对单位

pt pc in cm mm

相对单位

px em ex

百分比

 

框模型简介

演示框模型的示例

Border

border-color

border-style

border-bottom-style

border-right-style

border-top-style

border-left-style

border-width

利用简写表达边框的特性

padding

margin

面积

height width

line-height

max-width min-width

max-height min-height

overflow