常用cssスタイル(1)

2273 ワード

一般的なテキストスタイル:
    #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>