CSS

最新推荐文章于 2024-11-06 18:49:14 发布

pre_eminent

最新推荐文章于 2024-11-06 18:49:14 发布

阅读量901

点赞数

CC 4.0 BY-SA版权

分类专栏： # 待整理HTML 文章标签： css

本文链接：https://blog.youkuaiyun.com/pre_eminent/article/details/14448447

待整理HTML 专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨了CSS与HTML结合的四种方式，并详细解释了CSS选择器的使用方法，包括类选择器、ID选择器及扩展选择器。同时，文章展示了HTML中的样式优先级排序，以及CSS在HTML中的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="2.css" type="text/css" media="screen"/>
	<style type="text/css">
		span{
			color:#000000;
			background: #ffffff;
		}
		body{
			background: #C7EDCC;
		}
		@import url("1.css");
		.class_1{
			font-family: Garamond;
			color: #FF0000;
		}
		.class_2{
		/*这个虽然没有使用，但可作为预定义样式，实现动态加载效果*/
		text-decoration: line-through;
		color: #FFFF00;
		}
		div#div_id_1{
			font-size: x-large;
		}
		div p{
			font-size: 200%;
		}
		.class_1,div p{
			background-color: #55ff88;
		}
		div,p{
			color:#fff0ff;
		}
		a:link{
			text-decoration:none;
			font-size: 35;
		}
		a:visited{
			font-size: 50;
		}
		a:hover{
			font-size: 10;
		}
		div:hover{
		/*IE不支持*/
			background-color: #FF0000
		}
		p:first-letter{
			color:#0000ff;
			font-size: x-large;
		}
		p:first-line{
			font-size: x-large;
			color:#0000ff;
		}
		input:focus{
			background-color: #0000ff;
		}
	</style>
</head>
<body>
		<h1>CSS与html结合的四种方式</h1>
		<p style="color: #FFFFFF;background: #0000FF">第1种：使用每个标签都具备的style属性，
			  属性值就是CSS代码，属性和属性值用冒号连接
			  每个属性之间用分号分隔
			  若一个属性有多个属性值，就用空格隔开
			  FFFFFF为白色
			  0000FF为蓝色
		</p>
		<span>第2种方式：在头标签里面加入style标签，
			可对单个页面的多个标签统一进行样式设置</span>
		<div>
			第3种方式：在头标签里面
			使用@import url(XXX.css);
			即CSS代码导入的方式
			注意：这种导入样式的无论import语句在上面还是下面,
			优先级都低于页面内HEAD标签里面用style标签定义的CSS代码 
		</div>
		<h3>第4种方式：在头标签里面使用HTML中的link标签进行链接
				 如：<link rel="stylesheet" href="2.css" type="text/css" media="screen"/>
				 注意 ：link方式链接的优先级高于HEAD标签里面用style标签定义的样式
				 更高于使用@import url(XXX.css)导入的样式
		</h3>
		<hr />
		选择器：
		一般有三种：
		第1种：html标签名
		第2种：class选择器，使用的是标签当中的class属性
		第3种：ID选择器，使用的是标签当中的ID属性（要唯一，因为javascript常用到）
		<hr />
		<div class="class_1">这个是类选择器,font-family:Garamond</div>	
		<p class="class_1">这个是P标签中的类名也叫class_1</p>	
		<hr />
		<div id="div_id_1">这个是ID选择器，使用#标识！与类选择器的唯一不同是：唯一性！为以后的
			数据库设计和脚本提供方便！
		</div>
		<hr />优先级从高到低：style属性>id选择器>class选择器>style标签
		另外，link>style标签>import
		<div>
			<p>
		扩展选择器：（目前仍在升级）
		第1种：关联选择器。标签可嵌套，用空格分开，表示XX标签里面的YY标签。
		如：div中的p标签中的a标签
		div p a{
			color:#ff00ff;
		}		
			</p>
		</div>
		第2种：组合选择器。用逗号隔开，表示XX标签和YY标签可用一个样式。
		如：div和p标签都用一个样式
		又比如：类名为class_1的标签和div中的p标签 共用一个样式
		.class_1,div p{
			color:#fff0ff;
		}
		第3种：伪元素选择器。用冒号连接标签和伪元素连接。
		其实是html中预先定义好的选择器。
		如a标签中的link,visited,hover,active(这个不常用)
		点击之后，页面也不能乱七八糟。
		a:link{
			font-size: 35;
		}
		a:visited{
			font-size: 50;
		}
		a:hover{
			font-size: 10;
		}
		又如div标签中的hover（IE不支持）
		<a href="http://www.baidu.dm" target="_blank">要记下LVHA顺序</a>
		<input type="text" /> 具有焦点的元素！
		input:focus{
			background-color: #0000ff;
		}
		p:first-letter{
			color:#0000ff;
			font-size: x-large;
		}
		p:first-line{
			font-size: x-large;
		}
</body>
</html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS演示2</title>
	<style type="text/css">
	table{
		border-top: #FF0000 double 1px;
		border-right: #FF0000 solid 2px;
		border-bottom: #FF0000 dashed 3px;
		border-left: #FF0000 dotted 4px;
	}
	table td{
		border:#0000FF solid 3px;
		padding:20px;
		
	}
	ul{
		list-style-type: circle;
		list-style-type: none;
		list-style-image: url(chm.jpg);
	}
	/*只要是区域都有边界border*/
	div{
		border:#090 dashed 2px;
		height:50;
		width:250;
		padding: 20px;
		color: white;
	}
	input{
		background-color: white;
		color: white;
		border:none;
		border-bottom: #000000 solid 3px;
	}
	body{
	margin:0px;/*使HTML文档紧贴边框，常用！*/
	}
	div#div_1{
		background-color: red;
		float:left;
	}
	div#div_2{
		background-color: green;
		float:left;
	}
	div#div_3{
		background-color: blue;
		clear: both;
	}
	div#div_456{
	position: absolute;/*设置了position属性之后，子结点div_4将会相对于这个父类定位*/
	}
	div#div_4{
		background-color: red;
		position: absolute;/*div_5已经被div_4覆盖在下面去了*/
		position: relative;/*div_4不脱离文档流，div_5会原地不动！*/
		top:10px;
	}
	div#div_5{
		background-color: green;
		width: 300;
	}
	div#div_6{
		background-color: blue;
	}
	</style>
</head>
<body>
	<ul>
		<li>无序列表项1</li>
		<li>无序列表项2</li>
		<li>无序列表项3</li>
	</ul>
<hr />
<dl>
	<dt>定义项目</dt>
	<dd>定义该项目的描述1</dd>
	<dd>定义该项目的描述2</dd>
	<dd>定义该项目的描述3</dd>
</dl>
<hr />
<table>
	<tr>
		<td>单元格1</td>
		<td>单元格2</td>
	</tr>
	<tr>
		<td>单元格3</td>
		<td>单元格4</td>
	</tr>
</table>
<hr />
<div>这是个div它也可以有边界，只要是区域</div>
姓名：<input type="text" />
成绩：<input type="text" />
<table>
	<tr>
		<td>可输入的表格：<input type="text"/></td>
		<td>可输入的表格：<input type="text"/></td>
	</tr>
</table>
<hr />
盒子模型有三个属性：边框border、内边距padding、外边距margin
其中边框border可以分为上下左右top right bottom left
内边距padding、外边距margin都是一样的可以分成上右下左！
注意：
当取内边距1个值时：代表上下左右
当取内边距2个值时：前1个代表上下，后1个代表左右
当取内边距3个值时：代表上右下
当取内边距4个值时：代表上右下左（顺时针方向）

如果设置body的外边距margin:0;那么文档内容就可以紧贴边框了
<hr />
		<div id="div_1">这是演示漂浮float的div_1</div>
		<div id="div_2">这是演示漂浮float的div_2</div>
		<div id="div_3">这是演示漂浮float的div_3</div>
<hr />
漂浮有三个属性值：
	none;这个是默认属性值！不漂浮
	left;文本流向this的右边
	right;文本流向this的左边
清除有4个属性值：
	none;默认属性值！允许有漂浮物
	left;左边不允许有漂浮物
	right;右边不允许有漂浮物
	both;两边都不允许有漂浮物
<hr />
定位：position
有三个属性值：
	static;默认，无特殊定位
	absolute;将对象从文档流中拖出来，如果它的父类对象也设置了position的值
					（static除外），则相对其父类进行定位，否则相对body定位！
	relative;不脱离文档流，不可层叠，在文档中偏离时，其他对象原地不动！
				就是说this占着茅坑！
<hr />
	<div id="div_456" style="border: 0">
		<div id="div_4">这是演示漂浮float的div_4</div>
		<div id="div_5">这是演示漂浮float的div_5</div>
		<div id="div_6">这是演示漂浮float的div_6</div>
	</div>
<hr />

</body>

</html>

两个小练习：图文混排和画中字

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>CSS演示3</title>
	<style type="text/css">
		div#div_imgtext1{
			border:#008ff0 dashed 3px;
		}
		div#div_img1{
			float:left;
			float:right;
		}
	/*下面演示的是画中字*/
	div#div_imgtext2{
			border:#008ff0 dashed 3px;
			width:496;
			height: 175px;
			position: absolute;
			top:400px;
			left:100px;
		}
		div#div_text2{
			position: absolute;
			top:40px;
			left: 10px;
			color: red;
			font-family: "华文隶书";
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="div_imgtext1">
		<div id="div_img1">
			<img src="chm.JPG" />
		</div>
		<div id="div_text1">
		下面开始练习1：实现图文混排！下面开始练习1：实现图文混排！
		When we two parted
									-----George Gordon Byron
<a href="http://f5.hjfile.cn/menu/20120519/2012051953522347_4744.mp3">英文朗读音频下载</a>
		戳这个是英文朗读音频下载：  
		When we two parted
		In silence and tears,
		Half broken-hearted
		To sever for years,
		Pale grew thy cheek and cold,
		Colder thy kiss;
		Truly that hour foretold
		Sorrow to this!
		The dew of the morning  
		Sunk chill on my brow-
		It felt like the warning
		Of what I feel now.
		Thy vows are all broken,
		And light is thy fame:
		I hear thy name spoken,
		And share in its shame.
		They name thee before me,
		A knell to mine ear;
		A shudder comes o'er me-
		Why wert thou so dear?
		They know not I knew thee
		Who knew thee too well:
		long, long shall I rue thee,
		Too deeply to tell.
		In secret we met-
		In silence I grieve,
		That thy heart could forget,
		Thy spirit deceive.
		If I should meet thee
		After ling year,
		How should I greet thee?
		With silence and tears.
		</div>
</div>
<div id="div_imgtext2">
		<div id="div_img2">
			<img src="chm.JPG" />
		</div>
		<div id="div_text2">
			这个演示的是画中字！用到的是position定位值absolute
		</div>
</div>
</body>

</html>