JavaWeb——CSS

樱子小朋友

已于 2023-06-14 16:29:51 修改

阅读量49

点赞数

分类专栏： JavaWeb 文章标签： css html 前端 java

于 2023-06-14 16:26:55 首次发布

本文链接：https://blog.csdn.net/m0_68326039/article/details/131210552

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1）CSS的角色：页面显示的美观风格
2）CSS的基础语法：标签样式、类样式、ID样式、组合样式、嵌入式样式表、内部样式表、外表样式表；
3）盒子模型：border、margin、padding；
4）定位和浮动：position、float、DIV+CSS布局

<html>
	<head>
		<meta charset="utf-8">
        <style type="text/css">
		/* 被style标签包围的范围是CSS环境，可以写CSS代码 */
            /*标签样式*/
            p{
                color:red;
            }
            /*类样式*/
            .f20{
                font-size:20px;
            }
            /*ID样式*/
            #p4{
                background-color:pink;
            	font-size:24px;
	            font-weight:bolder;
            	font-style:italic;
            	font-family:"华文彩云";
            }
            /*组合样式*/
            div p{
                color:blue;
            }
            div .f32{
	            font-size:32px;
	            font-family:"黑体";
            }
        </style>
    </head>
    <body>
        <p>这是段落一</p>
        <p class="f20">这是段落三</p>
        <p id="p4">这是段落四</p><!--id属性在整个HTML文档中，尽量保持唯一-->
        <div>
            <!--嵌入式样式表-->
            <p><span style="font-size:60px;color:yellow;">HELLO</span></p>
            <span class="f32">World</span>
            <p class="f32">!!!!!</p>
        </div>
    </body>
</html>

<!--
<style> 内部样式表   体内注解：/*....*/
    CSS的最基本的分类: 标签样式表、类样式表、ID样式表
    CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表

引用外部样式表

/*标签样式*/
p{
  color:red;
}
/*类样式*/
.f20{
  font-size:20px;
}
/*ID样式*/
#p4{
  background-color:pink;
  font-size:24px;
  font-weight:bolder;
  font-style:italic;
  font-family:"华文彩云";
}
/*组合样式*/
div p{
  color:blue;
}
div .f32{
  font-size:32px;
  font-family:"黑体";
}

<html>
	<head>
		<meta charset="utf-8">
    <!-- 引用外部的CSS样式表文件 -->
    <link rel="stylesheet" href="css/demo01.css">
  </head>
    <body>
        <p>这是段落一</p>
        <p class="f20">这是段落三</p>
        <p id="p4">这是段落四</p><!--id属性在整个HTML文档中，尽量保持唯一-->
        <div>
            <!--嵌入式样式表-->
            <p><span style="font-size:60px;color:yellow;">HELLO</span></p>
            <span class="f32">World</span>
            <p class="f32">!!!!!</p>
        </div>
    </body>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
				margin:0;
				padding:0;
			}
			#div1{
				width:200px;
				height:50px;
				background-color:greenyellow;
				/* 绝对定位 */
				position:absolute;
				left:100px;
				top:100px;
			}

			#div2{
				width:200px;
				height:50px;
				background-color:pink;

				position:relative;
				float:left;
				margin-left:20px;
			}
			#div3{
				height:50px;
				background-color:darkorange;
			}
			#div4{
				width:200px;
				height:50px;
				background-color:aqua;

				float:left;
			}
			#div5{
				width:200px;
				height:50px;
				background-color:olivedrab;

				float:left;
			}
			div{
				position:relative;
			}
		</style>
	</head>
	<body>
		<!--
		<div id="div1">&nbsp;</div>
		<div id="div2">&nbsp;</div>
		-->
		<div id="div3">
			<div id="div4">&nbsp;</div>
			<div id="div5">&nbsp;</div>
		</div>
	</body>
</html>

<!--
position: absolute -- 绝对定位 , 需要配合使用 left , top
		      relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
float 
-->

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                margin:0;
                padding:0;
                background-color:#808080;
            }
            div{
                position:relative; /*div全是相对布局*/
            }
            #div_top{
				background-color: orange;
				height:20%;
			}
			#div_left{
				background-color: greenyellow;
				height:80%;
				width:15%;
				float:left;
			}
			#div_main{
				background-color: whitesmoke;
				height:70%;
				float:left;
				width:85%;
			}
			#div_bottom{
				background-color: sandybrown;
				height:10%;
				width:85%;
				float:left;
			}
			#div_container{
                width:80%;
				height:100%;
				border:0px solid blue;
				margin-left:10%;
				float:left;
            }
        </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>

樱子小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——CSS

2）CSS的基础语法：标签样式、类样式、ID样式、组合样式、嵌入式样式表、内部样式表、外表样式表；/* 被style标签包围的范围是CSS环境，可以写CSS代码 */4）定位和浮动：position、float、DIV+CSS布局。3）盒子模型：border、margin、padding；1）CSS的角色：页面显示的美观风格。/* 绝对定位 */
复制链接

扫一扫