千锋逆战班学习日志Day47

Java小白223

于 2020-04-07 21:12:53 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/qq_38663926/article/details/105373681

版权

千锋逆战班学习第47天

千锋逆战班学习第47天
努力或许没有收获，但不努力一定没收获，加油。
今天我学习了HTML和CSS。
中国加油！！！武汉加油！！！千锋加油！！！我自己加油！！！

表单标签

概念：表单可以将页面上录入的信息携带到服务器端

<!--
	文本框:<input> type="text" value:默认值 placeholder:提示
	密码框:<input> type="password" value:默认值  placeholder:提示
	单选框:<input> type="radio" checked:默认选中  value:默认值
		  若想使多个单选框互斥，应取一样的name
	下拉框：<select>
				<option value默认值 selected:默认选中>  </option>
		   </select>			selected:默认选中
	多选框：<input type="checkbox">
		   若想多个多选框归为一类，应取相同的名字
	上传文件框<input type="file">
	文本域: <textarea></textarea>
	提交按钮:<input type="submit"> 
	重置按钮：<input type="reset">
-->
<form>
	账户:
		<input type="text" name="username" placeholder="请输入账户" value="root"/><br />
	密码:
		<input type="password" name="password" placeholder="请输入密码"/><br />
	性别：
		<input type="radio" name="sex" value="male" />男 
		<input type="radio" name="sex" value="female"checked="checked"/>女<br />
	地址：
		<select name="city">
			<option value="Wuhan" selected="selected">武汉</option>
			<option value="Xiaogan" >孝感</option>
		</select><br />
	爱好：
		<input checked="checked" type="checkbox" name="hobbys" value="basketball"/>篮球 
		<input checked="checked" type="checkbox" name="hobbys" value="pingpang"/>乒乓球
		<input checked="checked" type="checkbox" name="hobbys" value="badminton"/>羽毛球<br />
	照片：
		<input type="file" name="pic"/><br />
	介绍：
		<textarea name="introduce" placeholder="自我介绍，字数为150以内!"></textarea><br />
			<!--
				<input type="submit"> ： 将表单中的内容提交到服务器
			-->	
			<!--<input type="submit" value="注册"/>-->
			<button type="submit">注册</button>
			<!--	
				<input type="reset"> : 将表单中的内容重置为原始状态
			-->
			<!--<input type="reset" value="重置" />-->
			<button type="reset">重置</button>
</form>

CSS介绍

含义
CSS指层叠样式表，cascading(层叠) style(样式) sheets(表格)
作用

通过css可以定义html元素如何显示
html相当于毛胚房，很多效果达不到，css相当于在毛胚基础上做精装修。
优点
通过css可以大大提高工作效率，可使html代码与样式代码分离
书写规范
格式：选择器{属性：属性值；属性：属性值}
- 选择器：确定当前css修饰的是哪一个元素。

二、CSS和HTML结合

2.1CSS和HTML结合之内联结合

2.11实现

    <div>
    	<font style="font-size: 600px;color: #008000;">这是一个div</font>
    </div>
    <!--
    	使用font标签来改变文本的字体大小和字体颜色
    	font标签设置字体大小，最大只能设定为7.
    	css内联代码:所有的符号必须是在英文半角模式下！！！
    	在标签中使用style属性,格式如下：
    			style="属性名1: 属性值1;属性名2: 属性值2"
    	颜色取值：颜色英文单词/颜色16进制	
    -->

2.12优缺点

优点：简单方便
缺点：复用性差，对少数的特定的元素进行单独设置！

2.2CSS与HTML结合之内部部结合

2.21使用方式

内部结合

需要在head标签中，使用style标签
使用选择器选中元素
编写css代码
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}

2.22实现

<head>
    		<meta charset="UTF-8">
    		<title>CSS和html结合之内部结合</title>
    		<style>
    			font{
    				font-size: 200px;
    				color: darkgreen;
    			}
        	</style>
    </head>
    	<body>
    		<div>
    			<!--字体大小为:200px,字体颜色:绿色-->
    			<font >这是一个font1</font><br />
    			<!--字体大小为:200px,字体颜色:绿色-->
    			<font >这是一个font2</font><br />
    			<!--字体大小为:200px,字体颜色:红色-->
    			<font style="color: red;">这是一个font3</font><br />
    		</div>
    	</body>

2.23优缺点

优点：可以对多个标签进行统一样式设置。
缺点：只能作用于当前页面，复用性不高。

2.3CSS和HTML结合之外部结合

2.31使用方法

外部结合方式
1，新建一个css样式文件
2，编写css代码
3，在html文件中引入css外部文件 ,使用link标签引入

2.32实现

 <head>
    		<meta charset="UTF-8">
    		<title>CSS和html结合之外部结合</title>
    		<!--
    			以上三种结合方式中，推荐用谁？
    			三种都有用！
    			外部结合方式！！
    			html中的相对路径!!!
    		-->
    		<link rel="stylesheet" href="css/css01.css" />
    	</head>
    	<body>	
    		<div>
    			<!--字体大小为:200px,字体颜色:绿色-->
    			<font >这是一个font1</font><br />
    			<!--字体大小为:200px,字体颜色:绿色-->
    			<font >这是一个font2</font><br />
    			<!--字体大小为:200px,字体颜色:红色-->
    			<font >这是一个font3</font><br />
    		</div>
    	</body>

2.33优点

优点：复用性高！简单！

三、访问路径

3.1绝对路径

绝对路径：

不带协议的绝对路径
带协议的绝对路径（如http）

3.2相对路径

相对路径：相对于当前文件所在目录的路径

3.3实现

 <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>探讨web中的路径1</title>
    	<!--
    		访问路径
    			绝对路径：不带协议的绝对路径/带协议的绝对路径
    			相对路径：相对于demo08.html资源去访问css01.css资源  ,  ./:当前目录  ; ../：上一级目录
    		demo08.html的访问路径:
    			http://127.0.0.1:8020/day47/demo08.html
    		css01.css的访问路径:
    			http://127.0.0.1:8020/day47/css/css01.css
    			在demo08.html的同一个目录(day47)下访问css文件夹下的css01.css
    			在demo08.html的   同一个目录(day47)-> css文件夹 -> css01.css
    					./(可以省略)					css		css01.css				
    		-->
    		<link rel="stylesheet" href="css/css01.css" />
    	</head>

四、选择器

格式

		css使用格式：
			选择器{
				属性名:属性值;
			}

4.1id选择器

概念

使用#引入，引用的是id属性值

实现

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<!--
				id选择器：引用的是id属性值
					#id属性值{
						属性名:属性值;
					}
		-->
		<style>
			font{
				font-size: 200px;
			}
			#one{
				color: greenyellow;
			}
			#two{
				color: limegreen;
			}
            #three{
				color: darkgreen;
			}
		</style>
	</head>
	<body>
		<!--字体颜色：淡绿-->
		<font id="one">this is font one</font><br />
		<!--字体颜色：中绿-->
		<font id="two">this is font two</font><br />
		<!--字体颜色：深绿-->
		<font id="three">this is font three</font><br />
	</body>

4.2类选择器

概念

使用.引入，引用的是class属性值

实现

<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<!--
			类选择器:引用的是class属性值
			格式：
				.class属性值{
					属性名:属性值;
				}
			处理多个元素有相同样式效果的！！！
		-->
		<style>
			font{
				font-size: 200px;
			}
			.one{
				color: greenyellow;
			}
			.two{
				color: limegreen;
			}
			.three{
				color: darkgreen;
			}
		</style>
	</head>
	<body>
		<!--字体颜色：淡绿-->
		<font class="one">this is font one</font><br />
		<font class="one">this is font two</font><br />
		<!--字体颜色：中绿-->
		<font class="two">this is font three</font><br />
		<font class="two">this is font one</font><br />
		<!--字体颜色：深绿-->
		<font class="three">this is font three</font><br />
		<font class="three">this is font two</font><br />
	</body>

4.3标签选择器/元素选择器

概念

使用标签名引入，引用的是标签

实现

	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<!--
			标签选择器/元素选择器
			格式：
				标签名{
					属性名:属性值;
				}
			
			将font标签中的文本颜色修改为红色
			将span标签中的文本颜色修改为蓝色
			将div标签中的文本颜色修改为绿色
			所有的文本大小都为300px
		-->
		<style>
			body{
				font-size: 200px;
			}
			font{
				color: red;
			}
			span{
				color: blue;
			}
			div{
				color: green;
			}
		</style>
	</head>
	<body>
		<font>this is a font</font><br />
		<span>this is a span</span><br />
		<font>this is a font</font><br />
		<div>this is a div</div><br />
		<span>this is a span</span><br />
		<font>this is a font</font><br />
		<div>this is a div</div><br />
	</body>

4.4选择器分组

概念

选择器分组：如果多个选择器中的css代码相同，那么就可以将这多个选择器划为一组。

实现

<head>
		<meta charset="UTF-8">
		<title>选择器分组</title>
		<!--
			格式：
				id选择器,class选择,元素选择器{
					属性名:属性值;
				}
			font/span/div中的文本内容字体大小为200px,字体颜色为绿色
		-->
		<style>
			#f1,.s1,div{
				font-size: 200px;
				color: green;
			}
		</style>
	</head>
	<body>
		<font id="f1">this is a font</font><br />
		<span class="s1">this is a span</span><br />
		<div>this is a div</div><br />
	</body>

4.5衍生选择器

概念

衍生选择器/上下文选择器：依据元素所在的位置进行元素的选择

实现

<head>
		<meta charset="UTF-8">
		<title>衍生选择器</title>
		<!--
			格式：
				父选择器 子选择器{
					属性名:属性值;
				}
				父选择器：可以是id选择器、class选择器、元素选择器
				子选择器：可以是id选择器、class选择器、元素选择器
			需求：设置span中的font中内容样式。不准用id选择器、内联、class选择器
			先找到span,再找到font
		-->
		<style>
			span font{
				font-size: 200px;
				color: deepskyblue;
			}	
		</style>	
	</head>
	<body>
		<span>
			<font>这是一个font</font>
		</span>
		<div>
			<font>这是一个font</font>
		</div>
	</body>

4.6选择器优先级

总结

优先级:内联样式 > id选择器 > 类选择器 > 标签选择器

规律

规律：作用范围越小，优先级越大

实现

<head>
		<meta charset="UTF-8">
		<title>选择器的优先级</title>
		<style>
			/*标签选择器*/
			font{
				font-size: 50px;
				color: yellow;
			}
			/*类选择器*/
			.clazz{
				font-size: 150px;
				color: orange;
			}
			/*id选择器*/
			#id1{
				font-size: 250px;
				color: orangered;
			}
		</style>
	</head>
	<body>
		<!--内联样式-->
		<font id="id1" class="clazz" style="font-size: 350px; color: red;">
			这是一个font
		</font>
	</body>

五、CSS伪类

实现

<head>
		<meta charset="UTF-8">
		<title>css伪类</title>
		<!--
			a:link {color: #FF0000}	/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */
		-->
		<style>
			a:link {
				/* 未访问的链接 */
				color: cornflowerblue;
			}
			a:visited {
				/* 已访问的链接 */
				color: red;
			}
			a:hover {
				/* 鼠标移动到链接上 */
				color: orange;
			}
			a:active {
				/* 选定的链接 */
				color: green;
			}
			font:hover{
				color: green;
				font-size: 100px;
			}
			button{
				background-color: orange;
			}
			button:hover{
				background-color: orangered;
			}
		</style>
	</head>

	<body>
		<a href="index.html">this i a super link</a><br />
		<font>this is a font element</font><br />
		<button>按钮</button><br />
	</body>

注意事项

a:hover必须被置于a:link 和a:visited之后。
a:active必须被置于a:hover之后。

六、CSS字体属性

概念

设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。

实现

<<head>
		<meta charset="UTF-8">
		<title>css中的字体属性</title>
		<!--
			font-family:
				微软雅黑、楷体、宋体、仿宋。如果浏览器不支持字体系列，就会使用默认的字体系列(微软雅黑!)，比如：草书
			font-size:
				字体大小
			font-style:
				字体倾斜度
			font-weight:
				字体的粗细
		-->
		<style>
			
			span{
				font-family: "草书";
				font-size: 100px;
				font-style: oblique;
				font-weight: bolder;
			}	
		</style>
	</head>
	<body>
		<span>这是一个span标签</span>
	</body>

七、CSS文本属性

概念

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

实现

<head>
		<meta charset="UTF-8">
		<title>css文本属性</title>
		<style>	
			/*
			 	css文本属性
			 	direction:
			 		ltr: left to right
			 		rtl: right to left
			 	line-height:
			 		行高
			 	text-align:
			 		文本的对齐方式
			 	text-decoration
			 		文本装饰  underline none line-through
			 		
			 	letter-spacing
			 		字符间距,字符与字符之间的间距
			 	word-spacing:
			 		单词间距,单词与单词之间的间距			  
			 */
			div{
				font-size: 50px;
				color: gray;
				direction: ltr;
				text-align: left;
				text-decoration: none;
			}
			a{
				font-size: 50px;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div>
			这是一个div
		</div>
		<a href="index.html">超链接</a>
	</body>

作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>作业</title>
		<style>
			p{
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div style="font-size: 25px; text-align: center;">拒绝4连败!勇士逆转76人回榜首 库里生日夜29分</div><br />
		<div style="font-size: 10px; text-align: center;">2017-03-15 13:06:05　来源: 网易体育 作者：小柳　有 65277 人参与 手机看赛事 </div><br />
		<div style="font-size: 20px; text-align: left;">
			<p>网易体育3月15日报道：</p>
			<p>金州勇士队（53胜14负）在主场反弹。库里得到29分、6个篮板和5次助攻，汤普森得到28分，格林得到20分、8次助攻和6个篮板，
				他们带领球队逆转16分落后，他们在主场以106-104险胜费城76人队（24胜43负）。勇士队结束3连败，他们重返联盟第一，
				常规赛2-0横扫76人队。
			</p>
		</div>
		<div align="center">
			<img src="img/kuli.png" />
		</div>
	</body>
</html>

在这里插入图片描述

Java小白223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
千锋逆战班学习日志Day47

千锋逆战班学习第47天表单标签CSS介绍二、CSS和HTML结合2.1CSS和HTML结合之内联结合2.2CSS与HTML结合之内部部结合2.3CSS和HTML结合之外部结合三、访问路径四、选择器4.1id选择器4.2类选择器4.3标签选择器/元素选择器4.4选择器分组4.5衍生选择器4.6选择器优先级五、CSS伪类六、CSS字体属性七、CSS文本属性作业千锋逆战班学习第47天努力或许没有收获...
复制链接

扫一扫