magazine off

How to embed css directly in html

投稿日 : 2018年3月23日(金曜日)

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>

Categories

Recent Posts

iOSでカメラにアクセスする際のInfo.plistの書き方

 iOSでカメラにアクセスする際のInfo.plistの書き方  …

投稿日 : 2017年10月6日(金曜日)

nginx.confファイルを見つける方法 -Linux

  下記の方法で見つかる $ sudo nginx -t nginx…

投稿日 : 2019年11月29日(金曜日)

Swift3でNavigationBarの背景色を変える方法

  override func viewDidLoad() { …

投稿日 : 2017年5月8日(月曜日)

恋愛関係において、常に「別れよう」と言い出す方はチキンです。

 恋愛関係において、常に「別れよう」と言い出す方はチキンです。 -YouTube…

投稿日 : 2020年11月15日(日曜日)