Newer
Older
Program-Storage / css-teaching / css.css
h1, h3{
	padding: 0.5em;
	color: #494949;
	background: aliceblue;
	border-left: solid 5px blue;
}
h2, h4{
	padding: 0.5em;
	color: #494949;
	background: #f5deb3;
	border-left: solid 5px orange;
}

.red{
	border-bottom: solid 3px red;
}
.blue{
	border-bottom: solid 3px blue;
}
.green{
	border-bottom: solid 3px green;
}
.orange{
	border-bottom: solid 3px orange;
}
.yellow{
	border-bottom: solid 3px #ffd900;
}
.red2{
	color: red;
}
.blue2{
	color: blue;
}
.green2{
	color: green;
}
.orange2{
	color: orange;
}
.yellow2{
	color: #ffd900;
}
.sans-serif{
	font-size:1.5em;
	font-family:sans-serif;
}
.serif{
	font-size:1.5em;
	font-family:serif;
}
.monospace{
	font-size:1.5em;
	font-family:monospace;
}
.cursive{
	font-size:1.5em;
	font-family:cursive;
}
.fantasy{
	font-size:1.5em;
	font-family:fantasy;
}
.im-sa{
	font-size:2em;
	font-family:'Impact', sans-serif;
}
.im-se{
	font-size:2em;
	font-family:'Impact'
}
table{
	position: relative;
}
.solid{
	border: solid 3px red;
}
.double{
	border: double 3px red;
}
.dashed{
	border: dashed 3px red;
}
.dotted{
	border: dotted 3px red;
}
.border-top{
	border-top: solid 3px red;
}
.border-right{
	border-right: solid 3px red;
}
.border-bottom{
	border-bottom: solid 3px red;
}
.border-left{
	border-left: solid 3px red;
}
.st-so{
	border-style: solid;
	border-color: red;
}
.joge-sayu{
	border-style: solid double;
	border-color: red;
}
.ue-sayu-sita{
	border-style: solid double dashed;
	border-color: red;
}
.ue-migi-sita-hidari{
	border-style: solid double dashed dotted;
	border-color: red;
}
.all-width{
	border-style:solid;
	border-width: 7px;
	border-color: red;
}
.joge-sayu-width{
	border-style: solid;
	border-width: 7px 5px;
	border-color: red;
}
.ue-sayu-sita-width{
	border-style: solid;
	border-width: 7px 5px 3px;
	border-color: red;
}
.ue-migi-sita-hidari-width{
	border-style: solid;
	border-width: 7px 5px 3px 1px;
	border-color: red;
}
.blue-only{
	border-style: solid;
	border-color: blue;
	border-width: 3px;
}
.blue-red{
	border-style: solid;
	border-color: blue red;
	border-width: 3px;
}
.blue-red-green{
	border-style: solid;
	border-color: blue red green;
	border-width: 3px;
}
.blue-red-green-yellow{
	border-style: solid;
	border-color: blue red green #ffd900;
	border-width: 3px;
}
.border-radius{
	border-style: solid;
	border-color: red;
	border-width: 3px;
	border-radius: 5px;
}
.border-circle{
	border-style: solid;
	border-color: red;
	border-width: 3px;
	border-radius: 50%;
}
.o-visible{
	width: 170px;
	height: 85px;
	border: solid 2px black;
	overflow: visible;
}
.o-hidden{
	width: 170px;
	height: 85px;
	border: solid 2px black;
	overflow: hidden;
}
.o-scroll{
	width: 175px;
	height: 95px;
	border: solid 2px black;
	overflow: scroll;
}
.o-auto{
	width: 175px;
	height: 95px;
	border: solid 2px black;
	overflow: auto;
}
.x-h-y-s{
	width: 80%;
	height: 95px;
	border: solid 2px black;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}
.code-box{
	position: relative;
	margin: 2em 0;
        padding: 0.5em 1em;
        border: solid 3px #95ccff;
        border-radius: 8px
}
.code-box .box-title{
	position: absolute;
        display: inline-block;
        top: -13px;
        left: 10px;
        padding: 0 9px;
        line-height: 1;
        font-size: 19px;
        background: #FFF;
        color: #95ccff;
        font-weight: bold;
}