カスケードスタイルシート

13075 ワード
スタイル

CSS概要


セレクタ
宣言
h1
{font-family:
arial;}
 
とくせい
値
  • セレクタ:宣言が適用される要素
    • を指定します.
  • 宣言:要素のスタイルを設定します.宣言はまた、2つの部分がコロンで区切られている
    • から構成されています.
  • プロパティ:選択した要素が影響を受けたいプロパティ.
  • 値:プロパティの値です.

    • 1つのCSSルールは、複数の異なる要素に適用できます.
    h1, h2, h3

{

    font-weight: bold;

    font-family: 'Arial Unicode MS';

    font-size: 1.5em;

    color: #000000;

    background-color: #FFFFFF;

}

    基本的な例


    ページファイル(ch 07_eg 01.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ファイル(ch 07_eg 01.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ルールは、2つの場所にも表示されます.
  • 要素内に要素を介して特性
    • を含む.
    <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 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
    css学習小記(二)--論理レイアウト
    IEと火狐の中でテキストの選択を禁止することについて