CSS基础知识

CSS

概述：层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术

1.定义: css 是层叠样式表

2.作用: css 美化网页技术

一. CSS的主要优势

1. 提高页面浏览速度
2. 好维护 好扩展
3. 强大的字体控制和排版能力
4. 更好的控制页面布局

二. css 的样式语法

选择器: 规则可作用于HTML文档中哪个或者哪些元素

css的语法:

​ 选择器{ 样式1:样式值1;样式2:样式值2;样式3:样式值3 …}

​ 1.一个属性/值对组成一个声明，属性和值之间用冒号（:）分隔；

​ 2. 如果属性值中包含了空格，那么该值就必须用双引号（""）括起来

三. css样式规则的位置

1.外部样式 (推荐使用 重点 )

css 是个单独的文件 使用它的样式需要 css的样式的引入 (类似java导包)

	link   css引入 文件的标签 
	rel    引入类型    stylesheet css 样式 
	href   引入文件的 资源路径 
			
例：	<link rel="stylesheet" href="../css/a.css" />

2.嵌入式样式表 （简单的demo可用）

html内部可有一个style标签 在这里写css 样式 (类似java内部类)

			    <style>
				h1{
					color: skyblue;
				}
				</style>

3.内联样式 (不推荐使用 代码修改麻烦 )

在标签中使用css样式 (类似java 匿名类)

<!--可以在行间 写 css 代码 -->
<h2 style="color: blue;"> 天气冷 外面 冻死了好多人 </h2>

四. css的选择器

1.元素选择器( 基本选择器)

概述：作用是整个页面的 指定的元素

语法: 元素{样式1:样式值1,...}
			    p{
		  	      /* 字体颜色 */
		  	      color: red;
				}

2.类选择器( 基本选择器)

概述：把某一个样式应用到不同的HTML元素上

可以采用类选择器来定义，然后在不同标签中应用它们
	语法: 
	方式1:  .类名{样式1:样式值1,...} 如果标签需要样式 使用 class 来设置 
	方式2: 元素.类名 { 属性: 值; }
	/* 类选择器 */
	.box{
		color: green;
	}

3.id选择器( 基本选择器)

概述：ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用

	#id{属性: 值;}  一个页面只有一个id 
	#box01{
	color: #FFFF00;
	}

4.后代选择器（包含选择器）

概述：所有这个标签的 后代元素也有这个样式

语法: 父标签 子标签 {属性:值}
div span{
	color: red;
}

5.子代选择器（包含选择器）

概述：这个标签的 子元素有这个样式

 语法: 父标签 > 子标签 {属性:值}
div > span{
	color: red;
}

6.组合选择器（包含选择器）

概述：多个标签 都有这个样样式

语法  标签1,标签2{属性:值}
div,p{
	color: yellow;
}

7.属性选择器（包含选择器）

语法: [attribute=value] 选择 attribute="value" 的所有元素

五. 基本样式

1.文本样式

         p{	
			/*字体颜色 */
			color: red;
             
			/*字体大小 */
			font-size: 20px;
			
			/*字体 名称  设置  */
			font-family:"bradley hand itc";
			
			/* 字体风格   
			 normal 普通    italic 斜体 
			 * */
			font-style:italic; 
			
			/*字体 的粗细 */
			font-weight:70px;
			
			/*字体高度设置  */
			line-height: 40px;
			
			/*字体间隔 */
			letter-spacing: 20px;
			
			/*字符 装饰  
			 overline  在字体上面 
			 underline  下面 
			 * */
			text-decoration: underline;
             
             /*文本对齐 */
			text-align: center;
		}

2.背景样式

		  /* 背景颜色  */
           background-color: green;
           /* 给背景图片  */
           background-image: url(../img/hengshan.jpg);
           
           /*图片是否 重复的设置 
            repeat 是否重复   no-repeat  不重复 
              			    repeat-x   x轴重复
              			    repeat-y   y轴重复
            * */
          background-repeat:no-repeat ;
          /*
            position-x 可以移动 图片的x位置 
            position-y 可以移动 y的位置 
           * */
          background-position-x:100px ;
          background-position-y:200px ;

3.list样式(列表样式)

		#list{	
			/*列表样式   
			  none 不要样式 
			  decimal  数字 
			  circle   空心圆
			 * */
			list-style-type: none;
			
			/* 列表样式图片 */
			/*list-style-image: url(../img/xj.png);*/
			
			/* 列表 的 位置  */
			list-style-position: outside;
			/*去除内边距*/
			padding-left: 0px;
			
		}

4.定位属性

概述：定位的定义 : 在网页 元素排版

position: relative | absolute | static | fixed

1.static 	没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级
2.relative  不脱离文档流，参考自身静态位置,通过 top,bottom,left,right 定位，
  			并且可以通过z-index进行层次分级
3.absolute  脱离文档流，通过 top,bottom,left,right 定位。
			选取其最近的父级定位元素，当父级 position 为 static 时，
			absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
			如果父容器有定位 以最近的父容器进行定位
4.fixed 	固定定位，这里他所固定的对象是可视窗口而并非是body或是父级元素			

5.盒子模型（box model）

margin属性（外边距）:   	margin-top, margin-bottom, margin-left, margin-right 
border属性（边框）:   	 border-color,  border-style, border-width, border-top… 
padding属性（内边距）:  	padding-top, padding-bottom, padding-left, padding-right
content属性（内容）:  
Box model：
背景包括：padding + content
宽度和高度指的是content的宽度和高度

6.布局属性

概述：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

float	漂浮			 none | left |right 
clear	是否允许漂浮	  none | left |right | both 
display	能否显示	   none |block
visibility	可见性	    inherit | visible | hidden 
注意：display:为None时，其他元素可以占据该元素的位置
	 Visibility: 为hidden时，其他元素不能占据该元素的位置

	 display : 
		  inline  块标签不支持换行  不支持高宽(变成了内联标签)
		  block   内联标签支持高宽  支持换行