JavaSe基础XX24——CSS-CSDN博客

本文链接：https://blog.csdn.net/lovewaterman/article/details/39379159

*01-CSS(概述&和html结合的方式一二)

*02-CSS(和html结合的方式三四)

*03-CSS(基本选择器&优先级)

*04-CSS(关联选择器&组合选择器)

*05-CSS(伪元素选择器_1)

*06-CSS(伪元素选择器_2)

---------------小结--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<!--link rel="stylesheet" href="1.css" type="text/css" /-->

<style type="text/css">
/*@import url(1.css);

div{
		background-color:#09F;
		color:#FFF;
}
.haha{
	background-color:#FF3;
	color:#0C0;
}*/
/*预定样式，实现动态的加载。
.hehe{
	background-color:#C93;
	color:#00F;
}*/
/*
#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
	background-color:#000;
	color:#FFF;
}
*//*
span b{关联选择器 选择器中的选择器
	background-color:#09F;
	color:#FFF;
}
*/

/*组合选择器*/
/*
.haha,div b{对多种选择器进行相同样式定义
	background-color:#000;
	color:#C00;
}
*/
/*
伪元素

超链接的状态。

*/

/*未访问*/
a:link{
	background-color:#06F;
	color:#FFF;
	text-decoration:none;
	font-size:18px;
}


/*
鼠标悬停
*/
a:hover{
	background-color:#FFF;
	color:#F00;
	font-size:24px;
}


/*点击效果*/
a:active{
	background-color:#000;
	color:#FFF;
	font-size:36px;
}

/*访问后效果*/

a:visited{
		background-color:#FF9;
		color:#000;
		text-decoration:line-through;
}


p:first-letter{
		font-size:36px;
		color:#F00;
}

div:hover{
		background-color:#F00;
		color:#FFF;
}

input:focus{
	background-color:#09F;
}


#qq{
	float:left;
}
/*

L  V  H  A

*/
</style>

</head>

<body>


<input type="text" />
<input type="text" />
<hr />

<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

<hr />

	<!--
    css和html相结合的第一种方式。
    1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。 
    2，使用style标签的方式。 一般都定义在head标签中
    
    
    优先级：
    标签选择器<类选择器<id选择器<style属性
    
    -->

		<div id="qq">这是一个div<b>区域</b>1</div>
		<div class="haha" id="qq">这是一个div区域2</div>
		<span>span<b>区域</b>1</span>
		<span class="haha">span区域2</span>
		<p>这是一个段落1</p>
		<p class="haha">这是一个段落2</p>

</body>
</html>

*07-CSS(CSS样式的结合应用)

*08-CSS(CSS的盒子模型)

*09-CSS(CSS的布局-漂浮)

----------------------小结---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
/*
body{
	margin:0px;
}
*/
div{
	border:#09F solid 1px;
	height:100px;
	width:200px;/**/

}

#div_1{
	/*border-bottom:#F60 2px dashed;*/
	background-color:#F90;
	/*padding:20px 100px 200px 300px;上 右 下 左
	margin:0px;*/
	float:left;
}
#div_2{
	background-color:#0CF;
	float:left;
	
}
#div_3{
	background-color:#3F0;8
	clear:left;/**/
	
}
	
</style>

</head>

<body>

<div id="div_1">
第一个盒子11第一个盒子11
</div>
<div id="div_2">
第二个盒子22
</div>
<div id="div_3">
第三个盒子33
</div>



</body>
</html>

*10-CSS(CSS的布局-定位)

------------小结-------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

div{
	border:#09F solid 1px;
	height:100px;
	width:200px;/**/

}


#div_0{
	background-color:#CCC;
	height:400px;
	width:400px;
	position:relative;
	top:100px;
	left:100px;
}
#div_1{
	
	background-color:#F90;
	position:relative;
	top:20px;
	
	
}
#div_2{
	background-color:#0CF;
	width:220px;

	
}
#div_3{
	background-color:#3F0;8
	
	
}
	
</style>

</head>

<body>
<div id="div_0">

    <div id="div_1">
    第一个盒子11第一个盒子11
    </div>
    <div id="div_2">
    第二个盒子22
    </div>
    <div id="div_3">
    第三个盒子33
    </div>
</div>


</body>
</html>

*11-CSS(CSS的布局-图文混排)

、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

#imgtext{
		border:#06F dashed 1px;
		width:180px;
}
#img{
		float:right;
}
#text{
		color:#F60;
		font-family:"华文隶书";
}
</style>

</head>

<body>

<div id="imgtext">
    <div id="img">
    	<img src="9.bmp" />
    </div>
    <div id="text">
    	这是一个美女，说明文字。
    	一切尽在不言中。哇
        ！这是一个美女，说明文字。
    	一切尽在不言中。哇！
        这是一个美女，说明文字。
    	一切尽在不言中。哇！
    </div>
</div>
</body>
</html>

*12-CSS(CSS的布局-图像签名)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

#text{
		font-family:"华文隶书";
		font-size:24px;
		
		position:absolute;
		top:80px;
		left:10px;
}


#imgtext{
		border:#F60 dotted 1px;
		width:500px;
		position:absolute;
		top:100px;
}
</style>

</head>

<body>

<div id="imgtext">
<div id="img">
<img src="1.jpg" height="300" width="500" />
</div>
<div id="text">
花丛中的美女，我的！
</div>
</div>
</body>
</html>