ホーム

How to embed css directly in html

When trying to use css for html, in order to prevent code visibility and bloat if it is normal,
Use html file and css file separately
But, for a bit of decoration and for some other reason
You may want to write css directly in the htm file
This time, we will try two methods and show you how to embed css directly in html

How to make style in html

 

The first method is to create a style in html
It is a method called by body.
css is pre-installed in the style,
You can implement css by specifying css later.
In this way, since reusability of css can be improved
it's recommended

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="ja">
<head>
<title>配色一覧</title>
<style>
p.sample1 {color:black; background:#0055A1;}
p.sample2 {color:black; background:#6D6D6D;}
p.sample3 {color:black; background:#944538;}
p.sample4 {color:black; background:#60A234;}
p.sample5 {color:black; background:#8F5B98;}
p.sample6 {color:black; background:#D8738E;}
p.sample7 {color:black; background:#F35C19;}
p.sample8 {color:black; background:#CC0000;}
p.sample9 {color:black; background:#6D6D6D;}
p.sample10 {color:black; background:#4CADC2;}
</style>
</head>
<body>
<h6>配色一覧</h6>
<p class="sample1">
この色は#0055A1の配色です
</p>
<p class="sample2">
この色は#6D6D6Dの配色です
</p>
<p class="sample3">
この色は#6D6D6Dの配色です
</p>
<p class="sample4">
この色は#6D6D6Dの配色です
</p>
<p class="sample5">
この色は#0055A1の配色です
</p>
<p class="sample6">
この色は#D8738Eの配色です
</p>
<p class="sample7">
この色は#6D6D6Dの配色です
</p>
<p class="sample8">
この色は#6D6D6Dの配色です
</p>
<p class="sample9">
この色は#6D6D6Dの配色です
</p>
<p class="sample10">
この色は#6D6D6Dの配色です
</p>
<section>
<style scoped>
h6 {color:#6D6D6D;}
</style>
</section>
</body>
</html>

How to write directly into div

Next, I write it directly in Div
This method, for example, if you decorate only a little
It is suitable for implementing css with no reusability
It's simple css. Implementation is also embedded in Div
it's simple

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="ja">
<head>
<title>配色一覧</title>
</head>
<body>
<h6>配色一覧</h6>
<div style="background:#0055A1;">この色は#0055A1の配色です</div>
</br>
<div style="background:#6D6D6D;">この色は#6D6D6Dの配色です</div>
</br>
<div style="background:#944538;">この色は#944538の配色です</div>
</br>
<div style="background:#60A234;">この色は#60A234の配色です</div>
</br>
<div style="background:#8F5B98;">この色は#8F5B98の配色です</div>
</br>
<div style="background:#D8738E;">この色は#D8738Eの配色です</div>
</br>
<div style="background:#F35C19;">この色は#F35C19の配色です</div>
</br>
<div style="background:#CC0000;">この色は#CC0000の配色です</div>
</br>
<div style="background:#6D6D6D;">この色は#6D6D6Dの配色です</div>
</br>
<div style="background:#4CADC2;">この色は#4CADC2の配色です</div>
</body>
</html>
Pocket
LinkedIn にシェア

-ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.