信息管理创新实践学习周记3

最新推荐文章于 2024-06-17 16:16:53 发布

小六不是路痴

最新推荐文章于 2024-06-17 16:16:53 发布

阅读量61

点赞数 1

文章标签： html css css3

本文链接：https://blog.csdn.net/LCCCCCCHEN/article/details/116302781

版权

第三周学习周记

学习内容

学习内容

本节课学习了有关CSS的基本操作

1.id和class选择器

知识点：
id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#“来定义。例如#para1
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”."号显示。例如.center
注意：ID属性、类名的第一个字符不能使用数字开头，否则在Mozilla/Firefox 浏览器中将不起作用。

内部样式表

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1
			{
				text-align:center;
				color:red;
				font-size: 50px;
			}
			#p2
			{
				text-align: right;
				color: bisque;
				font-size: 30px;
			}
			.left
			{
				text-align:left;
			}
		</style>
	</head>
	<body>
		<h1 class="left">标题在左边</h1>
		<p id="p1">Hello World!</p>
		<p>这个段落不受该样式的影响。</p>
		<p id="p2">Hello World!</p>
		<p class="left">这个段落左对齐。</p> 
	</body>
</html>

展示：
在这里插入图片描述

2.CSS背景和CSS尺寸

代码：

         <style>
			#p1
			{
				text-align:center;
				color:red;
				font-size: 50px;
				background-color: aliceblue;
			}
			#p2
			{
				text-align: right;
				color: bisque;
				font-size: 30px;
				background-color: azure;
			}
			.left
			{
				text-align:left;
			}
			body
			{
				background-image: url("背景.jpg");
			}
		</style>

展示：
在这里插入图片描述

3.文本隐藏

知识点：
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1.hidden {visibility:hidden;}
			h2.hidden {display:none;}
		</style>
	</head>
	<body>
		<h1>这是一个可见标题，隐藏标题不占空间</h1>
		<h1 class="hidden">这是一个隐藏标题</h1>
		<h2>这是一个可见标题，隐藏标题占空间</h2>
		<h2 class="hidden">这是一个隐藏标题</h2>
	</body>
</html>

展示：
在这里插入图片描述

小六不是路痴

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
信息管理创新实践学习周记3

第三周学习周记学习内容1.id和class选择器学习内容本节课学习了有关CSS的基本操作1.id和class选择器知识点：id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#“来定义。例如#para1class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”."号显示。例如.center注意
复制链接

扫一扫