CSSの概要

8781 ワード
webdev codenewbie css beginners テキストリンク
CSSは、HTMLドキュメント用のスタイリング言語です.HTML要素の外観を定義するのに使用されます.
言い換えれば、我々はそれをHTML


どのように、あなたはHTMLにCSSを取り付けますか?
外部CSS
CSSファイルを外部にアタッチするには、別のファイルを作成する必要があります.CSSの拡張とHTMLドキュメントの先頭部分に添付します.HREF属性はCSSファイルへのパスを定義するために使用されます.したがって、パス名が正しいことを保証しなければなりません.
<html>
<head>
    <link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
<!--the body-->
</body>
<html>
内部のCSS
内部CSSを使用する場合、スタイルはヘッドセクションの<style>タグ内で定義されます.
<head>
    <style>
        body{
            background-color: blue;
        }
    </style>

インラインCSS
スタイルは、要素の開始タグの内部で次のように定義されます.
<h1 style="color:red;">This is the first heading</h>

セレクタ
セレクタを使用して、スタイルを適用するコードブロックを選択します.
文法
    Selector{
Style: value;
   }
彼らは5つに分けることができます
単純なセレクタ
その他
-要素名p、h1、span、div
<p>Content</p>

    p {
color: red;
   }
- id #title , #first-par注意: ID名は、Countから始まるはずです.
E ;
<p id='first-par'>Content</p>

    #first-par {
color: red;
   }
-クラスセレクタなど.title注意クラス名にはドットが先行します.
EG
<p class='par'>Content</p>

    .par{
color: red;
   }
コンビナレーターセレクタ
要素間の関係を示す.含む
-子孫セレクタなどdiv p{…..}は、div
-子セレクタ(>)たとえばdiv >p{……}で、<div>の子要素であるすべてのP要素を選択します.
隣接する兄弟(＋)は、他の特定の要素の直後にある要素を選択する
擬似クラスセレクタ
彼らは特定の条件を満たした後にのみセレクタにスタイルを追加するために使用されます
構文
    Selector: pseudo-class {
Property: value;
   }
例:
a:hover {
  color: #FF00FF;
}
擬似要素セレクタ
要素の特定の部分だけを選択する
構文
Selector: pseudo-class {
Property: value;
   }
例:
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

フレックスボックスとグリッド
Flexboxは、アイテムが水平または垂直に整列する必要がある場合は、指定する1次元レイアウトの設計です.
参考文献https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
グリッドは2次元レイアウト設計です.
https://css-tricks.com/snippets/css/complete-guide-grid/

遷移
CSSでの遷移は、CSSで変化するプロパティの速度を制御する方法を提供します.
たとえば、オブジェクトの幅を増やすと即座に発生します.しかし、遷移を使用すると、それが起こるように、すべての変更を観察するように、この速度を減らすことができます.
ref :
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
- https://www.w3schools.com/css/css3_transitions.asp

アニメーション
CSSのアニメーションはJavaScriptやライブラリを使用せずに別のスタイルをアニメーション化することができます
ref :
- https://www.w3schools.com/css/css3_animations.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

応答性Webデザイン
応答性は、ウェブページがすべての装置でよく見えることを保証する技術です.つまり、Webデザインは、画面サイズ、向き、プラットフォームに応じて調整する必要があります.
応答性を達成するための一般的な方法は、柔軟なグリッド、メディアクエリ、およびビューポートの設定です.


メディア質問
特定の条件が意味されるとき、メディア質問は適用されるスタイルを指定します.
例
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

ブレークポイント
CSSのブレークポイントは、ウェブサイトのコンテンツがデバイスの幅に応じて応答点です
前の例では、スクリーンが600 pxの最大幅にサイズ変更されたとき、指定されたスタイルに採用されます.すなわち600 pxはブレークポイントです.
升級裝有 プライスク的 Ubuntu 16.04
[Basic NLP]sentent-Transformersライブラリを使用してSBERTを学習する方法