HTML
CSSでのHTMLの使用

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
サーチ…


前書き

CSSはページ上のHTML要素にスタイルを提供します。インラインスタイルは、タグでstyle属性を使用することを伴い、非常にお勧めです。内部スタイルシートは<style>タグを使用し、ページの有向部分の規則を宣言するために使用されます。外部のスタイルシートはCSSの外部ファイルを受け取り、文書にルールを適用する<link>タグを通して使用できます。このトピックでは、3つの添付ファイルのすべての使用法について説明します。

構文

  • <link rel="stylesheet" type="text/css" href="stylesheet.css">
  • <style></style>

外部スタイルシートの使用

ドキュメントのhead link属性を使用する： 

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

また、ウェブサイトから提供されたスタイルシートを、コンテンツ配信ネットワーク、つまりCDNを使って使用することもできます。 （たとえば、ブートストラップ）： 

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

一般に、WebサイトでフレームワークのCDNサポートを見つけることができます。

内部スタイルシート

また、 <style>タグを使用してCSS要素を内部的に含めることもできます。 

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

複数の内部スタイルシートもプログラムに含めることができます。 

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

インラインスタイル

style属性を使用すると、特定の要素をスタイルすることができます。 

<span style="color: red">This text will appear in red.</span>

注：これを避けるようにしてください - CSSのポイントは、コンテンツをプレゼンテーションから分離することです。

複数のスタイルシート

複数のスタイルシートを読み込むことは可能です： 

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

後のファイルと宣言は、前のファイルと宣言を上書きすることに注意してください。したがって、 general.cssが含まれている場合、 

body {
    background-color: red;
}

specific.cssは以下が含まれます： 

body { 
    background-color: blue;
}

両方を使用すると、ドキュメントの背景が青色になります。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow