`

CSS总结

    博客分类：
  • CSS
 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.内部样式:在style元素内写的样式 -->
<style>
	/*选择所有的h2，声明它们的样式。*/
	h2{
		color:blue;
	}
</style>
<!-- 3.外部样式 :在独立的CSS文件中写样式，并将其引入到当前网页中。-->
<link rel="stylesheet" href="my.css"/>
</head>
<body>
	<!-- 内联样式:在元素的style属性中直接写样式。 -->
	<h1 style="color:red;">CSS</h1>
	<h2>CSS的使用方式</h2>
	<p>1.内联样式</p>
	<p>2.内部样式</p>
	<p>3.外部样式</p>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	/*1.继承性:子元素可以继承父元素的样式。
	字体、颜色可以继承。其他不可以*/
	body{
		font-family:
		"微软雅黑","文泉驿正黑","黑体";
	}
	/*2.层叠性:先后给一个元素增加不同的声明时，它们的效果会叠加在一起。*/
	h1{
		color:red;
	}
	/*...*/
	h1{
		font-size:50px;
	}
	/*3.优先级:先后多次给一个元素增加相同的声明，效果以后者为准(就近原则)。*/
	h2{
		color:green;
	}
	/*...*/
	h2{
		color:yellow;
	}
</style>
</head>
<body>
	<h1>苍老师</h1>
	<h2>范传奇</h2>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	/*1.类选择器:根据class选择一批元素。*/
	.female{
		color:pink;
	}
	/*2.id选择器:根据id选择唯一的元素。*/
	#p4{
		color:blue;
	}
	/*3.选择器组:写出一组选择器，可以选中每个选择器所对应的目标的并集。*/
	.female,#p4{
		font-weight: bold;
	}
	/*4.派生选择器*/
	/*4.1选择某元素下满足条件的子孙*/
	#p5 b{
		font-size: 30px;
	}
	/*4.2选择某元素下满足条件的儿子*/
	#p5>b{
		color: red;
	}
	/*5.伪类选择器:根据元素的状态选择在这个状态下的*/
	/*5.1选择未访问过的超链接*/
	a:link{
		color:green;
	}
	/*5.2选择已访问过的超链接*/
	a:visited{
		color:red;
	}
	/*5.3选择激活态(正在点)的按钮*/
	#b1:ACTIVE{
		background-color:yellow;
	}
	/*5.4选择有焦点(闪烁的光标)的文本框*/
	#t1:FOCUS{
		background-color:green;
	}
	/*5.5选择鼠标悬停的图片*/
	img:hover{
		width:250px;
		height:250px;
	}
</style>
</head>
<body>
	<p class="female">苍老师</p>
	<p>王老师</p>
	<p class="female">吉泽老师</p>
	<p id="p4">赵老师</p>
	<p id="p5">北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
	<p>
		<a href="http://www.baidu.cn">百度</a>
		<a href="http://www.xb.cn">瞎编</a>
	</p>
	<p>
		<input type="button" value="百度一下" id="b1"/>
	</p>
	<p>
		<input type="text" id="t1"/>
	</p>
	<p>
		<img src="../images/01.jpg"/>
	</p>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	/*1.单个边设置边框
		left/right/top/bottom*/
	h1{
		border-left:10px solid blue;
	}
	/*2.四个边一起设置边框*/
	p{
		border:1px dashed red;
	}
	/*3.内容溢出时的处理:
	默认不会溢出，因为p的高度会自适应，
	即内容越多它就越高。只有给它设置了
	固定的高度时它才会可能溢出。*/
	p{
		width:400px;
		height:50px;
		overflow: auto;
	}
</style>
</head>
<body>
	<h1>苍老师</h1>
	<p>
		优秀的电影演员。
		同时他也是一名摄影爱好者，
		他拍的片都很么么哒。他最擅长
		捕捉肉体和灵魂的契合点，可以
		折射出对人性的思考与鞭挞!
	</p>
</body>
</html>

 

分享到：
| HTML总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics