学习周记2

最新推荐文章于 2022-10-07 16:16:40 发布

原创最新推荐文章于 2022-10-07 16:16:40 发布 · 129 阅读

CC 4.0 BY-SA版权

HTML布局

div 元素是用于分组 HTML 元素的块级元素。
也可以用 < table > 标签创建布局（较简单）
应用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="350" border="0">
		<tr>
		<td colspan="2" style="background-color:#c0bbff;">
		<h1>人物简介</h1>
		</td>
		</tr>
		
		<tr>
		<td style="background-color:#ffc49d;width:150px;">
		<b>主要信息</b><br>
		姓名：哪吒<br>
		性别：男<br>
		登场作品：《哪吒之魔童降世》<br>
		</td>
		<td style="background-color:#eeeeee;height:200px;">
		<p>我的照片<br>
		<img src="../image/nezha.jpg"width="150"></td>
		</tr>
		
		</table>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

CSS基础

1.CSS语法

CSS规则由选择器和声明构成，声明有一条或多条
选择器为要改变样式的 HTML 元素。
声明由一个属性和一个值组成。
属性是要设置的样式属性，每个属性有一个值。
{属性：值；}
主要：声明要以；结束，要用{}括起来
CSS语法实例与注释实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p/*这里是选择器，选择段落为要改变样式的*/
		{
			color:deeppink;/*这里声明颜色为深粉色*/
			text-align:left;/*这里声明位置为左边*/
		} 
		</style>
	</head>
	<body>
		<p>CSS注释</p>
		<p>注释是用来解释代码的，可以随意编辑，浏览器会忽略。 </p>
		<p>CSS注释以 /* 开始, 以 */ 结束</p>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

CSS id和class选择器

如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。
1.id 选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
注意： ID属性不要以数字开头
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#id1/*这里定义id选择器*/
		{
			color:green;/*这里声明颜色为绿色*/
			text-align:center;/*这里声明位置为中间*/
		} 
		</style>
	</head>
	<body>
		<p id="id1">在段落< p >后加定义的id，以应用id属性</p>
		<p>没有更改段落< p >，不受id选择器影响 </p>
	</body>
</html>

浏览器运行结果
在这里插入图片描述
2.class选择器
class 选择器用于描述一组元素的样式。
注：class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
注意：类名的第一个字符不能使用数字
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.center/*这里定义class选择器*/
		{
			color:blue;/*这里声明颜色为蓝色*/
			text-align:center;/*这里声明位置为中间*/
		} 
		</style>
	</head>
	<body>
		<h1 class="center">可以指定特定的HTML元素使用class</h1>
		<p class="center">如果定义class选择器为p.class</p>
		<p>则只有p class="center"受影响,h1等不受影响</p>
	</body>
</html>