CSS样式,选择器

CSS引入样式规则

1. 行内样式:是通过标签的style属性来设置元素的样式

<a style="color: #f00; font-size: 30px;">测试</a>
行内样式通过标签的属性来控制样式，这样并没有做到结构与表现（HTML展示结构、CSS显示效果）相分离，所以一般很少使用

2. 内部样式(内嵌式):是将CSS代码集中写在HTML文档的< head>头部标签体中，并且使用< style>标签定义。

<!--方式2：内部样式
	background-color ： 表示背景色
-->
<style type="text/css">
	body{
		background-color: #ddd;
	}
</style>
内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为他不能充分发挥CSS代码的重用优势。

3. 外部样式:又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过< link>标签将样式连接到HTML文档中。

<!--方式3：外部样式
	rel="stylesheet" ,固定值，当前文件和引入文件的关系,rel是relationship的缩写
                          stylesheet是样式表
	type="text/css",  固定值，表示浏览器解析方式
	href ，表示css文件位置
		font-family 表示使用的字体系列，多个字体使用逗号分隔。例如：“字体1,字体2,字体3”，此时优先使用“字体1”，如果“字体1”系统不存在，再使用“字体2”，以此类推。
-->
<link rel="stylesheet" type="text/css" href="css/demo00.css"/>
链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标记链接多个CSS样式表。

选择器

1. 元素选择器:所有的HTML标记名都可以作为标记选择器

标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
----------------------------------------
h1{
	color: #F00;
	font-size: 50px;
}
<h1>测试</h1>

2. ID选择器:使用"#"进行标识,后面紧跟ID名称

  #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  ----------------------------------
  #demo1{
  	color:#0f0;
  }
  <h1 id="demo1">测试</h1>

3. 类选择器:使用"."进行标识,后面紧跟类名

  .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  ----------------------------------------
  .myClass{
  	font-size: 25px;
  }
  <h1 class="myClass">测试</h1>

4. 属性选择器:在标签后面使用中括号标记

  标签名[标签属性=’标签属性值’]{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  ------------------------------------------
  <style>
  	input[type="text"]{
  		background-color: yellow;
  	}
  	
  	input[type="password"]{
  		background-color: green;
  	}
  </style>

5. 包含选择器:两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。

父标签 后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 ---------------------------------
<style>
   	#d1 div{
   		color: red;
	}
</style>

6. 伪类选择器: 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。书写有顺序! 必须是 l v h a

    a:link {color: #FF0000}	/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */

CSS的样式

1. 边框和尺寸：border、width、height

<style type="text/css">
   	div{
   		border:1px solid #000;  /*1像素，实边，黑色*/
   		width:200px;
   		height:200px;
   	}
</style>

2. 转换：display

   选择器{display:属性值}
   常用的属性值：
   		inline：此元素将显示为行内元素（行内元素默认的display属性值）
   		block：此元素将显为块元素（块元素默认的display属性值）
   		none：此元素将被隐藏，不显示，也不占用页面空间。

3. 字体：color、font-size

   color：颜色，字体颜色

4. 背景色：background-color

   <ul style="background-color: #999;color: #FFF;">
   	<li>点击</li>
   	<li>点击</li>
   	<li style="background-color: #000;">点击</li>
   	<li>点击</li>
   </ul>

5. 布局：float、clear

   选择器{float:属性值;}
   	常用属性值：
   		left：元素向左浮动
   		right：元素向右浮动
   		none：元素不浮动（默认值）
   -------------------------
   选择器{clear:属性值;}
   	常用属性值：
   		left：不允许左侧有浮动元素（清除左侧浮动的影响）
   		right：不允许右侧有浮动元素（清除右侧浮动的影响）
   		both：同时清除左右两侧浮动的影响

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

1. 内边距：padding

   按照上右下左的方向设置内边距
   -----------------
   h1 {padding: 10px 0.25em 2ex 20%}

2. 单边内边距属性

  padding-top
  padding-right
  padding-bottom
  padding-left

3. 边框:border

   border-top-style
   border-right-style
   border-bottom-style
   border-bottom-style

4. 外边距

   margin-top
   mrgin-rigt
   margin-bottom
   margin-left

​