[TIL#2]CSSベース
Goal:CSSに関する基本的な知識
Table of Contents
1.選択者-選択者宣言
タグを設計するには、設計するタグ(選択者)を選択し、選択したターゲットを有効にする必要があります.(宣言)
External stylesheets
<head>部分中<link>.cssファイルを接続して使用するHTML&CSSは次のように作成されます.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example CSS stylesheet</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External stylesheets</h1>
<p>External stylesheets1</p>
</body>
</html>color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
Internal stylesheets
<head>部分.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>Inline styles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>1.選択者-選択者タイプ
SelectorExampleType selectorh1{text-aling :center;}Univeral selector*{font-weight:bold;}Class selector. box {font-weight:bold;}id selector#unique {colo:red;}Attribute selectora[title] {color:puprple;}Pseudo-class selectorsp:first-child { }Pseudo-element selectorsp:first-line { }Descendant combibatorarticle_pchild combinatorarticle >pAdjacent silbling combinagtorh1+pGeneral silbling combinagtorh1 ~ p
(source : CSS Selector |MDN )
2.フォント印刷術
- Font-size
rem:htmlタグに適用されるfont-sizeの影響を受けます.これはhtmlタグのフォントサイズに依存するため、容易に理解できます.最も理想的な単位.これを使ってください.
px:ディスプレイ上の1画素サイズに対応する単位.これは固定値なので分かりやすいですが、ユーザーがフォントサイズを調整できないため、使用しないほうがいいです.
Em:親ラベルの影響を受ける相対的なサイズ.親の大きさの影響で確定しにくい.remが現れるにつれて、この単位は推奨されません.
<!DOCTYPE html>
<html>
<head>
<style>
#px{font-size:16px;}
#rem{font-size:1rem;}
</style>
</head>
<body>
<div id="px">PX</div>
<div id="rem">REM</div>
</body>
</html>- Color :
CSSで背景や文字色などを変更できます.
<color>は、次のように定義できます.- Text-align:
text-alignの値は次のとおりです.
(sorce : https://bitsofco.de/the-vertical-align-property/ )
- Text-font
font-familyはフォントを指定するプロパティです.次のように操作します.
h1{
font-family: "Times New Roman", Times, serif;
}
以上のコードは、Times New Romanタグh 1を指定することを意味する.ただし、コンピュータにフォントがない場合は、Timesを使用します.
最後のフォントは統合フォントとして指定されます.以下の内容があります.
serif(装飾付きフォント)
sans-serif
草書
fantasy
シングルスペース(固定幅)
出典:http://matchwebdesign.com/Daily-Thoughts/why-typographically-thinking-ruins-your-site.html
font-weight:フォントの厚さを表します.だいたいboldだけ覚えておけばいいboldを使用すると、厚いフォントが表示されます.
h1{
font-weight: bold;
}
line-height
行と行の間隔を指定します.デフォルト値はnormal、値は1.2です.この値に基づいてギャップを調整できます.値が1.2の場合、現在のレイヤーサイズの1.2倍の間隔が表示されます.
p{
line-height: 1.3;
}
font
フォントに関連する複数のプロパティのサムネイル.フォーマットは次のとおりです.手順に従って説明する必要があります.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
ここでfont-sizeとfont-sizeとfont-familyは必須の情報です.
h1{
font: 15px arial, sans-serif;
}
フォントリスト
よく使うフォントのランキングを教えてくれるサイトがあります.このサイトを通じて最もよく使われるフォントが何なのかを知るのも面白いです.
http://www.fontreach.com/#top
国内フォント
ネイバーが運営する国内資料室で無料のフォントをダウンロードできます.
http://software.naver.com/software/fontList.nhn?categoryId=I0000000#brandId=
3. Box model
(source: https://www.w3schools.com/css/css_boxmodel.asp )
4. Layout - Position
div {
position: static position
}
親の位置に対する変更
Reference
この問題について([TIL#2]CSSベース), 我々は、より多くの情報をここで見つけました https://velog.io/@junchi211/TIL2-CSS-기초テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol