<head>内に配置する </head>
<link rel="stylesheet" href="https://unpkg.com/sanitize.css">
と<link rel="stylesheet"href="./sanitize.css">
の違いは？リンク先の場所:
https://unpkg.com/sanitize.css: CDN (Content Delivery Network) からsanitize.cssを読み込みます。利点と欠点:
./sanitize.css を使用する場合：sanitize.cssダウンロードして
https://unpkg.com/sanitize.css を使用する場合:
使用例
HTml側でインポートする場合（例 style.cssファイルに）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/sanitize.css">
<title>Sanitize.css Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of using sanitize.css.</p>
</body>
</html>
CSS側でインポートする場合（例 sanitize.htmlファイルに）
/* sanitize.cssをインポート */
@import url('https://unpkg.com/sanitize.css');
どちらか一方で sanitize.css をインポートすれば十分です
p{
color: rgb(77, 8, 8);
background-image: url(./bigsity.jpg);
background-color: aqua;
font-weight: bold;
font-size: 16px;
line-height: 2.5;
width: 760px;
padding-left: 10px;
margin-bottom: 30px;
margin-left: 2.4%;
}
divタグはブロックレベル要素上下左右にmagineを当てることが出来る。ただし要素を横に並べられない。
CSSでではインライン要素、ブロックレベル要素は操作できる。 display: inline; ＆ display: block;
spanタグはインライン要素、左右にしかmagineを当てるしかできない、横並びになる。
これは通常の段落要素です,特定の p 要素に適用する。
下記コードでのpタグのCSSを無かったことにできます。
html <p class="no-style"> <p>
css
<style>
/* 特定の p 要素に適用するスタイル */
.no-style {
color: initial;
background-image: none;
background-color: transparent;
font-weight: normal;
font-size: initial;
line-height: normal;
width: auto;
padding-left: 0;
margin-bottom: initial;
margin-left: 0;
}
</style>
display: block;でブロックレベルにかわる
tex
tex
tex
下のコードで各タグの違いとスタイルを視覚的に分かりやすく説明するcssを反映させました
<div class="abc">
text
<ul>
<li>item</li>
</ul>
<span>text</span>
<div>text text</div>
<a href="">link</a>
</div>
<h1 class="headline">headline</h1>
<div class="text">Text</div>
<ul class="list">リストに着色
<li class="list-item">list item</li>
<li class="list-item">list item</li>
<li class="list-item">list item</li>
</ul>
<div class="parent">
<a href="">link</a>
</div>
<div class="sample">
Sample
</div>