- A+
所属分类：Web前端
JavaWeb-CSS
部分图片不能提取
具体的编写规则可以参考样式表中文手册（网上可以直接下载）
CSS:层叠式样式表，决定页面的美观程度
CSS语法
基础语法
<!-- 1.CSS最基本的分类：标签样式表，类样式表，ID样式表 2.CSS从位置位置上的分类：嵌入式样式表，内部式样式表，外部时样式表 --> 代码实例
- html中的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS语法</title> <!--内部样式表--> <style type="text/css"> /*被style包围的是CSS环境，可以写CSS代码*/ /*标签样式表*/ p{ /*p是标签名称*/ color:red; } /*类样式*/ .f20{ font-size:20px; } </style> <!--引用外部的CSS样式表文件--> <link rel="stylesheet" href="CSS/Demo01.css"> </head> <body> <p>这里是段落一</p> <p>这里是段落二</p> <p class="f20">这里是段落三</p> <p id="bg">这里是段落四</p> <div> <p><span>hello</span></p> <span class="f32">world</span> <p class="f32">!!!</p> </div> </body> </html> - CSS中的代码
/*ID样式,id尽量唯一*/ #bg{ background-color:yellow; font-size:24px; font-weight:bolder; font-style:italic; font-family:"隶书"; } /*组合样式，div内部的p遵循*/ div p{ color:blue; } div .f32{ font-size:30px; font-family:"宋体"; } 代码效果
CSS盒子模型
基础标签
<!-- 盒子模型 1.border：边框 2.margin：间距 3.padding：填充 --> 代码实例
<!DOCTYPE html> <html lang="en"> <!--盒子模型--> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #div1{ width:400px; height:400px; background-color:greenyellow; /*border:边框属性/样式*/ border-width:2px; /*边框粗细*/ border-style:dotted; /*边框样式solid：实线 dotted：点状线...*/ border-color:blue; /*边框颜色*/ /*border:4px double blue*/ 一行就可以实现 } /**/ #div2{ width:200px; height:200px; background-color:darkorange; border-style:solid; /*为了使居中*/ border-color:rgba(0,0,0,0); /*居中，以子图为参考系*/ margin-top:100px; margin-left:100px; /*margin:100px;*/ 一行就可以实现 /*padding-top:50px; 填充：div2为参考系 padding-left:50px;*/ } #div3{ width:100px; height:100px; background-color:aquamarine; margin-top:50px; margin-left:50px; } body{ 消除初始的边距 margin:0; padding:0; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html> 代码效果
CSS布局
基础标签
<!-- position:absolute(绝对定位)：需要给出初始的坐标 left，top relative(相对定位)：一般和float，margin，padding一起使用 --> 代码实例
html的版本不同效果可能不同
<!--<!DOCTYPE html>--> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局</title> <style type="text/CSS"> body{ 边缘无填充 margin:0; padding:0; } #div1{ width:200px; height:50px; background-color:greenyellow; /*绝对定位，对于页面*/ position:absolute; left:100px; /*向右移动100px*/ top:100px; /*向下移动100px*/ } #div2{ width:200px; height:50px; background-color:pink; /*相对定位,相对于父容器（body）*/ position:relative; float:right; margin-right:50px; } #div3{ background-color:darkorange; } #div4{ width:200px; height:50px; background-color:red; } #div5{ width:200px; height:50px; background-color:blue; } div{ position:relative; } </style> </head> <body> <!-- <div id="div1"> </div> <div id="div2"> </div>--> <div id="div3"> <div id="div4"> </div> <div id="div5"> </div> </div> </body> </html> 代码效果
<!--<!DOCTYPE html>--> <html lang="en"> <!--布局2--> <head> <meta charset="UTF-8"> <title>一个小页面</title> <style type="text/css"> body{ margin:0 边缘无填充 padding:0; } #div_top{ height:20%; 占高20% background-color:orange; } #div_left{ height:80%; width:20%; 占左边20% background-color:greenyellow; float:left; } #div_main{ height:65%; width:80% background-color:whitesmoke; } #div_bottom{ height:15%; width:80%; background-color:sandybrown; margin-left:20%; } #div_container{ width:80%; height:100%: border-width:1px; 边框 border-style:dotted; border-color:blue; margin-left:10%; float:left; } div{ position:relative; } </style> </head> <body> <div id="div_container"> <div id="div_top">div_top</div> <div id="div_left">div_left</div> <div id="div_main">div_main</div> <div id="div_bottom">div_bottom</div> </div> </body> </html> 代码效果
CSS水果静态页面的实现
CSS中的代码
body{ margin:0 无填充 padding:0; background-color:#808080; 背景色 } #div_container{ 大框架 width:80%; height:100%: border-width:1px; border-style:dotted; border-color:blue; float:left; margin-left:10%; background-color:honeydew; border-radius:8px; 边缘变圆 } div{ position:relative; float:left; } #div_fruit_list{ 水果图的框架 width:100%; border-style:double; border-width:1px; border-color:red; } #tbl_fruit{ 水果图的构造 width:60%; border-collapse:collapse; 表格间无填充 text-align:center; 居中 line-height:30px; 行高 font-size:20px; 字体大小 margin-top:120px; margin-bottom:120px; margin-left:20%; } #tbi_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{ 水果各行、列的构造 border-width:2px; border-style:solid; border-color:gray; } .w20{ 占据的空间 width:20%; } .photo{ 修饰图片 width:24px; height:24px; } html中的代码
<!--<!DOCTYPE html>--> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态水果页面</title> <link rel="stylesheet" href="CSS/Demo05.css"> 引用外部文件 </head> <body> <div id="div_container"> <div id="div_fruit_list"> <table id="tbl_fruit"> <tr> <th colspan="5">静态水果页面</th> </tr> <tr> <th class="w20">名称</th> <th class="w20">单价</th> <th class="w20">数量</th> <th class="w20">小计</th> <th>操作</th> </tr> <tr> <td class="w20">苹果</td> <td>5</td> <td>20</td> <td>100</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-CSS的基础" class="photo"></td> <!--图片修饰1--> </tr> <tr> <td class="w20">西瓜</td> <td>3</td> <td>20</td> <td>60</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-CSS的基础" width="24px" height="24px"></td> <!--图片修饰2--> </tr> <tr> <td class="w20">菠萝</td> <td>4</td> <td>25</td> <td>100</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-CSS的基础" width="24px" height="24px"></td> </tr> <tr> <td>榴莲</td> <td>3</td> <td>30</td> <td>90</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-CSS的基础" width="24px" height="24px"></td> </tr> <tr> <td>总计</td> <td colspan="4">999</td> </tr> </table> </div> </div> </body> </html> 
