HTML之CSS学习
学前预备
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" /> <!-- 外部样式 HTML表单.css中的样式表 p{ font-size:12px; color:red; } 对应<p>标签 --> <link rel="stylesheet" type="text/css" href="HTML表单.css" /> <!-- 内部样式 对应<ol>标签 --> <style type="text/css"> ol{ font-size:12px; color:blue; } </style> </head> <body> <p>测试段落</p> <ol> <li>有序列表标签</li> <li>有序列表标签</li> <li>有序列表标签</li> </ol> <ul style="color:orange;font-size:12px"> <!--行内样式 ';'分割--> <li>无序列表标签</li> <li>无序列表标签</li> <li>无序列表标签</li> </ul> </body> </html>
选择器
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" /> <!-- 外部样式 HTML表单.css中的样式表 p{ font-size:12px; color:red; } 对应<p>标签 --> <link rel="stylesheet" type="text/css" href="HTML表单.css" /> <!-- 内部样式 对应<ol>标签 --> <style type="text/css"> /* ol{ font-size:12px; color:blue; } */ #ol_1{ /*通过id属性来选择样式标签,id属性不可重复，唯一性*/ font-size:12px; color:blue; } .ol_class{ /*通过class属性来选择样式标签,class属性可以重复，为了批量设置样式而生*/ font-size:18px; color:yellow; } /* 交集选择器 例：p.ol_class 并集选择器 例：p,.ol_class 后代选择器 例：ol li 通配选择器 例：* 选择所有元素 */ a:hover{ /*伪选择器，状态选择器*/ background:blue; color:red; } </style> </head> <body> <p>测试段落</p> <ol id="ol_1"> <li>有序列表标签</li> <li>有序列表标签</li> <li>有序列表标签</li> </ol> <p class="ol_class">测试段落</p> <ol class="ol_class"> <li>有序列表标签</li> <li>有序列表标签</li> <li>有序列表标签</li> </ol> <ol> <li>有序列表标签</li> <li>有序列表标签</li> <li>有序列表标签</li> </ol> <ul style="color:orange;font-size:12px"> <!--行内样式 ';'分割--> <li>无序列表标签</li> <li>无序列表标签</li> <li>无序列表标签</li> </ul> <a href="http://www.baidu.com" target="_blank">百度一下</a> </body> </html>
文本样式
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" /> <style type="text/css"> p{ text-indent:2px; /*缩进*/ text-align:right;/*对齐方式*/ text-decoration:underline;/*装饰:文字下划线 默认:none*/ line-height:30px; /*行高*/ word-spacing:5px; /*单词间距（对汉字无效）,默认值:normal*/ letter-spacing:3px; /*字母、中文汉字间距*/ font-family:微软雅黑;/*字体*/ font-style:italic;/*italic:斜体，*/ font-size:20px; font-weight:bold;/*加粗*/ } </style> </head> <body> <p>我是第一个段落<br>I am LiuGuan<br>我是第一个段落</p> </body> </html>
CSS块级元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>页面标题</title> <meta charset="UTF-8" /> <style type="text/css"> form{ background-color:red;/*默认:transparent透明*/ width:500px; background-image:url(image.jpg); background-repeat:no-repeat;/*图片禁止平铺*/ /*坐标background-position 1.:（位置） top left top center top right center left center center center right bottom left bottom center bottom right 2.（百分比） 50% 50% 3.（像素） 250px 250px 4.混用 */ background-position:250px 250px; /*背景关联 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置 */ /*background-attachment:fixed;*/ border:5px solid blue;/*边框实线*/ border:5px dashed orange;/*边框虚线*/ /*单独设置边框*/ border-left:none; /*font-size:20px;*/ /* 后代元素长度大于祖辈元素的大小时的处理办法 overflow: 可能值： visible:默认，内容不会被修剪，会呈现在元素框外； hidden;超出内容会被修剪，直接不显示； scroll:超出时候超出内容会被修剪，浏览器会显示滚动条以便查看其余的内容，不超出也依然显示滚动条； auto:如果内容被超出，则浏览器会显示滚动条以查看其余内容； inherit:规定应该从父元素继承 overflow 属性的值 */ /* 上面的设置只适用于块级元素 非块级元素转块级 display:block;/*使其具有以上特性*/ 非内联元素转内联 display:inline;/*使以上特性失效*/ display:inline-block;/*类似于collectionView*/ */ } div{ height:100px; width:100px; } #div1{ background-color:red; border 2px solid yellow; display:inline-block; } #div2{ background-color:orange; border 2px solid blue; display:inline-block; } #div3{ background-color:red; border 2px solid yellow; display:inline-block; } #div4{ background-color:orange; border 2px solid red; display:inline-block; } #div5{ background-color:yellow; border 2px solid blue; display:inline-block; } </style> </head> <body> <h3>登录界面</h3> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div3</div> <div id="div5">div5</div> </body> </html>
盒模型（设置块元素内外边距的）
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style type="text/css"> #box1{ width:200px; height:200px; background:blue; border:5px solid orange; /*内边距 padding-top:20px; padding:上 右 下 左；（写四个） padding：上下 左右； （写两个） padding：上下左右； （写一个） */ /*外边距 margin:20px 20px 20px 20px; */ } body{ border: 20px solid red; margin:0px;/*设置body外边距为0*/ } </style> </head> <body> <div id="box1"> 我是一个盒子 </div> </body> </html>
浮动
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset=“utf-8”> <style> #div1{ width:200px; height:100px; background:blue; float:left; } #div2{ width:100px; height:50px; background:orange; float:left; } #div3{ width:200px; height:50px; background:black; float:left; } #div4{ width:100px; height:50px; background:cyan; float:left; } /* 浮动的设置方法： float:left; float:right; 禁止浮动设置： clear:both; none:默认值。允许两边都可以有浮动对象。 left:不允许左边有浮动对象； right:不允许右边有浮动对象； both:不允许有浮动对象； */ </style> </head> <body> <div id="div1"> div1 </div> <div id="div2"> div2 </div> <div id="div3"> div3 </div> <div id="div4"> div4 </div> </body> </html>
相对定位与绝对定位
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style type="text/css"> #box1{ width:200px; height:200px; background:blue; border:5px solid orange; position:absolute;/*绝对坐标*/ left:50px; top:50px; } #box2{ width:200px; height:200px; background:red; border:5px solid cyan; position:relative;/*相对坐标*/ left:0px; top:0px; } </style> </head> <body> <div id="box1"> 我是第一个盒子 </div> <div id="box2"> 我是第二个盒子 </div> </body> </html>
