css基礎チュートリアル

10212 ワード

1.
CSSルールは、セレクタと1つ以上の宣言の2つの主要な部分で構成されています.

selector {declaration1; declaration2; ... declarationN }

セレクタのグループ化

セレクタをグループ化することで、グループ化されたセレクタは同じ宣言を共有することができます.グループ化が必要なセレクタをカンマで区切ります.次の例では、すべてのタイトル要素をグループ化します.すべてのタイトル要素は緑です.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

継承とその問題

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。

摆脱父元素的规则：

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

派生セレクタ

要素の位置のコンテキスト関係に基づいてスタイルを定義することで、タグをより簡潔にすることができます.
たとえば、リストのstrong要素を通常の太字ではなく斜体字にしたい場合は、派生セレクタを定義します.

li strong {
    font-style: italic;
    font-weight: normal;
  }

请注意标记为 <strong> 的蓝色代码的上下文关系：

<p><strong>     ，     ，         ，            </strong></p>

<ol>
<li><strong>     。     strong      li    。</strong></li>
<li>       。</li>
</ol>

子孫セレクタ:li strong;
サブエレメントセレクタ:li>strong;
隣接兄弟セレクタ:li+strong;
4.

idセレクタ

idセレクタは、特定のidが付いたHTML要素に特定のスタイルを指定できます.
idセレクタは「#」で定義されます.
次の2つのidセレクタで、1つ目は要素の色を赤、2つ目は要素の色を緑と定義できます.

#red {color:red;}
#green {color:green;}

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意:クラス名の最初の文字は数値を使用できません.MozillaまたはFirefoxでは機能しません.
5.

属性セレクタ

次の例では、titleプロパティを持つすべての要素のスタイルを設定します.

[title]
{
color:red;
}

CSSセレクタリファレンスマニュアル

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

如何创建css

1>外部スタイルシート

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2>
内部スタイルシート
個々のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用します.

ASP.NET web.config構成ノードの詳細

ウェブページの中でCSSは超長い英語、数字の自動改行を実現します