コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

バックエンド プログラマーがフロントエンド (CSS) について語る レッスン 5: CSS style_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:47:34
オリジナル
1248 人が閲覧しました

1. 背景:

CSS を使用すると、背景として単色を適用したり、背景画像を使用して非常に複雑な効果を作成したりすることもできます。

1. 背景色

background-color 属性を使用して要素の背景色を設定できます。このプロパティは、任意の正当な色の値を受け入れます。

例: 

p {background-color: gray;}
ログイン後にコピー

2. 背景画像

画像を背景に配置するには、background-image 属性を使用する必要があります。 Background-image プロパティのデフォルト値は none です。これは、背景に画像が配置されないことを意味します。背景画像を設定する必要がある場合は、この属性の URL 値を設定する必要があります: 

body {background-image: url(/i/eg_bg_04.gif);}
ログイン後にコピー

3. 背景画像の繰り返し

ページ上に背景画像を並べる必要がある場合は、背景を使用できます。 -repeat 属性。

属性値repeatにより、背景画像の場合と同様に、画像が水平方向と垂直方向の両方に並べて表示されます。 repeat-x とrepeat-y を指定すると、画像はそれぞれ水平方向または垂直方向にのみ繰り返されますが、no-repeat を指定すると、画像をどの方向にも並べて表示できなくなります。

デフォルトでは、背景画像は要素の左上隅から始まります。次の例を参照してください: 

body
ログイン後にコピー
ログイン後にコピー
  {
ログイン後にコピー
ログイン後にコピー
    background-image: url(/i/eg_bg_03.gif);
ログイン後にコピー
    background-repeat: repeat-y;
ログイン後にコピー
  }
ログイン後にコピー
ログイン後にコピー

4. 背景画像の位置

background-position 属性を使用して、背景内の画像の位置を変更できます。

次の例では、body 要素内の背景画像を中央に配置します。 

body
ログイン後にコピー
ログイン後にコピー
  {
ログイン後にコピー
ログイン後にコピー
    background-image:url('/i/eg_bg_03.gif');
ログイン後にコピー
    background-repeat:no-repeat;
ログイン後にコピー
    background-position:center;
ログイン後にコピー
  }
ログイン後にコピー
ログイン後にコピー

background-position プロパティの値を指定するには、さまざまな方法があります。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長さの値を使用することもでき、最後にパーセント値を使用することもできます。値のタイプが異なると、背景画像の配置が若干異なります。

5. 背景画像の関連付け

文書が比較的長い場合、文書を下にスクロールすると、背景画像も一緒にスクロールします。文書が画像を超えてスクロールされると、画像が消えます。このスクロールは、background-attachment プロパティを使用して防ぐことができます。この属性を通じて、画像が視覚領域に対して固定されているため、スクロールの影響を受けないことを宣言できます。 

              <p class="sycode">                  <p class="sycode">      body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }     </p>              </p>
ログイン後にコピー

2. Text CSS テキスト プロパティは、テキストの外観を定義できます。 

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
ログイン後にコピー

1. テキストのインデント 

p {text-indent: -5em;}
ログイン後にコピー

2. 水平方向の配置 (text-align) 

h1{text-align:center;}
ログイン後にコピー

3. rree

4. 文字間隔 

p {word-spacing: 30px;}
ログイン後にコピー

5. 文字変換 ​​(text-transform)

属性値:

none

大文字
    • 小文字
    • 大文字化
  • h4 {letter-spacing: 20px}
    ログイン後にコピー

    • 6. テキスト装飾

    属性値:

    none

    underline
    • overline
    • line-through
    • blink
  • h1 {text-transform: uppercase}
    ログイン後にコピー

    • 7. テキストの方向 (direct ion)

    【注: inline 要素の場合、direction 属性は Unicode の場合にのみ適用されます。 - bidi 属性は、embed または bidi-override に設定されます。 】

    属性値:

    ltr

    rtl
  • a {text-decoration: none;}
    ログイン後にコピー

    • 8. 空白文字 (空白) の処理

    空白属性は、ユーザー エージェントのスペース、改行、ソースドキュメント内のタブと文字の処理。詳細:

    valuewhitespace改行自動折り返しpre-linemergekeepallow通常マージ無視許可nowrapマージ無視許可されないpreKeepKeep許可されないpre-wラップ予約済み予約済み許可

    三、字体

    1、设置字体系列。（font-family）

    h1 {font-family: Georgia;}
    ログイン後にコピー

    2、设置字体的尺寸。（font-size）

    h1 {font-size:60px;}
    ログイン後にコピー
    h2 {font-size:40px;}
    ログイン後にコピー
    p {font-size:14px;}
    ログイン後にコピー

    3、设置字体风格。（font-style）

    属性值：

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

    • p.normal {font-style:normal;}
    ログイン後にコピー
    p.italic {font-style:italic;}
    ログイン後にコピー
    p.oblique {font-style:oblique;}
    ログイン後にコピー

    4、以小型大写字体或者正常字体显示文本。（font-variant）

    p {font-variant:small-caps;}
    ログイン後にコピー

    5、设置字体的粗细。（font-weight）

    p.normal {font-weight:normal;}
    ログイン後にコピー
    p.thick {font-weight:bold;}
    ログイン後にコピー
    p.thicker {font-weight:900;}
    ログイン後にコピー

    四、列表

    1、将图象设置为列表项标志。（list-style-image）

    ul li {list-style-image : url(xxx.gif)}
    ログイン後にコピー

    2、设置列表中列表项标志的位置。（list-style-position）

    属性值：

  • inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
  • outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
  • inherit:规定应该从父元素继承 list-style-position 属性的值。

    • ul{list-style-position:inside;}
    ログイン後にコピー

    3、设置列表项标志的类型。（list-style-type）

    ul {list-style-type : square}
    ログイン後にコピー

    五、表格

    1、设置是否把表格边框合并为单一的边框。（border-collapse）

    属性值：

  • separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
  • collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
  • inherit：规定应该从父元素继承 border-collapse 属性的值。

    • table{border-collapse:collapse;}
    ログイン後にコピー

    2、设置分隔单元格边框的距离。（border-spacing）

    table{border-spacing:10px 50px;}
    ログイン後にコピー

    3、设置表格标题的位置。（caption-side）

    属性值：

  • top：默认值。把表格标题定位在表格之上。
  • bottom：把表格标题定位在表格之下。
  • inherit：规定应该从父元素继承 caption-side 属性的值。

    • caption{caption-side:bottom;}
    ログイン後にコピー

    4、设置是否显示表格中的空单元格。（empty-cells）

    属性值：

  • hide：不在空单元格周围绘制边框。
  • show：在空单元格周围绘制边框。默认。
  • inherit：规定应该从父元素继承 empty-cells 属性的值。

    • table{empty-cells:hide;}
    ログイン後にコピー

    5、设置显示单元、行和列的算法。（table-layout）

    属性值：

  • automatic：默认。列宽度由单元格内容设定。
  • fixed：列宽由表格宽度和列宽度设定。
  • inherit：规定应该从父元素继承 table-layout 属性的值。

    • table{table-layout:fixed;}
    ログイン後にコピー

    六、轮廓

    轮廓（outline）是绘制于元素周围的边框线，可起到突出元素的作用。

    CSS outline 属性规定元素轮廓的样式、颜色和宽度。

    1、设置轮廓的颜色。（outline-color）

    p{outline-color:#00ff00;}
    ログイン後にコピー

    2、设置轮廓的样式。（outline-style）

    属性值：

  • none：默认。定义无轮廓。
  • dotted：定义点状的轮廓。
  • dashed：定义虚线轮廓。
  • solid：定义实线轮廓。
  • double：定义双线轮廓。双线的宽度等同于 outline-width 的值。
  • groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
  • ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
  • inset：定义 3D 凹边轮廓。此效果取决于 outline-color 值。
  • outset：定义 3D 凸边轮廓。此效果取决于 outline-color 值。
  • inherit：规定应该从父元素继承轮廓样式的设置。

    • p{outline-style:dotted;}
    ログイン後にコピー

    3、设置轮廓的宽度。（outline-width）

    p{outline-width:5px;}
    ログイン後にコピー

    関連ラベル：
    后端码农谈前端（CSS篇）第五课：CSS样式
    ソース：php.cn
    前の記事：li の 2 つの div のフォントを同じ水平線に配置する方法_html/css_WEB-ITnose 次の記事：強力な CSS3 アニメーション ライブラリ animate.css_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    2
    1856
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    10
    2023
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1702
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1607
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1619
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート