Webフロントエンド開発学習ノート-Day 03
20009 ワード
Day 03学習ノート
1.CSS導入方式
1.1行内スタイル
<html lang="en">
<head>
<title>This is titletitle>
head>
<body>
<p style="font-size: 16px; color: red;"> p>
body>
html>
行のスタイルは、ラベルのstyleプロパティ値に書き込まれます.
1.2内部スタイル
<html lang="en">
<head>
<title>This is titletitle>
<style>
p {
font-size: 16px;
color: red;
}
style>
head>
<body>
<p>Hello everyonep>
body>
html>
内部スタイルは
ラベルに く があります
1.3
<html lang="en">
<head>
<title>This is titletitle>
head>
<body>
<p style="font-size: 16px; color: red;"> p>
body>
html>
<html lang="en">
<head>
<title>This is titletitle>
<style>
p {
font-size: 16px;
color: red;
}
style>
head>
<body>
<p>Hello everyonep>
body>
html>
.css
の のファイルに かれています.で、
タグによって される.
<html lang="en">
<head>
<title>This is titletitle>
<link rel="stylesheet" type="text/css" href="./css/index.css">
head>
<body>
<p> p>
body>
html>
CSS
ラベルに されています.このページでのみ になります.
ラベルによって された のCSSファイル.2. CSS
2.1 font-size:
フォント を するには、 さ と を します.
いくつかの さな :
:
p{
font-size: 18px;
}
2.1.1
2.2 font-family:
フォントの に します.
:
p{
font-family: " ";
}
のフォントを できます. はカンマで られています.ブラウザがサポートしていない は、 なフォントが つかるまで に のフォントを します.
p{
font-family: " "," "," ";
}
いくつかの さな :
2.3 font-weight:
フォントの さはbとstrongラベルのほか、cssで できます.
:
normal
. の を します.
bold
を します.
bolder
より い を します.
lighter
より かい を します.
100~900
い から い まで します.400はnormalに しく、700はboldに しい.
:
p{
font-weight: bold;
}
いくつかの さな :
2.4 font-style:
フォントスタイルを するために され、フォントの きはiとemラベルのほかにcssを して できます.
:
normal
. のフォントスタイル.
italic
onlique
:
p{
font-style: italic;
}
いくつかの さな :
font:
フォントスタイルは、 、フォント、 さ、スタイルを に する1 のコードで に くことができます.
:
p{
font:italic 700 20px " ";
font:font-style font-weight font-size font-family;
}
:
3. CSS
:
/* ... */
p{
width:500px; /* P 500 */
}
4.
4.1
4.1.1
:
p{
font-size:18px;
}
タブを セレクタとして し、ページ のすべてのPタブに スタイルを します.
4.1.2 Class
:
.box{
width: 500px;
}
ページのclassプロパティ にboxクラス を むすべての を し、スタイルを します.
4.1.3 ID
:
#box{
width: 500px;
}
ページのid のboxの を し、スタイルを します.
Class ID
4.1.4
:
*{
margin:0;
}
ページ のすべてのラベルを します.
:
4.2
クラスセレクタは、 のセレクタに な を するために されます.
4.2.1
:link
ダミークラスを する 、 するaラベルのプロパティhref=""は、 になるには の が です.:
a{
color: red;
}
a:hover{
color: green;
}
5. CSS
5.1 color:
テキストの を します. は、 め された であってもよく、16 の であってもよく、RGB であってもよい.
:
p{
color: red;
/* color:#ff0000 */
/* color: rgb(255,0,0) */
}
いくつかの さな :
p{
color: rgba(255,0,0,0.5);
}
5.2 line-height:
の さ、すなわちテキスト のベースライン の を します.
:
line-height
normal| | さ |パーセント
デフォルト
normal
line-height:2; font-size: 16px
の 、 の さは:2*16 px=32 pxに しい.line-height:32px
です.:
p{
font-size: 18px;
line-height: 28px;
}
いくつかの さな :
font-size:18px;line-height:28px
.5.3 text-align:
テキストの わせを します.
:
:
p{
text-align: center;
}
5.4 text-indent:
の のテキストのインデントを するには、 、em、ブラウザウィンドウの に するパーセントで、 の を できます.
:
p{
text-indent: 2em;
}
5.5 text-decoration:
など、テキストを するために されます.
:
p{
text-decoration: dunderline;
}
5.6 text-transform:
の と を するために されます.
:
p{
text-transform: capitalize;
}
5.7 letter-spacing:
の を します. の に しています.
:
:
p{
letter-spacing: 2px;
}
5.8 word-spacing:
の を します. の に しています.
:
:
p{
word-spacing: 2px;
}
5.9 text-shadow:
テキストにシャドウ を します.
:
:
p{
text-shadow: 3px 3px 5px rgba(255,0,0,0.5);
}