<!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="hoge/style.css">
<title>Document</title>
</head>
<body style="margin: 0">
<!--ノーマルスタイル、ボックススタイルの説明用
<div class="normal">ノーマルスタイル</div>
<div class="box">ボックススタイル</div>
<div class="margin">マージン相殺の説明用ブロック</div> -->
<div>私はブロックです</div>
<div>私はブロックです</div>
<div>私はブロックです</div>
<div>私はブロックです</div>
<hr>
<span>私はインラインです</span>
<span>私はインラインです</span>
<span>私はインラインです</span>
<span>私はインラインです</span>
<div class="exmple">ブロックは改行して他の要素を邪魔しない！
ブロック内の<span>インラインです</span>インラインの場合にはマージン、パディング、ボーダーがきたときに他の要素の事は虫します</div>
</body>
</html>
/* h1::after{
content: "!!!!!!!!!";
}
h1::before{
content: "!!!!!!!!!";
}
article h1~p{
color: springgreen
;}
p::first-letter{
color: red;
}
カスケードは優先順位 基本はあとがち
詳細度、タグ クラス ID 優先順位が左程高いが違う
*/
/* .a {
color:palevioletred !important;
}
#title{
color: chocolate;
}
h1{
color: red;
}
h1{
color: black;
} */
/* 継承
li{
color: red;
}
li [href*="yahoo2"]{
color: inherit;
}
li [href*="yahoo3"]{
color: initial;
}
li [href*="yahoo4"]{
color: unset;
} */
/* div{
background-color: orange;
border: 3px solid black;
}
.fix{
all: unset;
} */
.box{
background-color: blanchedalmond;
/*content box*/
width: 200px;
height: 200px;
/*padding box top L bottm R*/
padding:8px 12px 16px 20px;
/*margin box top L bottm R*/
margin:8px 12px 16px 20px;
/* margin-bottom: 20px; */
/* ボーダーボックス */
border-top:10px solid black;
/*paddingとボーダーを抜いて、実際のwihit200を166にしている！ 直観的（すべてに対して使うときもある*/
box-sizing: border-box;
}
/*
.normal{
background-color: red;
}
*/
/*マージン相殺 .margin{
background-color:black;
margin-top: 40px;
} */
/* div, span{
background-color: orange;
width: 100px;
height: 100px;
} */
.exmple{
/* display:inline; インラインをblockに変更することも出来る*/
background-color: pink;
padding: 20px;
}
.exmple span{
display: inline-block;/* 改行されず他を邪魔しない、上書きしないで改行せずまわりをじゃましない*/
margin: 20px;
border: 1px solid black;
padding: 20px;
background-color: lightblue;
}
↧
CSSのまとめ
↧