css基本属性

css和html的结合方式

行内样式

内部样式【内嵌样式】

		<style type="text/css">

			选择器

		</style>

外部样式

	【连接样式】

		<link href="外部css文件路径" type="text/css" rel="stylesheet" />

		type：当前文件的类型，格式：大类型/小类型

			    text/css:css

			    text/javascript:javascript

			    image/png:png图片

		rel="stylesheet"：rel===>relation关系，

				指的是加载的外部的css文件和当前html文件之间的关系，

                  	  		css是一个样式表，主要是为了给html设置样式

	【导入样式】		

		<style>

			@import url("外部css文件路径")；

		</style>

css选择器

通配符选择器

	*{}：给当前html文件中所有的html标签都会设置为统一的样式

		使用场景：一般统一设置padding【内边距】和margin【外边距】

元素选择器

	标签名称{}：只对指定类型的标签设置统一的样式

id选择器

	id属性的值{}

class选择器

	.class属性的值

优先级：id选择器【权重：100】  > class选择器【权重：10】 > 

	        元素选择器【权重：1】 > 通配符选择器

包含选择器

	先辈选择器   后辈选择器{ }，包含父子标签

	父选择器  > 子选择器{ } 

兄弟选择器

	选择器1 + 选择器2：只匹配指定标签后面的一个兄弟标签

	选择器1 + 选择器2：只匹配指定标签后面的一个兄弟标签

伪类选择器

	选择器：hover{ }，鼠标悬浮设置

	选择器：before/after，添加头部/尾部

	选择器：first-letter{ }，设置第一个字符

	选择器：first-line{ }，设置第一行

结构选择器

	选择器：first-child{ }，设置匹配到所有标签中的第一个

	选择器：last-child{ }，设置匹配到的所有标签中的最后一个

	选择器：nth-child ( n ) { }，设置顺序匹配到的第n个标签 

	选择器：nth-last-child ( n ) { }，设置倒序匹配到的第n个标签 

	选择器：empty{ }，匹配文本内容为空的标签 

	选择器：not ( 选择器 ){ }，设置除指定标签之外的其他标签 

属性选择器

	选择器[ 属性 ]{ }，设置具有指定属性的标签

	选择器[ 属性=值 ]{ }，设置指定属性为指定值的标签

组合选择器

	选择器1，选择器2，选择器3......{ }，设置所有选择器匹配到的标签

权重

行内样式的权重：1000

id选择器的权重：100

class选择器的权重：10

标签名称选择器的权重：1

包含或者组合选择器的权重：基本选择器的权重之和

css的属性

字体属性

	font-family：设置字体类型

	font-size：设置字体大小

			px：表示像素，与分辨率有关，表达字体大小，

				但是，缩放的时候不建议使用

			em：自动适应尺寸，方便字体的放大和缩小，	1em = 16px

	font-style：设置是否倾斜

			normal正常，italic意大利体，oblique斜体

	font-weight：设置字体粗细，取值范围为100~900

			normal，bold粗体，bolder加粗体，lighter细体

文本属性

	text-decoration：设置文字的装饰效果

			none正常显示，underliine下划线，line-throufh删除线，

			overline顶线

	text-indent：段落缩进，中文中常用2em

	text-align：对齐方式

			left左对齐( 默认 )，right右对齐，center居中对齐，justify两端对齐

	letter-spacing：设置单词内部的字母间距

	word-spacing：设置单词之间的间距

	text-transform：变化，大小写转换

			none，capitalize每个单词的首字母大写，uppercase大写

			lowercase小写

	direction：文本方向( 段落反向 )

			ltr从左到右( 默认 )，rtl，从右到左

	text-shadow：设置文本阴影，参数：水平阴影   垂直阴影  模糊距离   颜色

	word-wrap设置文字换行【允许对长单词进行拆分，并换行到下一行】

				none，break-word根据单词换行

	overflow：设置当文本溢出包含元素的时候需要做的操作

			hidden：隐藏，内容会被修剪，并且内容不可见

			scroll：内容会被修剪，但是如果超出标签的范围，则出现滚动条

			auto：自适应，根据情况而定

			visible：默认值，内容不会被修剪，会呈现在元素框外面

	cursor：设置游标的样式

			default:默认样式【箭头】

			auto：默认，浏览器的默认的样式s

			crosshair:十字线

			pointer：一只手

			move：指示某个对象可以被移动

			text；文本

			wait：指示程序正在忙【一只表或者沙漏】

			help：可用的帮助【一个问号或者一个气球】

盒子属性

	边框属性

		border，设置边框，参数：宽度   样式   颜色

				border-top，border-bottom，border-left，border-right

		border-width：边框宽度

		border-style：边框样式

				dotted点画线，dashed虚线，solid实线，double双线

		border-color：边框颜色

		border-radius：边框削圆角

		同时设置四个边框：选择器{ 属性：值( 上 )   值( 下 )   值( 左 )   值( 右 ) }	

	内边距：一个元素内部的文本距离该元素边界的距离

		padding：内边距，参数为距离

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

	外边距：标签之间的距离，子标签相对于父标签的边距被称为外边距

		margin：外边距，子标签相对于父标签的边距

			margin-left，margin-right，margin-top，margin-bottom

浮动属性

	float：设置浮动效果

		left向左浮动，right向右浮动，clear清除浮动，取值一般为right或者left

定位属性

	position设置定位

		absolute：绝对定位，参照物为父标签，

		relative：相对定位，参照物为标签本身

		fixed：固定定位，参照物为窗口

尺寸属性

	width：设置元素的高度

	height：设置元素的高度

	line-height：【注意：如果行高和标签的高度相等，

				则表示该文本在标签中在垂直方向上居中显示】

	max/min-height：设置元素的最大或者最小高度

	max/min-width：设置元素的最大或者最小宽度

				注意：可以使用px或者百分比，还可以使用auto

				说明：max/min-xxx使用较少，一般情况下，会让文本自适应

背景属性

	background：背景色/图

	background-color：背景色

	background-image：背景图

	background-repeat：背景样式平铺样式

					  repeat：沿水平和垂直两个方向平铺，默认值

					  no-repeat：不平铺，只显示一次

					  repeat-x：只沿水平方向平铺

				      	  repeat-y：只沿垂直方向平铺

	background-position：背景图像的位置

						 left、right、top、bottom、center

	background-attachment：设置背景图是否随着网页内容一起滚动

				scroll：会随着滚动，默认值

				fixed：不随着滚动

列表属性

	list-style：设置项目符号的样式，参数：图片   位置

	list-style：none

	list-style-image：设置项目符号的图片

	list-style-position：设置项目符号的位置

			inside：里面

			outside：外面

连接属性

链接的四种状态：

	link：普通的，未被访问的状态

	visited：用户已访问过的链接

	hover：鼠标指针停留在链接的上方

	active：链接被点击的时刻

透明度属性

	opacity：设置透明度，能够设置的值从 0.0 到 1.0，值越小，越透明

显示属性

display：标签的显示状态

		block：块级标签，

				特点：可以独占一行 ，可以设置宽高以及内外边距，

					    如果不设置宽，默认和父标签的宽相等，

					    高度是随着内容自适应的，例如：div  p  li  h1

	       inline：行内标签，

				特点：不会自动换行，宽高随着内容自适应，

					    设置宽高和内外边距属性无效，例如：b  a   span，

					    设置这个属性，可以将一个块级元素转换成行内元素，	

				       	    那么这个块级元素将不能再设置宽高以及内外边距

	      inline-block：行内块级标签，

			      特点：不但具有block元素可以设置宽高和内外边距属性的

					  特性，又保持了inline元素不换行的特性

	      none：隐藏状态，

			   特点：将元素设置为none的时候既不会占据空间，也无法显示，

				       相当于该元素不存在;该属性可以用来改善重排与重绘

形变属性：transform

	拉伸：

		scale ( v )，宽高同时拉伸，v大于1，表示放大，v在0~1之间，表示缩小

		scaleX ( v )，只拉伸宽

		scaleY ( v )，只拉伸高

	设置旋转点：

		transform-origin：center left；

	旋转：

		rotate ( ndeg )：degree，表示角度，默认沿着z轴旋转

			rotateX ( ndeg )

			 rotateY( ndeg )

			 rotateZ( ndeg )

			 n大于0，则顺时针旋转

			 n小于0，则逆时针旋转

过渡属性：transition

	all ( 过渡属性 )    5s ( 过渡时间 ) 

	2s ( 延迟时间，一般不写 )   linear ( 匀速过渡 )

	确定哪些属性需要过渡，如果都需要直接赋值all

	如果部分过渡，则书写指定的属性，如：transform

动画属性：animation

	动画是使元素从一种样式逐渐变化为另一种样式的效果。

	可以改变任意多的样式任意多的次数。

	使用百分比规定变化发生的时间，或用关键词 "from" 和 "to"，

	等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

	动画名称 ,自定义,但是，该动画需要手动实现

	动画执行一次的时间  ，单位为秒

	动画执行的次数，正数表示指定的次数，默认为1次，用infinite表示无限次

	动画执行的形式：

	 		线性动画：linear

	 		由快到慢：ease

	<style>

		div{

			animation：ani 3s infinite linear；

		}

		@keyframes ani{

			from{

			}

			to{

			}

		}

	<style>