（三）JavaWeb学习之----CSS篇基础学习

岚苼

已于 2022-12-28 17:40:12 修改

阅读量91

点赞数

分类专栏： HTML 文章标签： css 学习 css3

于 2022-12-20 19:48:49 首次发布

本文链接：https://blog.csdn.net/qq_56910237/article/details/128374364

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

CSS基础语法
CSS-盒子模型
- 代码演示
CSS-CSS布局
CSS-水果库存静态页面实现
- 代码演示：
- - html代码：

CSS基础语法

CSS的基本分类：标签样式表，类样式表，ID样式表
CSS位置上的分类：嵌入式样式表，内部样式表，外部样式表
HTML文件代码如：

<html>
<head>
<title>css基础</title>
<style>
/*<!--标签样式表-->*/
p/*<!--标签名字-->*/{
color:red;
}
/*<!--class类样式-->*/
.f20{
font-size:20px
}
/*<!--id样式-->*/
</style>
<link rel="stylesheet" href="D:\JavaWeb学习\demo.css">
</head>

<body>
<p>巴哈身边的环境撒</p>
<p class="f20">后就开始的会计师</p>
<p id="p4">表示吃惊的不是点击保存参数</p>
<div>
<p><span>九十年代近段时间</span></p>
<p class="f32"><span>互动式江苏省境内的就是撒旦</span></p>
<!--内部样式表-->
<p><span style="font-size:60px;font-weight:bolder;font-style:italic;font-family:"华文彩云";">伟大伟大你就开始疯狂的就是你参加党课</span></p>
</div>
</body>
</html>

CSS文件代码：

#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
/*组合样式表*/
div .f32{
background-color:pink;
font-size:32px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}

在css写出样式，在html文件中引用，利用如<link rel="stylesheet" href="D:\JavaWeb学习\demo.css">，rel为固定写法，href为css文件的路径。

CSS-盒子模型

1.border 边框
2.margin 间距
3.padding 填充

代码演示

<html>
<head>
<title>css基础</title>
<style type="text/css">
#div1{
width:400px;
height:400px;
background-color:"greenyellow";
/* boder 边框样式 */
/*1.border-width:4px;  /* 边框像素：边框像素*/
/*2.border-style:dotted;  /*边框样式 solid(实线)，dotted(点状线)*/
/*3.border-color:red;

*/
/*border:4px double blue/*可以将以上边框样式表123合并*/

/*分别设置各个边框top,bottom(底部)，*/
border-top:4px double blue;
}
#div3{
width:100px;
height:100px;
background-color:"aquamarine";
margin-top:50px;
margin-left:50px;
}
#div2{
width:200px;
height:200px;
background-color:"darkorange";
/*指上下距边框100
margin-top:100px;
margin-left:100px;
*/
/*合并，指上下左右各100px*/
margin:100px;
/*padding:填充*/
padding-top:50px;
padding-left:50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">&nbsp;</div>
</div>
</div>
</body>
</html>
<!--IE浏览器实际尺寸=width
谷歌浏览器实际尺寸=width+左右border
-->

CSS-CSS布局

1.position``:absolute–绝对路径，需要配合left,top(margin-left,margin-top)
relative--相对路径,一般和float,margin,padding…一起使用

<html>
<head>
<meta charset="GBK">
<style type="text/css">
          /*紧贴，无间距*/
        body{
		margin:0;
		padding:0;
		}
		/*全部都是相对布局*/
		div{
		position:relative;
		}

        #div_top{
		background-color:orange;
		height:20%;
		}
        #div_left{
		background-color:greenyellow;
		height:80%;
		width:15%;
		float:left;
		}
        #div_main{
		background-color:whitesmoke;
		margin-left:15%;
         height:70%;
		}		
        #div_bottom{
		background-color:red;
		margin-left:15%;
		height:30%;
		}


         #div1{
		 width:200px;
		 height:50px;
		 background-color:greenyellow;
		 /*绝对定位*/
		 position:absolute;
		 left:100px;
		 top:100px; 
		 }

		 #div2{
		 width:200px;
		 height:50px;
		 background-color:greenyellow;
		 /*相对定位*/
		 position:relative;
		 /*浮动（相对以前位置浮动）*/
		 float:left;
		 margin-left:20px;
		 }

         #div3{
		 width:200px;
		 height:50px;
		 background-color:yellow;
		 /*相对定位*/
		 position:relative;
		 /*浮动（相对以前位置浮动）*/
		 float:left;
		 margin-left:20px;
		 }
        #div_container{
		 width:80%;
		 height:100%;
		 border:1px solid blue;
		 margin-left:10%;
		 float:left;
		}

</style>
</head>
<body>
     <!--
	 <div id="div1">&nbsp;</div>
	 <div id="div2">&nbsp;</div>
     <div id="div3">&nbsp;</div>
      -->
	  <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-水果库存静态页面实现

代码演示：

html代码：

<html>
<head>
<meta charset="GBK">
<link rel="stylesheet" href="D:\JavaWeb学习\demo1.css">
</head>
<body>
	<div id="div_container">
      <div id="div_fruit_list">
	    <table id="tb1_fruit">
	      <tr>     <!--行-->
		       <th class="w20">名称</th>
			   <th class="w20">单价</th>
		       <th class="w20">数量</th>
		       <th class="w20">小计</th>
		       <th>操作</th>
		  </tr>

		  <tr>
                <td>苹果</td>
				<td>5</td>
			    <td>20</td>
                <td>100</td>
                <td>&nbsp;</td>		      
		  </tr>
		  <tr>
                <td>西瓜</td>
				<td>3</td>
			    <td>20</td>
                <td>60</td>
                <td>&nbsp;</td>		      
		  </tr>
		  <tr>
                <td>菠萝</td>
				<td>6</td>
			    <td>20</td>
                <td>120</td>
                <td>&nbsp;</td>		      
		  </tr>
		  <tr>
                <td>榴莲</td>
				<td>50</td>
			    <td>3</td>
                <td>150</td>
                <td>&nbsp;</td>		      
		  </tr>
		  <tr>
                <td>总计</td>
				<td colspan="4">999</td>
			   	      
		  </tr>
	  </table>
	  </div>
	 </div>
</body>
</html>

#css代码

body{
		margin:0;
		padding:0;
		background-color:#808080;
	}
		/*全部都是相对布局*/
	div{
		position:relative;
		float:left;
	}
    #div_container{
		 width:80%;
		 height:100%;
		 border:0px solid blue;
		 margin-left:10%;
		 float:left;
		 background-color:honeydew;
		}
#tb1_fruit{
	 width:100%;
	 border:1px solid gray;
	 line-height:28px;
	 margin-top:120px;
	 margin-left:20%;
}
#tb1_fruit,#tb1_fruit tr,#tb1_fruit th,#tb1_fruit td{
     border:1px solid gray;
	 border-collapse:collapse;
	 text-align:center;
	 font-size:16px;
	 font-family:"黑体";
	 font-weight:lighter;
	 color:green;
}
#div_fruit_list{
	 width:100%;
}
.w20{
width:20%;
}