CSS-JS

哈哈泡的茶

已于 2022-10-16 09:52:53 修改

阅读量50

点赞数

分类专栏： Java 文章标签： javascript css 前端

于 2022-07-05 20:09:10 首次发布

本文链接：https://blog.csdn.net/weixin_49762650/article/details/125626985

版权

Java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<!-- 内部样式表 -->
		<style type="text/css">
			/*被style标签包围的范围是CSS环境，可以写CSS代码*/

			/*标签样式表*/
			p{
				color:red;	
			}

			/*类样式*/
			.f20{
				font-size:20px;
			}
		</style>
		<!-- 引用外部的CSS样式表文件 -->
		<link rel="stylesheet" href="css/demo01.css">
	</head>
	<body>
		<!--
		<p><font color="red">这里是段落一</font></p>
		<p><font color="red">这里是段落二</font></p>
		-->
		<p>这里是段落一</p>
		<p>这里是段落二</p>
		<p class="f20">这里是段落三</p>
		<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->

		<div>
			<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
			<span class="f32">World</span>
			<p class="f32"><span>!!!</span></p>
		</div>
	</body>
</html>

1. 为什么需要CSS
2. CSS的最基本的分类: 标签样式表、类样式表、ID样式表
3. CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表

<html>
	<head>
		<meta charset="utf-8"> 
		<style type="text/css">
			#div1{
				width:400px;
				height:400px;
				background-color:"greenyellow";

				/* 1. border 边框样式 */
				border-width:1px;		/*边框粗细*/
				border-style:solid;		/*边框样式：solid(实线) , dotted(点状线) ... */
				border-color:blue;		/*边框颜色*/

				/*border:4px double blue;*/
				/*border-top:4px dotted blue;*/
			}

			#div2{
				width:150px;
				height:150px;
				background-color:"darkorange";

				margin-top:100px; 
				margin-left:100px;
				/*margin:100px 100px 50px 150px;*/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */

				/* padding : 填充 */
				padding-top:50px;
				padding-left:50px;
			}

			#div3{
				width:100px;
				height:100px;
				background-color:"aquamarine";

				/*
				margin-top:50px; 
				margin-left:50px;
				*/
				}
		    #div4{
				width:200px;
				height:200px;
				margin-left:100px;
				background-color:greenyellow;
			}
			body{
				margin:0;
				padding:0;
			}
		</style>
		
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">&nbsp;</div>
			</div> 
		</div> 
		<div id="div4">&nbsp;</div>

	</body>
</html>

IE浏览器：实际尺寸 = width
chrome浏览器：实际尺寸= width+左右borderwidth+padding
CSS盒子模型：1.border 边框 2.margin 间距 3.padding 填充

<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:oliverdrab;

				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">
		<script language="javascript">
			//String str = "hello world";

			/*
			var str = "hello world";
			alert(typeof str);
			str = 9999;
			alert(typeof str);
			*/

			
			/*
			var person = new Object();
			person.pid = "p001";
			person.pname="鸠摩智";

			alert(person.pid+"_"+person.pname);
			*/
			
			//java方法
			public String hello(String name){
				return "hello to" + name;
			}

			//js方法
			function hello(num1 , num2 , name){
				if(num1>num2){
					return "hello to" + name ;
				}else{
					alert("HELLO");
				}
			}

		</script>
	</head>
	<body>
		
	</body>
</html>

Javascript : 客户端的一个脚本语言
js是一门弱类型的语言 , 变量的数据类型由后面赋的值的类型决定