内部样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> body{ background-color: silver; } //内部样式 input{background-color: yellow; font-size: 12px; } //设置input的内部样式 #div1{background: green;width: 90%;height: 20%;} //id为div1的，前面加# .xm{ background-color: red; font-size: 16px; } //class为xm,前面加. input.xh{background-color: blue; } //是input且class 是xh的 } } </style> </head> <body> Welcome <br> <input type="text" class="xm"> <br> <input type="text" style=" 100px; font-size: 1.2em" name=""> <p class="xh"> Hello world </p> </body> </html>
内部样式层次结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> #main input {background-color: yellow; font-size: 12px; } .extend input { background-color: cyan; font-size: 12px; } </style> </head> <body> Welcome <br> <div id="main"> 学号: <input type="text"> <br> </div> <div class="extend"> 姓名: <input type="text"> <br> </div> </body> </html>
布局样例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> div#container{ width:500px } div#header { background-color:cyan; } div#menu { background-color:#ff9; height:200px; width:100px; float:left; } div#content { background-color:#eee; height:200px; width:400px; float:left; } div#footer { background-color:#9bb; clear:both; text-align:center; } h1 { margin-bottom:0; } h2 { margin-bottom:10; font-size:14px; } ul { margin:1; } li { list-style:none; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright 2000-2014</div> </div> </body> </html>
选择器
@charset='utf-8'; /*ol li{color: red;border: 2px solid;}*/ /*后代选择器*/ /*ol>li{border: 2px solid}*/ /*子代选择器*/ /*h2+p{color:cyan} */ /*紧贴的元素*/ h2~p{color: yellow} /*之后所有兄弟元素*/
颜色设置
@charset='utf-8'; /*#div1{background-color: blue}*/ /*用英文*/ #div2{background-color: #ff0000} /*16进制，每两位分别是红绿蓝*/ /*#div3{background-color: rgba(0,0,255,0.5);}*/ /*rgb,rgba模式增加了透明度,范围是0~255，透明度是0.0~1.0*/ /*#div3{background-color: hsl(0,50%,50%);}*/ /*颜色(0红120绿240蓝)，饱和度，亮度模式*/ #div3{background-color: hsla(0,50%,50%,0.5)} /*增加了透明度*/
字体设置
#div1{font-size: 50px; /*大小*/ font-style: italic; /*斜体*/ font-weight: 100; /*粗细*/ font-family: 楷体} /*字体*/
设置文本属性
p{ width:100%; font-size: 50px; text-align: left; /*还有right,center,justify(两端对齐)*/ line-height: 100px; /*行高*/ text-indent: 2em; /*设置首行缩进，em相当于百分比,也可用像素*/ text-decoration: line-through;/*装饰,穿过文本的一条线，underline是下划线，none什么也没有，overline上划线*/ letter-spacing: 10px;/*字符间距*/ word-spacing: 10px; /*字或单词间距*/ text-shadow: 5px 5px 5px green;/*偏移x,y,透明度，颜色*/ white-space: normal;/*pre是保留空白，nowrap不会换行，除非遇到<br>,pre-wrap保留空白，正常进行换行，pre-line合并空白*/ direction: ltr;/*文本方向,ltr从左到右，rtl从右到左*/ }
内外边距，边框，溢出
div{ /*内边距*/ /*padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;*/ /*padding: 10px; 四边 padding: 10px 20px; 上下 左右 padding: 10px 20px 10px;上 左右 下 padding: 10px 20px 10px 20px; 上 右 下 左*/ border-width: 5px; /*边宽*/ border-style: solid; /*边的样式，solid是实线,dotted是点状边框,double是双线*/ border-color: blue; /*颜色*/ /*外边距 跟内边距使用类似*/ /*margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin: 10px; margin: 10px 20px; margin: 10px 20px 10px; margin: 10px 20px 10px 20px;*/ overflow: visible;/*溢出处理不裁剪,hidden裁剪，scroll提供滚动机制,auto如果溢出，则提供滚动机制*/ overflow-x: visible;/*上下*/ overflow-y: visible;/*左右*/ }
定位
#div1{ position: relative;/*相对定位，absolute是绝对定位， fixed也是绝对定位，相对于窗口*/ left: 50px; /*定位要结合left,right,top,botton使用*/ z-index: 1;/*堆叠顺序,后面的数字代表顺序*/ }
边框填充图片
#div1{ border-image-source: url(./东京食尸鬼.jpg); /*图片的源*/ border-image-slice: 30; /*分割方式*/ border-image-width: 20px;/*宽度*/ border-image-outset: 40px;/*边框扩展*/ border-image-repeat: stretch;/*边框平铺方式:stretch拉伸,repeat重复铺满,round重复铺满并对图片进行调整*/ }