常用cssスタイル(1)
2273 ワード
一般的なテキストスタイル:
擬似クラス:
marginの使用:
marginの使用はお勧めしません.paddingをできるだけ使用することをお勧めします.
#div1 {
height: 100px;
border: 1px solid;
font-family: " ";
/* , */
line-height: 100px;
font-size: 20px;
/*#bb0; */
color: rgb(200, 0, 0);
/* , ( 、 、 ) */
text-align: center;
/* */
text-indent: 2em;
font-weight: bold;
/* */
text-decoration: line-through;
}
a{
text-decoration: none;
}
擬似クラス:
<style type="text/css">
/* , , */
a:link{font-size: 20px;color: blue}
a:visited{color: red}
a:hover{color: yellow}
a:active{font-size: 24px;}
/*a hover*/
div{height: 100px;background-color: red;}
div:hover{background-color: blue}
</style>
marginの使用:
marginの使用はお勧めしません.paddingをできるだけ使用することをお勧めします.
<style type="text/css">
div{border:1px black solid;}
/* :margin : margin-top margin-bottom */
#div1{
height: 100px;
width: 100px;
background-color: red;
margin-bottom: 50px;
}
#div2{
height: 100px;
width: 100px;
background-color: yellow;
margin-top: 50px;
}
/* :margin ( )*/
#div3{
height: 100px;
width: 100px;
background-color: red;
/*padding-left: 20px; */
}
#div4{
height: 50px;
width: 50px;
background-color: yellow;
margin-left: 50px;
}
/* ,margin : margin-top margin-bottom */
#div5{
height: 100px;
width: 100px;
background-color: red;
padding-top: 25px;
/* padding-top padding-bottom */
}
#div6{
height: 50px;
width: 50px;
background-color: yellow;
margin-top: 50px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
<div id="div4"></div>
</div>
<div id="div5">
<div id="div6"></div>
</div>
</body>
</html>