老图搬砖day04.01——CSS

最新推荐文章于 2024-07-19 09:45:00 发布

Mounvo

最新推荐文章于 2024-07-19 09:45:00 发布

阅读量174

点赞数

分类专栏：老图搬砖

本文链接：https://blog.csdn.net/Mounvo/article/details/99435523

版权

老图搬砖专栏收录该内容

12 篇文章 0 订阅

订阅专栏

8月13日
现在是14.48，上午下课又忘记打卡签退了，故生气的设了四个闹铃。现在忘记打卡补条子，以后忘记打卡没全勤。

4（其实是遗留的3） CSS

4.1. CSS课后题
4.2 CSS简介
4.3 使用CSS三种方式
4.4 选择器的分类

4.1 CSS课后题

在这里插入图片描述
因为昨天晚上搬砖摸到了一点点CSS，所以今上午狂妄的我没有听课，毕竟我在赶进度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>带有小图标的登录界面</title>
		<style type="text/css">
			*{     /*    *可以对所有风格进行定义*/
				margin:0;   /*d对div距页面的距离进行定义 */
				padding:0;  /*div和div内的元素的距离 */
			}
			.p1{
				font-family:verdana ;
				color: #0000000;
				font-size: 16px;
			}
			.p2{
				color: #ff6600;
				font-size: 10px;
			}
			
			.div3{
				margin-left: 5%;
				margin-top:5% ;
				width: 208px;
				background-color: #dddddd;
				line-height: 18px;
				padding:10px; 
				
			}
			.input{
				border:1px dashed #00CC00;
				size: a3;
				text-indent:18px;
			}
			.botton{
				background-color: #00CC66;
				border-bottom-color: #009900;
				float: right;
				
			}
			
		</style>
	</head>
	<body>
		<div  class="div3"id="content" >
			<p class="p1">User Login</p>
			<p style="color: #666666;font-size:13px;background-image: url(img/warning.gif);background-repeat: no-repeat;">
				&nbsp;&nbsp;&nbsp;&nbsp;请输入你的用户名和密码
			</p>
			<p class="p1">Username</p>
			<form>
				<p>
					<input class="input" type="text" name="username" style="background-image: url(img/username.gif);background-repeat: no-repeat;"/>
				</p>
				<p class="p1">Password</p>
				<p>
					<input class="input" type="password" name="password" style="background-image: url(img/password.gif);background-repeat: no-repeat;"/>
				</p>
				<p class="p2"><u>Forget Password?</u></p>
				<p>
					<input class="botton" type="submit" value="登录" >
				</p>
			</form>
			<br><br>
		</div>
	</body>
</html>

效果如下：
User Login这个字体不知道为什么看上去和题目给出来的不太一样，本来想加粗一下，但是又不会在内部样式里定义加粗，给的CSS手册和HTML手册到现在都不会查，所以放弃了修改，就这样把作业交了。
啊是加粗or用三级标题，这样的。
在这里插入图片描述
有一个问题，在输入用户名和密码的时候，输入的数字会遮盖到前方的小图标，不知道有什么解决方法呢，上午下课的时候忘记问老师了，等等下午老师讲解的时候看会不会提？

4.2 CSS简介

Cascading Style Sheet 可以比作“网页的衣服”，设置网页中元素的位置，大小，风格等

为什么要使用CSS样式表？

样式可以实现内容和样式的分离，方便团队开发
样式可以进行复用，方便网站后期维护
页面精准控制，实现精美、复杂页面

4.3 使用CSS三种方式

1.行内样式只针对当前一个元素

写在HTML标签中 style=“样式规则;"

<p style="color: #666666;font-size:13px;background-image: url(img/warning.gif);background-repeat: no-repeat;">

2.内部样式针对当前网页中多个元素

写在head中

<style type="text/css">
			*{     /*    *可以对所有风格进行定义*/
				margin:0;   /*d对div距页面的距离进行定义 */
				padding:0;  /*div和div内的元素的距离 */
			}
			.p1{
				font-family:verdana ;
				color: #0000000;
				font-size: 16px;
			}

3.外部样式针对当前网站中多页面的多个元素

（这一段没听）
应该是新建一个CSS文件，在CSS文件中定义样式，在网页需要使用是可以进行调用

两种引用方式：

链接

 <link rel="stylesheet" href="css/mycss.css" />

导入 : [一般不用]

<style type="text/css">
			@import url("css/mycss.css")
		</style>

4.3 选择器的分类

1.HTML选择器

对HTML已经定义的p，table，div作为选择器，就会对body中所有此系列的元素实现样式

input{
				border:1px dashed #00CC00;
				size: a3;
				text-indent:16px;
			}

感觉一般用不上的，因为格式一般都会有差距

2.类选择器

自定义类名称使用.定义

	.botton{
				background-color: #00CC66;
				border-bottom-color: #009900;
				float: right;
				
			}
			.a li,.b li { /* 空格 从属 ,  逗号表示并列*/
				list-style-image: url(img/female.gif);
			}

3.ID选择器

自定义ID名->使用 #定义 ->使用id引用

Class一般用于一个页面中多个元素使用的选择器
ID 必须用于页面中的唯一的元素,特别是针对网页的结构元素

Mounvo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
老图搬砖day04.01——CSS

8月13日现在是14.48，上午下课又忘记打卡签退了，故生气的设了四个闹铃。现在忘记打卡补条子，以后忘记打卡没全勤。4（其实是遗留的3） CSS4.1. CSS课后题4.2 CSS简介4.3 使用CSS三种方式4.4 选择器的分类4.1 CSS课后题因为昨天晚上搬砖摸到了一点点CSS，所以今上午狂妄的我没有听课，毕竟我在赶进度。<!DOCTYPE html>...
复制链接

扫一扫