Vue使用之前端基本基础（二）

CSS

• css指层叠样式表，使用来定义如何显示HTML元素的。
• css主要由选择器和一条或多条声明构成。
• 选择器通常是指需要改变的样式的HTML元素， 声明就是有一条属性和一个值组成。
• 插入CSS的方法：

  • 外部样式表： 当被多页面应用时的选择。<link></link>

  • 内部样式表：当被单个文档需要时的选择<style></style>

  • 内联样式： 直接在标签中写样式，要慎用。

    • 多重样式（继承性）优先级
    • 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式（如果外部样式放在内部样式后面，会被外部样式覆盖）
    • 优先级仅由选择器组成的匹配规则决定。
    • 优先级顺序
    • 通用选择器（*）< 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式

  • css 优先级法则

    • 选择器都有一个权值，权值越大越优先
    • 权值相等，后出现的样式要由于先出现的样式
    • 被继承的css样式要差于要继承的样式

• 选择器

• id 选择器可以为特定的HTML元素指定特定的样式。
• class选择器用于描述一组元素的样式，并且可以在多个元素中使用。
• 分组选择器（在样式表中有很多具有相同样式的元素）

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}
# 上边的和下边是一个道理
h1,h2,p					# 分组选择器
{
    color:green;
}

• 嵌套选择器

- p     # 为所有的p元素指定一个样式
{
    color:blue;
    text-align:center;
}
.marked		# 为所有class="marked"的元素制定一个样式
{
    background-color:red;
}
.marked p		# 为所有 class="marked" 元素内的 p 元素指定一个样式。
{
    color:white;
}
p.marked{		# 为所有 class="marked" 的 p 元素指定一个样式。
    text-decoration:underline;
}

• css各种样式

 `body { 
 		# 1.0 背景
 		 background-color: #000;      # 颜色
         background-image:dh;		  # 图片（平铺显示）
         background-repeat:repeat-x;  # 水平方向平铺
		 background-attachment:fixed; # 背景图像是否固定或者随着页面的其余部分滚动
		 background-position:right top; # 改变图像在背景中的位置
	   # 2.0 文本
	     text-align:center;          # 文本的对齐
	     text-decoration: 			 # 设置或者删除文本线
	     vertical-align:bottom;      # 垂直对齐
	     }
	   # 3.0 链接
	   	  a:link {color:#000000;}    # 未访问链接
		  a:visited {color:#00FF00;} # 已访问链接 
		  a:hover {color:#FF00FF;}   # 鼠标移动到链接上
		  a:active {color:#0000FF;}  # 鼠标点击时  
		# 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited 后面 a:active 必须跟在 a:hover后面 
	# 3.0 边框 （指定边框使用border属性）
	   table , th, td
	   { 
	    border: 1px solid black;
	    border-collapse:collapse;   # 折叠边框（单边框）
	   }
	 

• 盒子模型

 - div {
 - 		padding:25px;					# 清除内容组偶位的区域，内边距是透明的。
		border:25px solid green;		# 围绕在内边距和内容外的边框。  上边框是 dotted，右边框是 solid、底边框是 double、左边框是 dashed
  		margin:25px;					# 外边框。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
  		float:right;					# 浮动样式
  		
 }

未完，后续实例