CSS样式表与选择器(一)

CSS样式表与选择器(一)

在CSS中,样式表有以下三种:
1、行内样式表(内联样式表):比如
  <div style="width:100px;height:100px;background:red"></div>
说明：
  通过style="" 属性在标签内部直接定义的样式;在哪个标签上定义的style属性，改变的就是哪个标签的样式;行内样式表的作用域,只针对当前标签起作用，行内样式的写法，结构和写法没有分离，耦合性非常高，不易于修改;不建议使用(在特别需要的情况下使用)。比如布局中的三大属性:width：100px(宽度),height:100px(高度),background:red(背景颜色)。
2、内部样式表

<style type="text/css">css语句</style>

说明:
	  1、建议创建在head区域内;
	  2、type="text/css"定义文档类型为CSS,此属性可写可不写
      3、作用域:针对当前页面所有的标签起作用
      4、内部样式表:使结构和表现相分离,但是分离的不够彻底。
      5、耦合性相对较低
      6、一般在代码比较少的时候或者写案例的时候使用。
 类型选择器:
 	  尖角号里面的第一个单词，就可以直接当作选择器使用,称之为类型选择器或者元素选择器。	`

		div{
			 width:100px;
			 height:100px;
			 background:yellow;
		  }

3、外部样式表是一个独立的css文件,直接创建一个CSS文件,让html文件和 CSS文件直接连接
连接方法一、

<link type="text/css" rel="stylesheet" href="">
	注:type="text/css" 同内部样式表一个意思(可写可不写)
	   rel="stylesheet" 关联样式表(必须要写的)
	   rel的全拼是:relation 关系;关联
	   stylesheet 是样式表的意思
	   href="添加目标的文件路径"

说明：
  1、建议把link写在head区域内
  2、作用域:是可以用于多个页面的;
  3、实现了结构和表现的相互分离,耦合性极低,易于修改;
连接方法二、

	<style>
			@import url(...)
	</style>
	注:url()是用来添加目标文件路径
		@import url(css/style.css)

说明:
  1、@import的连接方式是CSS提供的,要写在style标签里
  2、只能链接CSS文件
  3、而且存在兼容性问题

CSS选择器(一)

选择器:
		1、类型选择器(元素选择器)
		语法:
			元素名称{属性:属性值}
			比如:span a div ...
		使用场景:
		  1、当想统一设置某类元素的样式时;
		  2、当改变某一类标签的默认样式时

		2、id选择器
		语法：
			#id名{属性:属性值}
		说明:
			要先给元素添加id属性以及属性值,属性值就是指的id名;
			比如:
				<div id="box"></div> （#box）
		注:
			1、id选择器要加#;
			2、唯一性,一个元素只能有一个唯一的id属性以及属性值
			3、主要用作外围结构
	  3、class选择器(类选择器)
	  	语法:
	  	.class名{属性:属性值}
	  		要给元素添加class属性以及属性值,
	  		如:<div class="box"></box>（.box）				
		注:
			可以理解为每个名字一样,每个人都可以拥有多个名字,并且和别人的名字一样的,具有相同样式的元素可以定义相同的class名字;
	  4、群组选择器(并列选择器)
	 	 语法:
	 	 	选择器:选择器1,选择器2,选择器3...{属性:属性值}
	 	 作用:提取同分类项:
	 	 	把具有相同属性的选择器,用逗号隔开的形式组成一组,一起添加相同的属性;
	  5、包含选择器:
	 	 语法:选择器1  选择器2 ....选择器n{属性;属性值}
	 	 说明:
	 	 	1、通过祖先级元素找子元素
	 	 	2、选择器之间用空格隔开
	 	 	3、选择器1一定时选择器2的祖先级元素,选择器2一定时选择器3的祖先元素...
	  6、通配符选择器:
	  		语法:
	 			*{属性:属性值}
	 			通配符(*)代表所有的标签