CSS

一、CSS引入方式
二、CSS属性操作

CSS

层叠样式表

CSS引入方式

1.行内式

与html合并在一起的的方式

<p style="color:red ; background:yellow">hello</p>

2.嵌入式

<head>
	<style>
		p{
			color:red
		}
	</style>	
</head>

3.链接式

将CSS代码写入文件Stylesheet，导入文件使用

#a.css文件：
p{
			color:red
		}
#html文件：
<head>
	<link rel="stylesheet" href="a.css"/>
</head>

4.导入式

导入顺序：先加载后链接，导致样式延迟显示

	#a.css文件：
	p{
				color:red
			}
	#html文件：
	<head>
	<style>
		@import "a.css";
	</style>	
</head>

css选择器

查找标签

1.基本选择器

标签选择器 
	[标签]{
	}
id选择器 
	#[id值]{
	}
class选择器 
	.[class值]{
	}
统配选择器 
	*{
		margin:0
	}

2.组合选择器

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

<style>
	.outer p{  /* 后代选择 */
	}
	
	.p1,.div2{  /* 多元素选择 */
	}
	
	.outer>p{  /* 子代选择 */
	}
	
	.outer+p{  /* 毗邻选择，向下紧挨的p被选择 */
	}
	
	.outer～p{  /* 兄弟选择 */
	}
</style>

<div class="outer">
	<div class="div1">
		<p>p</p>
	</div>
	<p>pp</p>
</div>
<p class="p1">ppp</p>
<div class="div2">div</div>

3.属性选择器

自定义键值对，作为属性

<style>
	[po]{
	}
	
	[po="p2"]{
	}
	
	div[po="p2"]{  /*注意不要加空格*/
	}
	
	.c1[po="p2"]{
	}
</style>

<div po="p1" class="c1">p1</div>
<div po="p2" class="c1">p2</div>

4.伪类

anchor伪类：专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类控制只可以控制标签的后代标签。

5.选择器的优先级

子标签继承父标签的样式
同一种选择器，按顺序靠后的样式显示
不同的选择器：sytle(行内式) [1000]> #(id)[100] > .(class)[10] > 标签[1]
组合使用不同的选择器：通过优先级数字加和确定优先级
!imprtant优先级高于一切

css属性操作

操作标签

CSS文本操作

1.文本颜色

<style>
	p{
		/*设置文字颜色*/
		color: red;  /* 颜色的名字 */
		color: RGB(0,255,0);  /* RGB值 */
		color: #ffffff;  /* 十六进制值 */
		
		/*设置文字透明度*/
		color: #RGBA(255,0,0,0.3);  /* 0.3透明度 */
		opacity: 0.3; ／* 单独调节透明度 *／
	}
</style>

<p>hello</p>

2.水平对齐方式

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

	<style>
		div{
			text-align: center;	 /* 文本水平居中对齐 */
			text-align: jusetify;  /* 文本左右对齐 */
		}
	</style>
	
	<div>hello</div>

3.其他属性

font-size: 10px;
line-height: 200px; 文本行高，文本显示在上下居中位置
text-decoration: none; 设置或删除文本的装饰，主要是用来删除链接的下划线
font-family: 'Lucida Bright' 字体
font-weight: lighter/bold/border 
frot-style: oblique
text-indent: 150px 首行缩进150px
letter-spacing: 10px 字母间距
word-spacing: 20px 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

3.背景属性background

background-color
background-image
background-repeat
background-position

	<style>
		div{
				background-color: red;
				background-image: url("abc.jpg");
				background-repeat: repeat;
				background-repeat: no-repeat;
				background-position: center center; /* 位置水平高低居中 */
				background-position: right top（20px 20px）;
			
			background: url("abc.jpg") no-repeat center center; ／*任意顺序都可以识别*／
			}
	</style>
	
	<div>hello</div>

4.边框border

border-width
border-style (required)
border-color

	<style>
		div{
			 400px;
			height: 200px;
			
			border- 5px;
			border-style: dashed;
			border-color: red;
			border-right: none;
			
			/*简写*/
			border: 3px soild red;
		}
	</style>
	
	<div>hello</div>

5.列表

ul>li.item*3 :速写

<style>
	div{
		list-style-type: no;
		list-style-type: image;
		list-style-position: center;
		
		/*简写*/
	   list-style: none;
	}
</style>

<ul>
	<li class="item">12</li>
	<li class="item">23</li>
	<li class="item">34</li>
</ul>

6.display

none
block
inline
inline-block

	<style>
		div{
			display: none;
		}
		span{ /*内联转块级*/
			display: block;
		}
		button{ /*块级转内联*/
			display: inline;
		}
		div{ /*兼块级和内联*/
			display: inline-block;
		}
	</style>
	
	<div>hello</div>
	<span>asdsd</span
	<button></button>

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

7.margine和padding

盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

8.float

2、清除浮动(推荐)。

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

8.position

relative
参照物是元素之前文档流中的位置
元素不脱离文档流

1.relative 相对定位。

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

2.absolute 绝对定位。

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

3.fixed

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。