web前端基础——CSS入门

web前端基础——CSS入门

1.css的引入方式

内部样式：

<style></style>

直接在style里面写
内联样式：

<div style="color:red"></div>

外部样式表

<link rel="stylesheet" type="text/css" href="css文件名.css"/>

2.css选择器

id选择器： #id名{}

<p id="para1">Hello World!</p>

#para1
{
	text-align:center;
	color:red;
} 

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器 .class名{}

<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

p.center
{
	text-align:center;
}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

通配符选择器：*{}

*会匹配所有的元素，因此针对所有元素的设置可以使用 * 来完成，用的最多的例子如下:

*{margin:0px; padding:0px;}

这里是设置所有元素的外边距margin和内边距padding都为0。

链接伪类选择器：

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动时链接
:active 选定的链接

在定义这些状态时，有一个顺序 l v h a

结构（位置）伪类选择器：

:first-child 选取属于父元素的首个子元素的指定选择器
:last-child 选区属于父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配父元素的第n个子元素，不论元素类型even偶数odd奇数，n从0开始
:nth-last-child(n) 选择器匹配属于其元素的第n个子元素的每个元素，无论类型，从最后一个子元素开始技术
n可以是数字、关键字、公式
匹配第一个 < p > 元素：

p:first-child
{
    color:blue;
}

匹配所有< p > 元素中的第一个 < i > 元素：

p i:first-child
{
    color:blue;
}

匹配所有作为第一个子元素的 < p > 元素中的所有 < i > 元素：

p:first-child i
{
    color:blue;
}

目标伪类选择器：

	:target		当前选定的元素

:target
{
	border: 2px solid #D4D4D4;
	background-color: #e5eecc;
}

3.字体式样式

    font-size:字号大小
	                px 像素
	                em 相当于当前对象内文本的字体尺寸
    font-family:字体
    CSS Unicode：字体
    font-weight:
                     normal:400
	                 bold:700
	                 lighter:
	                 100~900:
    font-style:字体风格：
	                  normal:正常
	                  italic：斜体
	                  oblique：倾斜
    字体综合设定：font:font-style font-weight font-size/line-height font-family

4.外观属性

color文本颜色：
	      预定颜色：词汇量
	      十六进制：#ff0000......
	      RGB：rgb(255,0,0)  /  rgb(100%,0%,0%)
line-height行间距：
	     设置行与行之间的距离，也就是垂直高度，也就是行高
text-align水平对齐方式：
	     left/right/center
text-indent首行缩进：
	     推荐使用em字符宽度的倍数
	     1em就是一个汉字的宽度
          letter-sapcing字间距
          word-spacing单词间距
颜色半透明：
		  rgba(0,0,0,0.3)
		  a:alpha就是透明度
文字阴影：
	text-shadow:水平位置 垂直位置 迷糊的距离 阴影的颜色

5.标签显示模式：

块级元素：block-level
行内元素：inline-level(宽高无效)里面不能放块级元素
行内块元素：inline-block行内元素可以进行宽高设置
显示模式的转换：
	display:inline/block/inline-block

6.复合选择器：

交集选择器：
	交际选择器由两个选择器构成，第一个为标签选择器，第二个为class选择器，之间不能有空格
	<p class="person"></p>
	p.Person{color:red}
并集选择器：
	相同属性的用并集选择器，各个选择器之间用逗号隔开
后代选择器：
	父标签 后代标签{}
	选择父标签下的后代标签
子元素选择器：
	父元素>子元素{}
	选择父元素下的子元素（不包括孙子元素）
属性选择器：
	E[attr]***			存在属性
	E[attr=val]***		属性值等于val
	E[attr*=val]***		属性值包含val
	E[attr^=val]***		属性值以val开头
	E[attr$=val]***		属性值以val结尾
伪元素选择器：
	E::first-letter文本的第一个单词或字
	E::first-line文本的第一行
	E::selection可改变选中文本的样式
	
	before和after无论如何都要加  content=" "
	E::before在E元素的开始位置创建一个元素
	E::after在E元素的结束位置创建一个元素

7.css背景

background-color
background-image: url('图片路径');
background-repeat: 
	repeat-x(横向平铺) 
	repeat-y(纵向平铺) 
	repeat（默认水平＋垂直平铺）
	no-repeat（不平铺）
background-position: 
	length || length
	position || position
	参数：
		默认是 left || top
		length：百分数
		position：top | center | bottom | left | right | center
background-attachment：背景附着		（scroll | fixed）
	scroll背景图像是随着内容滚动的
	fixed：背景图像是固定的

背景简写：

		{background: transparent url() repeat scroll 50% 0;}

当使用简写属性时，属性值的顺序为：background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景透明：

		{background：rgba(0,0,0,0.3)}

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A(alpha)：透明度。取值0~1之间
背景半透明指的是盒子背景半透明，不影响内容

背景缩放
	background-size: width height;
	background-size: cover(会自动调整缩放比例，保证图片始终充满背景区域，溢出的部分隐藏)
	background-size: contain(自动调整比例，保证图片完整显示在背景区域)
多背景图片：
	background-image: url(1.jpg),url(2.jpg),url(3.jpg)
	前面的背景图会覆盖后面的背景图
凹凸文字效果：
	就是写多个文字阴影

8.CSS三大特性

层叠性：多种样式的叠加，长江后浪推前浪，前浪死在沙滩上
继承性：text font line color 可以继承
优先级：通配0  类(伪类)10  id100  行内1000  !important无穷大
		div{
			color: red!important;
		}
		继承权重为0

9.盒子模型

border边框：
	border:border-width || border-style || border-color
	style:none（无） || solid（单实线） || dashed（虚线） ||dotted（点线） || double（双实线）
	可以有top/bottom/right/left
	圆角边框：
		border-radius: 左上角 右上角 右下角 左下角

表格细线合并：

table {
		border-collapse:collapse;		/*合并*/
		}

padding内边距：
	内容和边框的距离
margin外边距：
	外边距实现盒子居中：
		必须是块元素，必须有宽度
		给左右外边距为auto即可
		margin: 0 auto		/*水平居中*/
文字水平居中和盒子水平居中：
	文字：text-align:center
	盒子：margin:0 auto
CSS3盒模型：
	新增属性box-sizing来指定盒模型
	属性值为：content-box | border-box(padding和margin是包含在width和height里面的)
盒子阴影：
	box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 内/外阴影（inside）默认是外阴影

10.浮动

normal flow普通流（标准流、文档流）
浮动就是脱离文档流，移动到其父元素的指定位置
float: left/right/none(默认)
子盒子的浮动不会压着父盒子的margin和padding
如果浮动元素的上一个是标准流，则下一个就是左对齐
如果有一个浮动的话，就要把所有的都浮动，好布局
浮动的特性：
	块级元素添加浮动之后，具有行内块的特性
	行内元素浮动后具有行内块特性
清除浮动：
	其实不是清除浮动，而是清除浮动产生的影响
	解决父级元素因为子元素浮动而引起高度为0的问题
	清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，CSS中，clear属性清除浮动，语法格式如下
		选择器{clear:属性值}
	清除浮动的方法：
		1.额外标签法
			在浮动盒子的后面添加一个空盒子

<div class="clear"></div>

.clear{clear:both /*清除浮动*/}

		2.父级添加overflow属性方法
			给父级标签添加overflow添加hidden/auto/scroll都可以实现
			
        3.使用after伪元素清除浮动

.clearfix::after{
					content:" . ";
					display:block;
					clear:both;
					height:0;
					visibility:hidden;		/*隐藏盒子*/
				}

		4.使用before和after双伪元素清除浮动

.clearfix::before,.clearfix::after{
					content:"";
					display:table;
				}
				.clearfix{
					clear:both;
				}

11.定位（position）

元素的定位属性主要包括定位模式和边偏移两部分
	边偏移：
		top(相对于父元素上边线的距离)，left，right，bottom
	定位模式：
		static：自动定位
			静态定位：对于边偏移无效，一般用来清除定位
		relative：相对定位，相对于文档流的位置进行定位
			每次移动的位置是相对自己的左上角移动的
			不脱离标准流
		absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
			每次移动的位置是相对于父元素
			绝对定位是完全脱离标准流的
			如果父级元素没有定位，则以浏览器（document文档）为准对齐
			为了不让孩子乱跑，就会给父级元素加定位（绝对相对都行）
			绝对定位水平垂直居中：
				加了绝对定位的盒子margin左右auto无效
				如果想要居中的话，首先left50%，然后走自己的一半的值就好了
		fixed：固定定位，相对于浏览器窗口进行定位
			是绝对定位的一种特殊形式
			与父级没有任何关系，只认浏览器
	叠放次序(z-index)：
		当多个元素同时设置定位时，可能发生重叠
		值越大越上（先显示）
		只有相对定位、绝对定位、固定定位有这个属性，其他的都没有
		如果值相同，则后来者居上
		数字不能加单位
	定位模式转换：
		添加了绝对定位和固定定位之后，元素模式也会发生改变，变成行内块模式
		行内元素如果添加了绝对定位或者固定定位之后，可以不用转换模式，直接给高度和宽度

12.display和visibility使用

display设置或者检索对象如何显示
	display:none		隐藏对象
	特点：隐藏之后不再保留位置
visibility设置是否显示对象
	visibility: visible	对象可视/hidden 对象隐藏
	特点：隐藏之后保留原有位置
overflow溢出：
	设置当前对象的内容超过其指定高度及宽度时如何管理内容
	visible：不剪切内容也不添加滚动条
	auto：超出自动显示滚动条，不超出不显示
	hidden：不显示超出的部分，隐藏超出的部分
	scroll：不管超出不超出，都显示滚动条

13.用户界面样式

鼠标样式cursor：
	default小白  pointer小手  move移动  text文本
outline轮廓：
	outline: outline-color || outline-style || outline-width
	去掉轮廓线：outline:0
防止文本拖拽：
	resize:none
	可以防止浏览器谷歌等随意拖动的文本域
	比如有一个标签
	<textarea></textarea>的右下角可以拖拽
vertical-align垂直对齐：
	vertical-align: baseline | top | middle | bottom
	但是不影响块级元素的内容对齐，只针对行内元素或者行内块级元素
溢出文字隐藏：
	word-break:自动换行：
		normal：浏览器默认的换行规则
		break-all：允许在单词内换行
		keep-all：只能在半角空格或连字符处换行
	white-space:设置对象内文本的显示方式，通常适用于强制一行显示内容
		normal：默认处理方式
		nowrap：强制在一行内显示所有文本，直到文本结束或者遇到br标签才换行
	text-overflow:文字溢出：
		text-overflow:clip | ellipsis
		设置是否使用一个省略标记(...)标示对象内文本的溢出
		clip：不显示省略标记，而是简单的裁切
		ellipsis：显示省略标记(超出的部分用省略号代替)
		注意一定要首先强制一行内显示，再和overflow属性搭配使用

14.滑动门

a设置背景左侧，padding撑开适合宽度
span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度

<a href="#"><span>Hello world！</span></a>

a{
		display: inline-block;
		height: 33px;
		background: url('img.jpg') no-repeat;
		padding-left: 15px;
	}
	a span{
		display: inline-block;
		height: 33px;
		background: url('img.jpg') no-repeat right;
		padding-left: 15px;
	}

15.before和after伪元素

.one 类选择器    :hover 伪类选择器    ::after 伪元素选择器
伪元素不是真正的元素 
伪元素添加的内容默认是inline元素，这两个元素的content属性表示伪元素设置的内容，必须设置content属性
否则伪元素不起作用，最后伪元素是不占位置的

16.过渡

语法格式：	
	transition要过渡的属性 花费时间 运动曲线 何时开始
	transition    简写属性，用于一个属性中设置四个过渡属性
	transition-property    过渡的CSS属性的名称
	transition-duration    定义过渡花费的时间，默认是0
	transition-timing-function    规定过渡效果的时间曲线，默认是"ease"
	transition-delay    规定过渡效果从何时开始，默认是0
			
注意，过渡时间的单位是s，要写0.6s。前两个属性必须写

transition-duration过渡曲线：
	linear匀速    ease逐渐慢下来    ease-in加速    ease-out减速    ease-in-out先加速后减速
transition要在元素中写而不是伪类中写
所有属性都变化的话第一个参数就写all

17.2D变形 transform

transform: 移动translate(x,y);
	水平移动x，垂直移动y
	还有translateX() translateY()
	translate移动的距离如果是百分比，则代表自身的百分比
	而定位是以父级的百分比
transform: 缩放scale(x,y);
	也有scaleX() scaleY();
	scale(1.2,1.5);				/*水平缩放1.2,垂直缩放1.5*/
	0.01~0.99缩小 >=1放大
transform: 旋转rotate(deg)
	对元素进行旋转，正值为顺时针，负值为逆时针，单位deg是度数
	transform: rotate(45deg)
transform-origin可以调整元素变换变形的原点：
	默认是transform-origin：center center;
	可以是left right top bottom			左上右下啥的自己搭配
	或者精准定位，相对于左上角的精确位置
	transform-origin: 30px 40px;
transform: 倾斜skew(deg,deg)
	第一个deg是水平方向倾斜，第二个是垂直方向倾斜

3D变形 transform

x轴向右是正，y轴向下是正，z轴向外是正
	transform: rotateX(deg)  沿着x轴旋转也有沿着y轴z轴旋转

透视 perspective
一般perspective给父元素添加，作用于所有3D转换的子元素
perspective: 1000px;    /*1000px为视距，值越小效果越明显*/

移动translate:
	translateX()   translateY()   translateZ()
	transform: translate3d(x,y,z);		/*综合写法，xy可以是%可以是px，但是z是能是px*/
	
backface-visibility
	该属性定义当元素不面向屏幕时是否可见

18.CSS3动画(animation)

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
	一般前两个属性就够了
	@keyframes    规定动画
	animation    所有动画属性的简写，除了animation-play-state属性
	animation-name    规定@keyframes动画名称
	animation-duration     规定动画完成一个周期所花费的时间，默认是0
	animation-timing-function    规定动画的速度曲线，默认时ease
	animation-delay    规定动画何时开始，默认是0
	animation-iteration-count    规定动画被播放的次数，默认是1
		infinite	无限循环播放
	animation-direction    规定动画是否在一周期逆向的播放，默认是normal
		normal 正常方向
		reverse 反向
		alternate 先正常后反向，并持续交替运行
		alternate-reverse 先反向后正常，并持续交替运行
	animation-play-state    规定动画是否正在运行或暂停，默认是running
		暂停 pause
	animation-fill-mode    规定对象动画时间之外的状态	

animation: go 2s ease 0s 2 normal;				/*引用动画*/

@keyframes go{
			/*定义动画*/
			from{
				/*起始位置*/
				transform: translateX(0);
			}
			to{
				transform: translateX(600px);
			}
		}

	@keyframes go{
			0%{
				/*起始位置 等价于from*/
				transform: translate3d(0,0,0);
			}
			25%{
				transform: translate3d(800px,0,0);
			}
			50%{
				transform: translate3d(800px,1000px,0);
			}
			75%{
				transform: translate3d(0,1000px,0);
			}
			100%{
				transform: translate3d(0,0,0);
			}
		}

如果有多组变形都属于transform，需要用空格隔开