css学习文档

最新推荐文章于 2024-03-06 21:16:02 发布
最新推荐文章于 2024-03-06 21:16:02 发布
阅读量230 收藏
点赞数
文章标签： css html html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45973003/article/details/107329966
版权 

```sql
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在HTML中给段落定义样式</title>
		<style type = "text/css">
			p:first-letter
			{
				background: red;
				font-size: 30px;
			}
			//给另一个标签设置一些特殊的位置
			.a2 , first-line:first-line
			{
				background-color: blue;
				font-size: 66px;
			}
			em:first-line
			{
				background-color: deepskyblue;
				font-size: 66px;
			}
			p:before
			{
				content"welcome 我会出现在元素的最前面";
			}
		</style>
	</head>
	<body>
		//first-letter 首字母
		//first-line首行
		//使用伪元素来表示元素的一些特殊的位置
		//为p元素的第一个字符来设置一些特殊的样式
		<p>我是p标签我是一个段落标签</p>
		<a href = "#">我是一个a标签我用来创建超链接</a><!--该标签的作用是点击时回到顶部-->
		<p class ="a2">我也是一个p标签sed ’s/^\( *\)\1\(.*\)/\1\2\1/g’ 难受 难受 难受 
		   一步步解析：   sed ’s/^\( *\)\1\(.*\)/\1\2\1/g’ ==》 是类似于 替换 sed 's/旧的东西 /新的东西 /g'的东西
		   旧的： ^\( *\)\1\(.*\) 新的： \1\2\1/在这里的点是一个占位符 \( *\)这个东西就是一个正则表达式它的*表示的是占位符 表示空格出现0次到多次
		   规则\(xxx\)里面的东西做成一个区域，他的内容可以用\1来代替\(xxx\)==>该东西就是一个区域其他的内容可以用\1来进行代替
		</p>
		<em>我是em我是一个小的段落的标签： seq 20 生成20个数 从一到20 | 管道传递 xargs -i 一次次的传递 bash -c 将代码一次次的执行 “”双引号里面的东西看为一个整体
		 echo {} | 返回来的东西在屏幕上 替换将行头的东西替换成20-1 到第n次就是20-n 每次在屏幕上回车将a呈现在屏幕上 | 管道 bc 计算器的指令进行计算操作
		 | awk ’{system(\"seq \"\$1);}’  | $1就是awk中第一列的东西， 所以awk执行了一次，就是seq  5，也就是要生成的空格的数目(讲的大概就是生成的空格)
		 xargs -i  echo ’ ’传递来的东西但是传递来的空格有很多所以我们又用到了 echo ‘空格‘（就是将传递来的单元格显示出来一行的意思）| 管道  tr ’\n’ ’ ’;多行变一行
		 seq {}  | xargs -i   echo a    | 前面的东西传递过来 xargs -i 一次次的传递 回车将a显示在屏幕上   tr ’\n’ ’ ’;多行变一行 echo "  |  sed ’s/^\( *\)\1\(.*\)/\1\2\1/g’
	         第三小步 对它进行均分
		</em>
		<!--在php中的before标签和after标签 before表示在元素的最前面 
			
		after表示在元素的最后面
		在一般的情况下before标签一般会和content样式一起使用通过content向before或after的位置添加一些内容
		-->
		<p>我是一个小的段落标签</p>
	</body>
</html>






<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我们现在来讲关于选择器的知识</title>
		<style type="text/css">
		#p1{
			background-color: aquamarine;
			font-size:30px;
		}	
		#p2{
			color:#7FFFD4;
		}	
		.c3{
			color:yellow;
			
		}
		#a1 ,.a2 {
			font-size: 30px;
		}
		*{
			color:burlywood;
		}
		div > span {
			background-color: yellow;
		}
		input :focus {
			color: yellow;
		}
		a:link{
			color: black;
		}
		a:hover{
			color: darkred;
		}
		a:active{
			background-color: blue;
		}
		a:visited{
			color: deeppink;
		}
		
		
		</style>
		
	</head>
	<body>
		在选择器中我们有id 和 class 。。
		首先我们来讲id 他的格式是 #id {}
		class是 .class{} 选择器和声明块与id选择器不同的是class选择器可以重复拥有相同属性值的元素而id选择器只能定义一个不可重复
		<p id="p1">我是一个p标签我来给你们演示一下id</p>
		<p id ="p2">明月几时有，把酒问青天</p>
		<a class ="c3" href ="#">点我</a>
		<em class = "c3">我是一个小的段落标签</em><br />
		<hr  class = "c3"/>
		<img src = "picture/捕获2.PNG" width ="60px" class = "c3"/> 
		<!--在HTML中class和id选择器的作用是类似的5但是class可以重复拥有相同属性值的元素
			
		我们说它是一组元素-->
		//在css中我们通过选择器分组可以同时选中多个选择器对应的元素
		语法 选择器 1,选择器2, 选择器n {
			声明块 
		}
		<p id = "a1">whgherwghewnrwrejghowag</p>
		<p class ="a2">hghoeerohit</p>
		//在css中还会存在通配选择器可以同时选中在页面中的所有的元素
		//css中的交集选择器
		：作用可以同时选中满足多个选择器的元素
		语法： 语法 选择器 1,选择器2, 选择器n {
			声明块 
		}
		<!--在css中的的内联框架
		在css中我们使用内联框架可以引入一个外部的页面
		在css中我们使用iframe来创建一个内联框架
		src 指向一个外部页面的路径可以使用相对路径
		width 为内联框架设置一个宽度 height为内联框架设置一个高度
		name 可以为内联框架指定一个name属性
		-->
		<iframe src ="css.html" width ="90px" height ="90px" name ="myself"></iframe>
		<embed src =""></embed>
		<!--在HTML中父子元素的关系父元素直接包含子元素的元素
			子元素被父元素包含的元素
			祖先元素直接或间接包含后代元素的元素父元素也是祖先元素
			后代元素被父元素或被祖先元素包含的元素
		-->	
		<div>我是个块元素
		 <span>我是一个span元素我是div元素的子元素div是我的父元素和祖先元素
		 </span>
		 <p><span>我是span是p中的span</span></p>
		</div>
		<pan>我是body中的span元素</pan>
		//为div中的元素span设置一个背景颜色为黄色的元素选择器
		
		
		<!--
        	作者：offline
        	时间：2020-05-17
        	描述：
        	给css中的链接定义样式
        	4中：
        	正常的连接 a:link
        	访问过的连接 a :visited（只能定义颜色）
        	鼠标滑过的连接 a:hover
        	正在点击的连接 a: active
        	其他：
        	获取焦点 ：focus
        	指定的元素前： before
        	指定的元素后： after
        	选中的元素 ：：selection
        	     
        -->
        <a href="http://www.baidu.com">baidu</a>
		<!--我们可以为p标签中选中的内容设置样式
	              可以使用：：selection伪类
	     但是注意在火狐中这个伪类要采用另一种方式进行编写
		-->
		
	  //使用伪元素来表示元素中的一些特殊的位置	
	     给HTML中的段落定义样式
	  first : letter首字母
	  first ： line 首行
	
		
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type = "text/css">
			span{
				background-color: red;
				font-style: oblique;
				font-weight: 900;
			}
			p{
				font-variant: small-caps;
			}
			
		</style>
	</head>
	<body>
		<p style = "font-size: 30px;font-family: serif;">我是衬线字体</p>
        <p style = "font-size: 30px;font-family: sans-serif;">我是非衬线字体</p>
        <p style = "font-size: 30px;font-family: monospace;">我是等宽字体</p>
        <p style = "font-size: 30px;font-family: cursive;">我是草书字体</p>
        <p style = "font-size: 30px;font-family:fantasy;">我是虚幻字体</p>
        <!--
        	作者：offline
        	时间：2020-05-24
        	描述：在css中设置文字的斜体使用 font-style来设置文字的斜体
        	    可选值：
        	    normal 默认值 文字正常显示
        	    italic 文字以斜体显示 
        	    oblique 文字以倾斜的效果显示
        	    大部分的浏览器都不会对倾斜和斜体做取反也就是设置italic和oblique他们的效果是一样的
        	    但是一般我们会用italic
        	     
        -->
        <!--
        	作者：offline
        	时间：2020-05-24
        	描述：在css中我们可以使用font-weight来设置文本的加粗效果
        	      可选值 ：
        	        font-weight ： normal默认值正常
        	        bold文字加粗显示
        	        该样式可以指定100-900间的9个值
        	    200可能比100粗 。。。。。。
        	在css中可以使用font-variant来设置小型的大写字母
        	可选值：
        	   normal ：很正常
        	   small-caps ：文本以小型的大写字母显示
        	   all-small-cap:所有的文本以小型的大写字母显示
        	   小型大大写字母也是大写字母就是比往常的大写的字母小一些
        -->
        <p>我是一个p标签ppppppppppppppppppppppaaaaaaaaaaaaaaaaaaaa</p>
        <span>你好我是一个文字的标签</span>
	</body>
	
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在css中的单位</title>
		<style type = "text/css">
			#i1{
				font-size: 200%;
			}
			.e1{
				font-size: 3em;
			}
			#d1{
				background-color: rgb(100,20,50);
			}
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2020-05-24
        	描述：在css中的单位 px主要表现的是像素我们的图片是由像素构成的包括我们的显示器
        	主要讲的是分辨率分辨率越高显示的颜色效果就越好我们看的就越清楚
        	在css中我们也可以使用%来表示一个大小百分比是相对于父元素来所得入果父元素的使用大小是16px
        	那么100%就是16px
        	em在css中em也是相对于百分比来所得1em相对于是100% 2em相对于是200%
        	他们都是长度单位
        	%的详解 ：
        	      使用%的好处是当父元素的属性值发生变化时子元素也会按照比例发生变化
        	  我们在创建一个页面时经常使用到%
        	em和百分比相似他是相对于当前元素的字体大小来计算的
        	1em = 1font-size
        	使用em时当字体大小发生变化时em也会随之改变
        	当设置字体相关的样式时经常使用到em
        -->
        <span id = "i1">
        	 我是span我是一个给字体设置样式的标签
        	<p>我是一个p标签我是span的子元素</p>
        </span>
        <p class = "e1">
        	<em >我是一段内容中的重点</em>
        </p>
        <!--
        	作者：offline
        	时间：2020-05-24
        	描述：在css中的颜色单位
        	    在css中可以使用颜色的单词来表示不同的色调
        	    red
        	    green
        	    blue
        	         三种颜色
        	         也可以使用rgb来表示不同的颜色
        	      所谓的rgb就是通过三元色混合组成的各种颜色
        	      我们使用rgb的颜色的格式是
        	      rgb（红色的浓度 ，绿色的浓度，蓝色的浓度）；
        	      颜色的值表示的是1-255将 255最大 0表示什么都没有
        -->
        <div id = "d1">我是一个块元素我单独占一行的大小</div>
        <!--
        	作者：offline
        	时间：2020-05-24
        	描述：接下来我们学习字体的分类在css中
        	serif（衬线字体）
        	sans-serif（非衬线字体）
        	monospace（等宽字体）
        	cursive（草书字体）
        	fantasy（虚幻字体）
        -->
        <p style = "font-size: 30px;font-family: serif;">我是衬线字体</p>
        <p style = "font-size: 30px;font-family: sans-serif;">我是非衬线字体</p>
        <p style = "font-size: 30px;font-family: monospace;">我是等宽字体</p>
        <p style = "font-size: 30px;font-family: cursive;">我是草书字体</p>
        <p style = "font-size: 30px;font-family:fantasy;">我是虚幻字体</p>
        
        
	</body>
</html>



<!doctype html><!--注释-->
<html>
	<head>
		<meta charset = "utf-8"  /><!--防止乱码我们这里使用的是万国码-->
		<title>我是一个网页的题目</title>
		#p1{
			background-color : blue;
		}
	</head\>
	<body>
		<!--我是一个身体标签我显示在屏幕上-->
		<p color="red">我是一个学生今天开始复习csscss请多多指教因此我为你的字体添加了一个颜色</p><br />
		<hr />
		<a href = "http://www.baidu.com">点我</a>
		<!--来我们来引入一张图片来玩玩-->
		<img src = "picture/捕获3.PNG" alt = "我是一张截图我是hadoop的截图" width ="90px" height ="90px"></img>
		<em>我是一个小的段落</em>
		<a id = buttom = "我是一个按钮" color = "red">我是一个小小的提示段落</a><br />
	</body>
</html>
<!doctype html>
<html>
	<head>
		<title>好我们正式来复习css</title>
		<meta charset = "utf-8" />
		<p>我们还可以将样式编写到head中的style的标签里</p>
		<style type = "text/css">
			p{
				color:red;
				font-size : larger;
				//在css中内联样式仅仅对当前的样式起作用不方便复用
				//将元素编写到style的标签中我们可以对网页中的相同的元素作用方便代码的复用
				//将代码编写到style中可以使结构和表现进一步的分离使我们推荐的方式
			}
		</style>
	</head>
	<body>
		<p>css层叠样式用来为网页创建样式表通过样式可以对网页进行修饰所谓的层叠讲的就是将网页想成是一层一层的结构层次高得会覆盖层次低的</p>
		<p>css可以为网页的各个层次设置样式</p>
		<!--那么我们现在来讲内联样式-->
		<p>我们可以将css的样式编写到元素的style属性中将元素编写到style属性中我们称为内联样式</p>
		<p style ="font-size: 60px; color:dodgerblue">明月几时有，把酒问青天</p>
		<p>内联样式属于结构和表现耦合不推荐使用</p>
	</body>
	<body>
		<!--css的基本语法是通过选择器和声明块来实现-->
		/**
		 *
		 选择器 声明块 
		 选择器： 选择叶明中的指定元素并进声明块中的样式应用到选择器所选中的得对应的元素上
		声明块：就是中括号里面的东西
		在一个声明块中可以写入多个样式并且使用；隔开声明块的样式与值之间用：来连接
		样式名 ： 样式值
		 
		 **/
	</body>
	<body>
		<p>来我们来讲一个divcss中的块状元素所谓的块元素就是独占一行的元素</p>
		<div style = "background-color:red; width:66px;height:66px">我是一个块元素</div>
		<div style= "background-color: dodgerblue;">我是一个块元素我在将css样写在style元素中的就是内联样式</div>
		<div style ="background-color: greenyellow;">div这个标签就是一个单纯的块元素它不会为里面的元素添加任何的默认的样式我们多用div标签对网页进行布局</div>
	</body>
	<body>
		接下来我们来讲一个行内元素所谓的行内元素是指仅仅占用自身大小的元素（或讲的是内联元素）
		常见的内联元素有 a 和 img元素 span 和 iframe
		<span style = "color:deeppink;font-size: 50px;">我是span我是一个行内元素我仅仅占自身的大小</span>
		<iframe>hihi</iframe><!--iframe的作用画出一个空白的表格块一个空白的区域-->
		//是一个仅仅占自身大小的行内元素<br />
		<span href = "#">我是一个span元素span元素没有任何的语义主要用来选中文字然后为文字设置样式</span>
		<!--在我们所知道的中一般情况下使用块元素来包含内联元素
			
		而不会使用内联元素去包含块元素
		a元素可以包含任何的元素除了它本身 p元素不可以包含其他的任何的块元素
		在HTML中块元素主要用来对页面进行布局内联元素主要用来为文本设置样式
		-->
	</body>
	
	<body>
		<!--现在我们来复习选择器的内容-->
		//他的格式是 #选择器的名称注意在HTML中的id选择器一定要带有#
		<p id = "p1">不知天上宫阙，今夕是何年</p>
		<p id = "p2">我欲乘风归去，又恐琼楼玉宇</p>
		
	</body>
</html>
	


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p:before
			{
				content:"我会出现在整个段落的最前面";
			}
			p:after
			{
				content:"我会出现在段落的最后面";
			}
			/*
			 为所有具有title属性值的p元素设置一个背景颜色
			 在html中的属性选择器
			 作用：可以根据元素中的属性和属性值来选择指定的元素
			 语法   [属性名] 选取含有指定属性的元素
			      [属性名 ="属性值" ] 选取含有指定属性值的元素
			      [属性名 ^="属性值"] 选取属性值以指定元素开头的元素 
			      [属性名 $="属性值"] 选取属性值以指定元素结尾的元素
			      [属性名 *="属性值"] 选取属性值以包含指定内容的元素
			 * */
			p[title = "hello"]//为属性值是hello设置一个背景为红色的背景颜色
			{
				background-color: red;
			}
		</style>
			
	</head>
	<body>
		<p>我是一个p标签</p>
		<!--在HTML 中的title属性这个属性可以个网页中的任何的标签指定
			当鼠标移入到元素上时元素上的title属性的值将会作为提示文字显示
		-->
		<p title = "hello">我是一个title属性</p>
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type ="text/css">
		/*
		 在php中的子元素选择器
		 :first-child 选择第一个子标签
		 :last-child 选择最后一个子标签
		 :nth-child 选择指定位置的一个子标签
		 、、、、、、、、、、、、、、、、、、、、、
		 :first-of-type 
		 :last-of-type
		 :nth-of-type
		  选取指定类型的子元素 
		  这些和上面的非常的相似只不过child是所有子元素的排儿type是当前类型中元素的排列
		 * */
		 /*第一个位置的子标签*/
		 p:first-child
		 {
		 	background-color: red;
		 }	
		 p:last-child
		 {
		 	background-color: yellow;
		 }	
		 p:nth-child(odd)
		 {
		 	background-color: blue;
		 }
		 /*
		  :nth-child可以指定任意位置的子元素
		    该选择器的后边可以指定一个参数指定要选中第几个子元素
		    even 表示偶数位置的子元素
		    odd表示奇数位置的子元素
		        注意：在使用任意指定位置的子元素是设定偶数或奇数位置的元素会覆盖前面设置的元素
		  * */
		</style>
	</head>
	<body>
		<p>我是第一个段落标签</p>
		<p>我是第二个段落标签</p>
		<p>我是第三个段落标签</p>
	    <p>我是第四个段落标签</p>
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style type="text/css">
		span + p 
		{
			background-color: chartreuse;
		}
		span ~ p
		{
			background-color: yellow;
		}
			
		</style>
	</head>
	<body>
		<!--后一个兄弟元素选择器
			作用 ： 可以选中一个元素后面紧紧挨着的指定元素指的是兄弟元素
			语法：前一个 + 后一个
		-->
		<!--选中后边的所有的兄弟元素
			语法 前一个 ~ 后边所有
		-->
		<p>我是第一个p标签</p>
		<p>我是第一个p标签</p>
		<p>我是第2个p标签</p>
		<p>我是第3个p标签</p>
		<p>我是第4个p标签</p>
		<p>我是第5个p标签</p>
		<p>我是第6个p标签</p>
		<p>我是第7个p标签</p>
		<span>我是一个span标签</span>
		<p>我是第8个p标签</p>
		<p>我是第9个p标签</p>
		<p>我是第10个p标签</p>
		<p>我是第11个p标签</p>
		<p>我是第12个p标签</p>
		<p>我是第13个p标签</p>
		<p>我是第14个p标签</p>
		<p>我是第15个p标签</p>
		<p>我是第16个p标签</p>
		<p>我是第18个p标签</p>
		<p>我是第19个p标签</p>
		<p>我是第20个p标签</p>
		<!--在css中的否定伪类
			作用 ： 从已经选中的元素中剔除某些元素
			语法：：not(选择器)
			在：not选择器可以从已选中的元素中剔除某些元素
		-->
		<!--在css中的样式继承-->
		
		
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在css中的样式的继承</title>
		<style type ="text/css">
		/*在该标签中是我们推荐的设置样式的方式	*/
		.c{
			font-size: 20px;
			background-color: green;
			
		}
		/*
		 给文中的id标签设置属性样式
		 * */
		#c1{
			background-color: yellow;
		}
		#c2{
			background-color: red;
		}
		#c3{
			background-color: blue;
		}
		/*如果想给网页中的所用元素设置样式使用* 注意使用该方式给网页设置样式会包括网页中的所有的元素包括没有设置样式的文字等*/
		*{
			font-size: 20px;
		}
		/*另外我们还可以同时给网页中的不同的选择器设置样式及混合设置 不同的样式间使用，来进行隔开*/
		#a1, #a2 , #a3, #a4 ,.c2{
			background-color: chocolate;
		}
		/*
		 于此同时我们还可以使用css中的css样式给网页设置鼠标滑动的效果
		 * */
		a:link{
			background-color: navajowhite;/*颜色正常的时候*/
		}
		a:focus{
			/*在css中focus可以获取焦点*/
		}
		a:active{
			/*鼠标点击时的效果*/
			color: cyan;
		}
		a:hover{
			background-color: slateblue;
			/*鼠标移入时的效果*/
		}
	    a:visited{
	    	/*点击过的连接*/
	    	color: deepskyblue;
	    }
	    /*接下来我们来演示在指定的文件前或指定的文件后*/
	   em:focus{
	   	     background-color: hotpink;
	   }
	   em:before{
	   	     content:"我爱linux我爱脚本自动化";
	   }
	   em:after{
	   	    content: "fjjkjodkok";
	   }
	   em:selection(3){
	   	      background-color: #FFFF00;
	   }
		</style>
	</head>
	<body>
		<!--
			就像后代可以继承祖先的遗产一样css中的后代元素也可以继承祖先元素的样式、
			利用继承可以将一些基本的样式的设置设置给祖先元素这样后代元素就会自动继承祖先元素中的样式
			
		-->
		<p>我是一个p标签我是一个段落标签</p>
		<span>我是一个span标签我没有任何的意思我就是用来选定文字并且给文字设置样式</span>
		<p>我是第二个p的标签</p>
		<p style = "color: red;">我是一个设置了样式的p标签但是我设置的是内联样式的标签不推荐使用该方式来标签的样式</p><br />
		<a href = "#">我是一个a标签我用来设置超链接</a>
		//在html和css中#的意思就是在我设置了超链接后点击该超链接就会回到页面的顶部
		<em>我是一个em标签我是一个小的段落标签</em>
		<h4>我是一个段落的标题在HTML和css中我们共设于6级的标题分别从 h1 -h6级的标题</h4>
		<h5>
			我是一个5级的标题值css中他的标签要么成对出现要么自结束
		    在css中我们还可以给网页引进图片引进图片的标签是 img 他是一自结束的标签在css中还有行内元素
		    行内是仅仅占自身大小的元素值css中还有设置图片路径的样式 src引进一个外部图片的路径 alt对引进的图片进行描述
		    如果我们在引进图片时不写他的描述那么搜索引擎在检索时就不会对图片进行收录在css中的hr
		    标签他是设置一个分割线的意思就是在网页上显示出一条下滑线
		</h5>
		<hr />
		<h5>
			在css中的选择器 id选择器在一个网页的一个元素中只能有一个
		       是它的描述class选择器可以重复选择相同属性的元素
		</h5>
		<!--给css中的标签设置class选择器-->
		<p class ="c">明月几时有，把酒问青天</p>
		<p class = "c">不知天上宫阙，今夕是何年</p>
		<p class = "c">我欲乘风归去，又恐琼楼玉宇</p>
		<hr />
		<p id ="c1">明月几时有，把酒问青天</p>
		<p id = "c2">不知天上宫阙，今夕是何年</p>
		<p id = "c3">我欲乘风归去，又恐琼楼玉宇</p>
		<hr />
		<span id = "a1">我是span我是一个文字的设置标签</span>
		<span id = "a2">我是span我是一个文字的设置标签</span>
		<span id = "a3">我是span我是一个文字的设置标签</span>
		<span id = "a4">我是span我是一个文字的设置标签</span>
		<span class = "c2">我是span我是一个文字的设置标签</span>
		<span class = "c2">我是span我是一个文字的设置标签</span>
		<span class = "c2">我是span我是一个文字的设置标签</span>
		<hr />
		<a href = "www.baidu.com">百度</a>
		<hr />
		<a href = "www.souhu.com">搜狐</a>
		<hr />
		<a href = "www.tenxun.com">腾讯</a><!--接下来我们来给他们来设置鼠标滑动的效果-->
		<hr />
		<!--为元素设置。。。before在指定的元素前 focus 获取焦点 after 在指定的元素后 selection 选定的元素-->
		<em>我是一个小的段落标签</em>
		<em>我也是一个小的段落标签</em>
		<em>linux里面的指令有 cd 进入目录的命令  ls 显示当前文件 -l以长文件的形式显示 
			-i在显示的文件的前面加一个索引 -a 显示当前目录的所有的文件包括以点开头的文件
		    cd..返回上一级目录的命令 cd ~当前用户的家目录 cd- 显示上一级目录  pwd显示当前的文件的路径
		    jps 查看当前的进程中所有的有关于java的运行的文件 ll 显示长文件 awl linux中的单元格操作
		    tr 一一替换命令  sed 's/旧的东西/新的要替换的东西/g' 替换文件的命令  seq生成数的命令
		    echo 命令将第一个echo后面的东西返回来 cat 显示文件到屏幕 grep 搜索命令 find 也是显示文件的命令
		       在linux中有三种模式 一种是普通的模式 一种是命令行的模式 还有一种忘了 在linux中使用 set nu来设置行号 
		       在linux中我们使用set nonu来取消行号的设置 在 在linux中的*表示任意长度的任意字符 ？ 表示任意的一个字符
		    在linux中的文件的从定向的问题 > 输出从定向将文件的执行的结果返回的指定的文件夹 >> 附加输出从定向在文件的末尾追加写入
		   < 输入从定向是将文件的标准输入从定向到一个指定的文件 mkdir 创建目录的文件 tough 是创建目录的文件
		   	 附加输出从定向 >> 是将文件的错误的输出从定向的指定的文件 cp 拷贝文件的命令
		   	  mkdir -p 递归创建文件的命令 tr ' ''\n'换行 tr '\n'''多行变一行删除文件的命令 rm -rf 删除文件的命令 -r 一个完整的目录
		   	  f 就是不询问直接删除 
		</em>
		
	</body>
</html>




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>接下来我们来学习一下css中的子元素对父元素的继承</title>
		<style type = "text/css">
			/*
			 在我们的css中为了我们使用的方便他是通过继承可以使后代元素拥有祖先元素的性能
			 我们给他们的父元素来设置样式
			 但是在css中并不是所有的样式都会被子元素所继承背景相关的样式不会被子元素所继承
			 * */
			span{
				background-color: blue;
				font-size: 20px;
				width: 20px;
				height: 20px;
			}
			p#p1{
				color: red;
			}
			#p2{
				font-size: 20px;
			}
			.c1{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<span>
			<p>
				我是span中的p标签我是他的子元素
				<em>
					我是p标签中的标签我是他的子元素span是我的祖先元素
				</em>
				<div>
					我是一个块元素我会独占一行我是em的兄弟元素同时我是span的子元素
				</div>
			</p>
		</span>
		<!--接下来我们来将我们的块元素-->
		<div style = "background-color: green; width: 60px; height : 90px">欢迎来到块元素的世界</div>
		<!--
        	作者：offline
        	时间：2020-05-21
        	描述：
        	那么接下来我们就来讲一讲关于样式间的优先级的问题
        	在我们给网页中的元素设置样式时当我们给网页中的元素设置
        	对相同相同的样式时采用相同样式的那么就会有冲突
        	所以我们就要区分元素样式的优先级
        	内联1000 >id100 >类和伪类 10> 元素1 > 通配0
        	继承的样式没有优先级
        	当网页中包含多种相同选择器时需要将多种选择器的优先级相加然后在进行比较在选择器的优先级计算不超过他最大的
        	数量级如果选择器的优先级一样则选择靠后的样式
        	在css中并集选择器的优先级是单独计算的：
        	div p #p1 .class
        	在css中提供了一个机制获得一个最高的优先级在样式的最后添加一个 ！important
        	则此时样式就会获得一个最高的优先级将会优于所有的样式甚至是内联样式但是 在开发中尽量避免使用！important
        	
        
        -->
        <p id = "p2">我是一个p标签我是一个段落标签</p>
        <p id = "p1">我也是一个p标签我也是一个段落标签</p>
        <em class = "c1">我是一个em标签我是一个小的段落标签</em>
        <a href = "#",id = "a1">我是一个超链接标签</a>
        
        
         <!--在css中a的伪类有4个
         	：link 鼠标滑过是正常的结果
         	： hover 鼠标滑的样子
         	：visited 被观看过的超链接
         	: active 即是鼠标被点击时的样式
         -->
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>en和strong</title>
		<style type = "text/css">
			
		</style>
	</head>
	<body>
		<!--
			em标签用来表示一段内容中的着重点
			strong用来表示一段内容的重要性
			这两个标签可以单独使用也可以一起使用
			em标签显示的内容是斜体 strong显示为粗体
		-->
		<sapn>
	          进入命令行模式  w 保存 q 退出命令 ifconfig 命令用来查看网络的相关配置
		关闭系统的命令 shutdown  shutdown -n now立刻关闭系统 shutdoen -h now立刻重启系统
		man 命令查看帮助文档
		reboot重启命令
		chmod命令改变文件的权限
		显示当前所在目录：pwd
		删除空的目录 命令 rmdir
		移动文件的命令是 mv
		获取文件的路径名和目录名 basename ， dirname
		在显示文件的时候顺便输出行号 nl
		一页一页的显示档案的内容 more
		查看头几行的命令 head 查看尾部几行的命令 tail
		以二进制的放置读取档案内容：od
		观察文件的类型 file命令
		有关防火墙的相关命令
		查看防火墙的状况 service iptables status
		临时关闭防火墙   service iptables stop
		永久关闭防火墙   chkconfig iptables off
		重新开启防火墙   service iptables restart
		将永久关闭的防火墙重启 chkconfig iptables on
		</sapn>
		<em>临时关闭防火墙   service iptables stop</em>
		<strong>临时关闭防火墙   service iptables stop</strong>
		<!--在css中的ins标签
			表示插入一个内容ins标签中的内容会自动添加下划线
		-->
		<p>明月几时<ins>有</ins></p>
		<!--在css中的pre标签他是一个预格式标签会将代码的颜色保存不会忽略多个空格-->
		<pre>
			                  echo "hello word";
		</pre>
		<!--
        	作者：offline
        	时间：2020-05-24
        	描述：
        	接下来我们进入有序列表和无序列表的学习
        	在css中我们使用ul标签来创建一个无序列表
        	使用li标签在列表中创建也一个列表项
        	在css中我们创建无序列表的同时还可以通过type属性来修改无序列表中的项目符号
        	可选值：
        	   disc 默认值 一个实心的圆点
        	   square 一个实心的方块 
        	   circle 实心的圆
        	   注意默认的项目符号我们一般都不使用
        	 如果需要使用项目符号则采用li设置背景图片的方式来进行设置
        -->
        <ul>
        	<li type ="square">唐僧</li>
        	<li>孙悟空</li>
        	<li>沙和尚</li>
        	<li>猪八戒</li>
        	<li>小白龙</li>
        </ul>
        <!--
        	作者：offline
        	时间：2020-05-24
        	描述：在css中ul标签和li标签都是块元素就是独占一行的元素
        -->
		<!--
        	作者：offline
        	时间：2020-05-24
        	描述：接下来我们来讲css中的有序列表
        	在css中的有序列表ol标签来进行创建创建列表的向依然是 li
        	在有序的列表中使用有序序号来作为项目符号
        	在有序列表中我们也可以使用type属性来指定序号的类型
        	a/A 使用小写或大写字母作为序号
        	i/I 采用小写或大写的罗马是指作为序号
        	在css中有序列表中的标签也是块元素
        -->
         <ol>
         	<li type = "a">结构</li>
         	<li type = "A">表现</li>
         	<li type = "i">行为</li>
         	<li type = "I">rmdir</li>
         	<li>cd</li>
         </ol>
         <!--
         	作者：offline
         	时间：2020-05-24
         	描述：列表间的相互嵌套在有序的列表中我们可以放进一个无序的列表
         	在无序的列表中我们可以放进一个有序列表
         -->
         <ul>
         	<li>cd</li>
         	<li>mkdir</li>
         	<ol>
         		<li>ls</li>
         		<li>shuf</li>
         	</ol>
         </ul>
         <!--
         	作者：offline
         	时间：2020-05-24
         	描述：定义列表用来对一些词汇或内容进行定义
         	使用dl来创建一个定义列表
         	  在定义列表dl中有两个子标签
         	  dt 和 dd
         	  dt ：表示被定义的内容
         	  dd ： 表示被定义的描述
         -->
         <dl>
         	<dt>cd</dt>
         	<dd>穿梭于linux的个目录之间进入返回遛一遛cd ~返回上层</dd>
         </dl>
         <dl>
         	<dt>武大郎</dt>
         	<dd>炊饼卖的666外加头上一点绿</dd>
         </dl>
         
	</body>
</html>




<!doctype html>
<html>
	<head>
		<meta charset= "utf-8"/>
		<title>
			我是网页的主题
		</title>
		<!--在head中的内容不会在网页中显示出来head中的内容用于帮助浏览器解析服务器 -->
	</head>
	<body>
		/**
		 *在网页的世界里 HTML用于描述网页的结构
		  css用于描述网页的表现控制页面元素的样式
		  js用于描述网页的行为及控制用户的操作 
		 **/
		在HTML的世界中网页的题目共分为6个
		<h1>我是一级标题</h1>
		<h2>我是2级标题</h2>
		<h3>我是3级标题</h3>
		<h4>我是4级的标题</h4>
		<h5>我是5级的标题</h5>
		<p>我是一个p标签我是个段落标签</p>
		<!--
              	属性： 可以通过过为标签添加属性来处理标签中的内容我们可以再开始的标签中添加属性
              	属性在开始的标签中的形式是一种名字对的形式的结构 属性名 = 属性值
              	在HTML中我们还将一个完整的标签称为元素同时又父元素 子元素 祖先元素的称呼
        -->
        <p>我是一个段落标签<em>我是em标签我还p标签的子标签</em></p>
        <em>我是一个我小的段落标签</em>
        <!--
        	向标签中添加属性
        -->
        <p color = "red">我是一个段落</p>#错误
        <br />我是一个自结束标签我的功能是换行
        <img/><!-- 我是一个自结束的标签我的作用是向网页引入一个图片-->
        <img src = "引入的外部图片 " alt = "对引入的东西进行描述"/>
        <!--在HTML中src用于设置一个外部图片的路径
        	alt用来设置在图片不显时对图片的描述搜索引擎通过对alt属性来识别不同的图片
        	如果不写alt则搜索引擎不会读图片进行收录
        	width 用来设置图片的宽度
        	height 用来设置图片的高度
        	src主要是用来引入一个外部图片的路径 目前我们使用的是相对路径相对路径是相对于当前资源的所在的目录
        -->
        <ing src = "苍井空打电话" alt = "我是一个图片" width = 300px height = "300px" />
        <img src= "picture/捕获3.PNG" alt= "我是一个截图" width = "66px" height = "66px"/ >
        <!--在html中我们可以用meta这个标签给网页设置关键字-->
        <meta name ="author" content="aqua" />
        <hr /><!--我是一个划线的标签-->
        <!--在HTML中注释不能嵌套，不区分大小写 ，
        	
                 在HTML中代码要么是完整的 要么成对出现 要么是自结束 在HTML中他的标签可以嵌套但是不能交叉嵌套-->、
         <font color = aqua>nihaowosfid</font>
         <!-- 在HTML中font标签可以设置字体的颜色和大小-->
         <a href ="#">我是一个超链接</a><!--href用于设置网页的超链接如果把超链接设置为#则点击超链接后自动回到页面的顶部-->
         <!--在HTML中我们有一个id 属性 每一个元素都可以设置 该属性作为可以作为标签的唯一的标识 id属性在同一个页面只能有一个不能重复-->
         <a id = "bottom" href = "http://www.baidu.com">我是一个按钮</a>
         <embed src = "被嵌入的动画片" alr ="我是一个被切入的动画标签">我是一个动画切入的标签</embed>
	</body> 
</html>


<!DOCTYUPE HTML>
<HTML>
<head>
     <title>我是一个网页的标题</title>
     在HTML中文件的内容一般不会显示在浏览器上在head中的内容是可以用来帮助浏览器解析代码解析网页
</head>
    <body>
    <img /><!--我是一个img标签我用来引入一个外部的图片-->
    <br/><!--我是一个换行标签-->
    <hr/><!--hr我是一个分割线或输出一条行线-->
    <p>我是一个p标签我是一个段落标签</p>
    <em>我是一个小的段落标签</em>
    //在html中 一个完整的标签又可以称为元素 在html中的标签要么成对存在 要么是自结束 
    </body>
    <a>在HTML中的a标签用来设置一个超链接</a>
    在html中指定一个超链接使用 href属性
    <a href = "http://www.souhu.com">在HTML中使用href来指定一个超链接</a>
    <p>在HTML中我们使用#即是将超链接即点击超链接以后会返回网页的顶部</p>
    <p>我是一个段落标签在HTML中我们可以使用一个id属性来设置一个...在HTML中我们使用id属性来作为标签的唯一的标识在一个网页中仅仅能则能有一个的id标签</p>
     在HTML中我们是不区分大小写的 在HTML中我们是无论标签 或者是注释标签可以嵌套但是不能交叉嵌套注释是不可以进行嵌套的
    
    
    
</HTML>
_沧浪之水_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS学习文档
weixin_44337050的博客
05-03 587
HTML的学习笔记，待补充，我们一起成为前端开发者！
CSS学习文档（持续更新）
a1578460233的博客
05-30 160
h5(html5)+css3+web前端 学习视频 帮助文档（学习手册）菜鸟教程 笔记源码—>html部分 笔记源码—>css部分 可在线查看网页源代码预览 也可以ctrl+s保存打开 对比学习，一学就会！ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
CSS学习文档（一）：语法规范，选择器，字体属性，文本属性，引入方式
weixin_42044763的博客
10-24 2783
今天开启CSS篇章！冲！！！ 一、CSS语法规范 选择器 {属性名: 属性值; 属性名: 属性值;}。 1.选择器后面带空格，属性名的冒号后面也带空格，这样比较舒服 2.每个属性和属性值最好独占一行，属性值结尾别忘了分号; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
css学习文档资料
08-14
【CSS学习文档资料】 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的样式和布局。本学习资料主要聚焦于CSS的基础知识、进阶技巧以及实际应用，帮助你深入理解和掌握这一技术...
css教程、学习文档、参考资料
09-02
综上所述，"css学习文档.pdf"这份资料可能会涵盖以上提到的各个方面，帮助读者深入理解CSS，提升前端开发技能。无论你是初入前端的新人，还是想要深化CSS知识的开发者，都应该仔细研读这份文档，掌握CSS的核心概念和...
CSS 学习文档
08-07
【CSS学习文档】是一份专为初学者设计的综合学习资料，涵盖了HTML基础、CSS完全参考手册、DHTML、CSS与HTC技术以及JavaScript源码的全面解析。这些文档旨在帮助新手快速掌握网页设计和开发的基本技能，为构建动态、...
CSS学习（演示文档）
程序员
07-01 1075
d阿萨德 sad sad
非常好的CSS帮助文档，让你更好的学习
05-30
非常棒的CSS学习文档，让你更好的学习CSS，更自由的编写CSS，网页框架，非常好的CSS帮助文档，让你更好的学习。
css帮助文档
08-31
css帮助文档
CSS总结学习文档
未曾远去
07-23 450
CSS 为什么要使用CSS ？ 样式表能实现内容与样式的分离，方便团队开发 样式复用、方便网站的后期维护 页面的精确控制，实现精美、复杂页面 CSS的用途? 1、外观美化 2、布局、定位 语法： <head> <style type="text/css">...
css3学习文档
weixin_30834019的博客
08-26 873
什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然...
css学习-文档流
AngelQ
01-13 163
文档流（normal flow） -网页是一个多层的结构，一层摞着一层 -通过css可以分别为每一层来设置样式 -作为用户来讲只能看到最顶上一层 -这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是文档流中进行排列 -对于我们来说元素主要有两个状态 在文档流中，不在文档流中（脱离文档流） -元素在文档流中有什么特点 -块元素<div> -块元素会在页面中独占一行 -默认宽度是父元素的全部（会把父元素撑满） -默认高度是被内容撑开（...
Css样式文档
qq_41743601的博客
07-27 426
Css样式文档 文章目录Css样式文档一.border（边框）1.分别设置4个边框：2.使用1个border设置所有边框样式3.使用border-style设置边框线性3.使用border-width设置边框线性4.使用border-colore设置边框颜色5.圆角边框设置2.分别设置：3.简介写法设置4个不同得样式二、外边距设置分别设置：简写4个外边距注意的外边距设置外边距合并（非常重要)：三、内边距设置四、伪元素设置1.可设置的内容2.伪元素可以与 CSS 类结合使用：2.1、1个元素可以使用多个伪元素
CSS权威指南学习笔记--Chapter1 CSS和文档
Cherryuuuu
12-02 665
css
CSS学习（一）
最新发布
qq_69240236的博客
03-06 867
CSS（层叠样式表，Cascading Style Sheets）是一种用来描述HTML或XML（包括SVG等）文档的样式的语言。CSS描述了文档的样式，如字体、颜色、间距和布局等。通过将样式与文档分离，CSS使开发者可以更好地控制文档的外观和布局，同时也提高了文档的可维护性和可复用性。
CSS权威指南学习之路（一）--------CSS和文档
编程小渣渣的进阶之路
10-24 216
忙过了昏天黑地的加班生活，总算有机会把前两个月买的CSS权威指南拿出来学习了。接下来这个系列将是对自己学习的记录同时也是做一个分享，希望有用之人少走点弯路。 CSS（Cascading Style Sheets）全称是层叠样式表，主要用于对HTML语言进行渲染。CSS是W3C在1995年发布的一种正在进行的计划，她有着丰富的样式，易于使用，兼容多个界面，层叠规则从后往前覆盖，同时使文件更精简的特...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值