web前端day3-----合法颜色值，盒子模型，选择器创建三角形

本文链接：https://blog.csdn.net/OrdnAry/article/details/107365283

<!--CSS3:边框圆角/倒角 border-radius: 取值: 数字px 或者 百分比
画个圆: 设置一个宽高属性值一致的块级元素,添加边框属性border,再添加边框 圆角border-radius,值为宽高属性值的一半或者50%

合法颜色值:
1.英文单词: red,green,blue,pink,black,white,yellow
2.色光模式:rgb(0~255,0~255,0~255) 三原色 red green blue  2^8=256
		   rgb(0,0,0)黑色 rgb(255,255,255)白色
  色料模式: 青品黄黑
3.色光模式: #rrggbb  16进制 0~9 a~f 10
					 
			#ffffff  白色 #000000黑色
			#33ccee 简写 #3ce
补充: rgba(0~255,0~255,0~255,0~1) a代表透明度   1 完全不透明 0 完全透明
画三角形: 设置一个宽高属性为0的块级元素,添加边框属性border,设置边框颜色为完全透明或者背景色,单边定义颜色值

盒子模型: 元素在页面中实际上所占的尺寸
外边距margin+边框border+内边距padding+元素内容宽高属性


外边距margin:元素和元素之间的距离
取值: 数字px  百分比  auto自动:
	  4个值 上 右 下 左
	  3个值 上 左右  下
	  2个值 上下   左右
	  1个值 上下左右
auto固定用法:让块级元素水平居中时: 左右外边距设置为auto
注意:
1.外边距重合问题:相邻元素之间的间距,不是外边距之和,而是取外边距中最大值
2.外边距的溢出问题:父元素没有上边框,子元素上外边距溢出
解决外边距溢出方法:1.给父元素设置上边框(影响整个元素的高度)
				   2.给子元素前面添加一个空的table标签

内边距padding: 元素边框和元素内容之间的距离
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	p{
		width:100px;
		height:100px;
		border:1px solid rgb(0,0,0);
		background-color:blue;
		border-radius:/*100px或者50%*/0; /*圆角*/
		border-color: #c33c44;
		margin: 50px 50px;			
	}
	div{
		width:200px;
		height:200px;
		/*border:1px solid rgb(0,0,0);*/
		background-color:green;
		/*border-bottom-color:rgb(255,0,0);*/
		/*border-top-color:#00ff00;*/  /*三角形设置*/
		/*margin: 5px 10px 15px 20px;*/ 
		/*margin: 5px 10px 15px;*/
		/*margin: 5px 10px;*/
		/*margin: 5px auto;*/
		
	}
  </style>
 </head>
 <body>
 <!-- 圆形 -->
	<p></p>
 <!-- 三角形 -->
	<div>
	<table></table>
	<p></p>
	</div>
 </body>
</html>

在这里插入图片描述

<!--选择器: 定义页面哪些元素可以使用样式
四个基础选择器:
1.通用选择器: *{样式声明} 所有标签都可以使用
  p,h1~h6,body,ol,ul 自带外边距  样式初始化 *{margin:0,padding:0;}
  缺点: 执行效率低
2.元素选择器: 标签名称{样式声明} 定义(标签名称)的标签可以使用样式
  a标签 ul ol列表标签: 自带样式在开发过程中所有都不用
3.id选择器:  #id属性值{样式声明} 定义id属性值为(id属性值)的标签可以使用样式
  id属性  标签的唯一标识(专属样式)
4.类选择器:  .类型名{样式声明}   定义class属性值为(类型名)的标签可以使用
  class属性  标签类型属性(公共样式)
  可能存在多个不同标签使用相同的样式
  多个类选择器修饰同一个标签 在class="类型名1 类型名2" 
复杂选择器:
1.标签名称.类型名称{样式声明}
2.群组选择器: 选择器1,选择器2,选择器3...{样式声明}
  样式初始化: p,ol,ul,body,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
3.子代选择器:
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  a{text-decoration:none;}
  ul{list-style:none;}
  div.fk{
		width:100px;
		height:100px;
		border:1px solid black;
	}
	p#div1 {
			background-color:red
	}
		  .bgcolor{
			background-color:green
	}
		p{	
		margin:0;
	}
	</style>
 </head>
<body>
<div class="bgcolor fk"></div>
<div id="div1" class="fk"></div>
<p class="bgcolor fk"></p>
<a href="#">超链接a标签</a>
<ul>
	<li>列表第一个选项</li>
	<li>列表第二个选项</li>
</ul>
 </body>
</html>

在这里插入图片描述

<!--
3.子代选择器: 选择器1>选择器2{样式声明}
	选择器2是选择器1的直接子级元素 只有一层
4.后代选择器： 选择器1 选择器2{样式声明}
5.伪类选择器: 表示元素状态或者动态效果
  链接伪类:表示a标签状态  :link 未访问  :visited访问过
  动态伪类:表示用户和标签交互动态效果
  :hover 鼠标悬停时
  :focus 获取焦点时（input标签）
  :active 被激活时（a，button）
  :before  :after

选择器优先级: 
  元素选择器 权重 1
  类选择器	 权重 10
  伪类选择器 权重 10
  id选择器	 权重 100
  内联样式	 权重 1000
复杂选择器组成的基础选择器权重相加。数值大的优先级高
数值相同，后定义的属性值会覆盖先定义的属性值
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
  h1{
	width:80%;
	height:100px;
	background-color:green;
  }
	/*h1>p{color:red;}*/
	div>h1>p{
		  width:80%;
		  color:red;
		  background-color:blue;
	}
	a:link{
		  text-decoration:none;
	}
	a:visited{
		  color:red;
	}
	a:active{
		  color:yellow;
	}
	#wl{
		  background-color:blue;
	}
	#wl:hover{
		  background-color:red;
	}
	input{
		  width:200px;
		  height:40px;
	}
	input:focus{
		  width:100px;
		  height:20px;
		  border:0;
		  outline:0;
	}
	button{
		  background-color:red;
	}
	button:hover{
		  background-color:#eeeeee;
	}
	button:active{
		  background-color:yellow;
	}
  </style>

  <title>Document</title>
 </head>
 <body>
  <div>
  <p>div里的P标签</p>
  <h1>
	<p>div中h1里的P标签</p>
  </h1>
  </div>
  <p id="wl">div外的p标签</p>
  <a href="http://www.tmooc.cn">达内教学</a>
  <input type="text"><br/>
  <button>普通按钮</button>
 </body>
</html>

在这里插入图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
   <style>
   div{
		width:0px;
		height:0px;
		border:100px solid rgb(0,0,0,0);
		border-bottom-color:#00ff00;  /*三角形设置*/
		border-bottom-width:100px;
	}
   p{
		width:0px;
		height:0px;
		border:solid rgb(0,0,0,0);
		border-width:200px 100px 300px 500px;
		border-bottom-color:#00ff00;  /*三角形设置*/
	} </style>
 </head>
 <body>
  <p></p>
  <div></div>
 </body>
</html>