CSS样式详解-CSDN博客

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<div style="background-color:red;color:green">让生活变的更有意义！</div>	<!--行内样式引入-->
	</body>
</html>

2、内嵌样式引入

<html>
	<head>
	
		<title>oneStar</title>
		<style type="text/css">	
			div{
				background-color:blue;
				color:red;
			}
		</style>
	</head>
	<body>
		<div>让生活变的更有价值！</div>	<!--内嵌样式引入-->
	</body>
</html>

3、外部样式引入（style标签里面）

<html>
	<head>
	
		<title>oneStar</title>
		<style type="text/css">
			@import url(p.css)
		</style>
	</head>
	<body>
		<p>让生活变的更有意义！</p>	<!--外部样式引入（style标签里面）-->
	</body>
</html>

<!--p.css文件-->
p{
	background-color:yellow;
	color:black;
}

4、外部样式引入（link标签里面）

<link rel="stylesheet" type="text/css" href="css/style.css"/>    <!--href="引入外部样式文件"-->

<html>
	<head>
		<title>oneStar</title>
		<link rel="stylesheet" type="text/css" href="p.css"/>
	</head>
	<body>
		<p>让生活变的更有意义！</p>	<!--外部样式引入（link标签里面）-->
	</body>
</html>

注：

第三种方法在有些浏览器不能使用，第四种方法最为常用！
优先级：（一般情况）由上到下，由外到内，优先级由低到高，后加载的优先级高

三、css 选择器

1、基本选择器

【1】标签选择器

使用标签名作为选择器

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			p{
				background-color:red
			}
			div{
				background-color:gray
			}
		</style>
	</head>
	<body>
		<p>让生活变的更有意义！</p>	<!--行内样式引入-->
		<div>让生活变的更有价值！</div>	<!--行内样式引入-->
	</body>
</html>

【2】class 选择器

每个 HTML 标签都有属性 class，可以对 class 进行设置

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div.oneStar{
				background-color:red;
			}
			p.oneStar{
				background-color:gray;
			}
		</style>
	</head>
	<body>
		<div class="oneStar">让生活变的更有意义！</div>	<!--行内样式引入-->
		<p class="oneStar">让生活变的更有价值！</p>	<!--行内样式引入-->
	</body>
</html>

【3】id 选择器

每个 HTML 标签都有属性 id，可以对 id进行设置

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div#oneStar{
				background-color:red;
			}
			p#oneStar{
				background-color:yellow;
			}
		</style>
	</head>
	<body>
		<div id="oneStar">让生活变的更有意义！</div>	<!--行内样式引入-->
		<p id="oneStar">让生活变的更有价值！</p>	<!--行内样式引入-->
	</body>
</html>

基本选择器的优先级：style > id 选择器 > class 选择器 > 标签选择器

2、扩展选择器

【1】关联选择器

对嵌套标签里面的样式进行设置

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div p{
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div><p>让生活变的更有意义！</p></div>	<!--行内样式引入-->
		<p>让生活变的更有价值！</p>	<!--行内样式引入-->
	</body>
</html>

【2】组合选择器

把不同的标签设置成相同的样式

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div,p{
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div>让生活变的更有意义！</div>	<!--行内样式引入-->
		<p>让生活变的更有价值！</p>	<!--行内样式引入-->
	</body>
</html>

【3】伪元素选择器

css 里面提供了一些定义好的样式，可以直接使用，以超链接为例，点击超链接有四种状态

原始状态： :link
悬停状态： :hover
点击状态： :active
点击之后的状态： :visited

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			/*原始状态*/
			a:link{
				background-color:red;
			}
			/*悬停状态*/
			a:hover{
				background-color:green;
			}
			/*点击状态*/
			a:active{
				background-color:black;
			}
			/*点击之后的状态*/
			a:visited{
				background-color:white;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_self">生活依然苦涩！</a>
	</body>
</html>

四、css 盒子模型

1、边框

border：2px solid blue; ==>统一设置
border-top：上边
border-bottom：下边
border-left：左边
border-right：右边

2、内边距

padding：统一设置
padding-top：上边
padding-bottom：下边
padding-left：左边
padding-right：右边

3、外边距

margin：统一设置
margin-top：上边
margin-bottom：下边
margin-left：左边
margin-right：右边

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div#oneStar{
				/*边框*/
				border-top:4px solid red;
				border-bottom:4px solid black;
				border-left:4px solid green;
				border-right:4px solid blue;
				
				/*内边距*/
				padding-top:20px;
				padding-bottom:20px;
				padding-left:200px;
				padding-right:20px;
				
				/*外边距*/
				margin-top:200px;
				margin-bottom:200px;
				margin-left:200px;
				margin-right:200px;
			}
		</style>
	</head>
	<body>
		<div id="oneStar">世界很美好！</div>
	</body>
</html>

五、css 布局的定位

基本属性：position，属性值有：

absolute：将对象从文档流中拖出，可以使用 top、left、bottom 进行定位
relative：不会将对象从文档流中拖出，可以使用 top、left、bottom 进行定位

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			#oneStar{
				width:400px;
				height:400px;
				border:4px solid red;
				
				position:absolute;
				top:100px;
				left:100px;
			}
			
			#twoStar{
				width:400px;
				height:400px;
				border:4px solid red;
				
				position:relative;
				top:400px;
				left:400px;
			}
			}
		</style>
	</head>
	<body>
		<div id="oneStar">夜空中最亮的星</div>
		<div id="twoStar">能否听清</div>
	</body>
</html>

六、图文混排案例

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			#oneStar{
				width:1000px;
				height:1000px;
				border:4px solid red;
				
				position:absolute;
				top:100px;
				left:100px;
			}
			
			#twoStar{
				float:left;
			}
			
		</style>
	</head>
	<body>
	<div id="oneStar">
		<div id="twoStar"><img src="09.jpg"></div>
		<div id="threeStar">操作系统中 heap 和 stack 的区别什么是基于注解的切面实现什么是 对象/关系 映射集成模块什么是 Java 
		的反射机制什么是 ACIDS与CS的联系与区别Cookie 和 Session的区别fail-fast 与 fail-safe 机制有什么区别get 和post请求的区别
		Interface 与 abstract 类的区别IOC的优点是什么IO 和 NIO的区别，NIO优点Java 8 / Java 7 为我们提供了什么新功能什么是竞态条
		件？ 举个例子说明。JRE、JDK、JVM 及 JIT 之间有什么不同MVC的各个部分都有那些技术来实现?如何实现?RPC 通信和 RMI 区别什么
		是 Web Service（Web服务）JSWDL开发包的介绍。JAXP、JAXM的解释。SOAP、UDDI,WSDL解释。WEB容器主要有哪些功能? 并请列出一些
		常见的WEB容器名字。一个”.java”源文件中是否可以包含多个类（不是内部类）？有什么限制简单说说你了解的类加载器。是否实现过
		类加载器解释一下什么叫AOP（面向切面编程）请简述 Servlet 的生命周期及其相关的方法请简述一下 Ajax 的原理及实现步骤简单描
		述Struts的主要功能什么是 N 层架构什么是CORBA？用途是什么什么是Java虚拟机？为什么Java被称作是“平台无关的编程语言”什么是
		正则表达式？用途是什么？哪个包使用正则表达式来实现模式匹配什么是懒加载（Lazy Loading）什么是尾递归，为什么需要尾递归什么
		是控制反转（Inversion of Control）与依赖注入（Dependency Injection）Thread的 start方法只能启动一次，启动多次会出现异常，那
		么线程池是怎么实现复用Thread的</div>
	</div>
	</body>
</html>