H5和CSS的基础部分

选择器/选择符

1.元素选择器
a{去掉下划线}
img{去掉基线对齐}
li{去掉列表标识符}
2.类选择器
<div class="box"></div>
.box{}
- 命名规则：可以包含数字、字母、_、-,小写字母开头，见名知意
<div class="box wrap"></div>
- 一个元素可以起多个类名，同一个类名可以被多个元素使用
3.id选择器
<div id="box"></div>
#box{}
- 一个板块的最大容器一般起一个id名
- 一个元素只能有一个id名，一个id能只能被使用一次
- 快速生成一个class="box"的div：div.box然后按tab键
- 快速生成一个id="box"的div：div#box然后按tab键
4.通配符选择器
*{
	margin:0; 外边距归零
	padding:0; 内边距归零
}
- *号代表页面中所有的元素,统一去掉内外边距
- 有内外边距的元素：body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input
5.群组选择器
<div class="box"></div>
<div class="wrap"></div>
.box,.wrap{
	height: 200px;
	background-color: red;
}
- 两个不同的元素用同一套代码,逗号隔开,逗号前后没有任何关系
6.子代选择器
通过父元素的名字找到子元素,统一添加样式
.box>li{	}
>前后一定是父子关系,选择器越长运行效率越低,因为选择器是被浏览器倒着解析的
7.后代选择器
.box a{	}
空格隔开
8.伪类选择器
:link 访问前的状态
:visited 访问后的状态
:hover 鼠标移入状态
:active 激活状态(鼠标按下去但未松开)
书写顺序：love-hate
	a{
		color: #000;
	}
	a:hover{
		color: red;
	}

选择器权值

元素 1
类 10
id 100
内联 1000
- 手动调整样式优先级 !important
background-color: yellow !important;
- div.box{} 
div和.box之间没有空格,代表选择的是类名为box的div元素

ps：ps的基础用法

1.ps快捷键
放大 ：alt+鼠标滚轮
移动图片 ：空格+鼠标左键
快速恢复全屏 ：ctrl+0
2.更改尺寸为像素px
菜单中编辑 - 首选项 - 单位与标尺 - 把厘米改成像素
3.标尺
调用标尺：菜单栏中的视图 - 标尺打对钩
清除标尺线：视图 - 清除参考线
4.切片工具
切过的切片重新调整：按住ctrl键点击
文件-导出-存储为web所用格式-左下角100%保存为6%-右上角选择保存格式-存储-文件名改为英文-最下方选择所有用户切片

文本属性

1.***字体颜色
color:rgb(0-255,0-255,0-255);
color:#996ad4;
	六位十六进制表示法每一位范围：0-9,a-f
黑色:
	color:rgb(0,0,0);
	color:#000000;
	color:#000;
白色:
	color:rgb(255,255,255);
	color:#fff;
红色:
	color:rgb(255,0,0);
	color:#f00;
2.***字体大小
font-size:16px;
浏览器默认字体大小为16px,浏览器支持的最小字体12px
3.字体
font-family:"楷体","microsoft yahei",arial;
- 可以指定多个字体,浏览器先查找是否安装了第一个字体,如果没有安装则向后查找,如果都没找到则采用浏览器默认字体。
- 当字体是中文或者两个及以上单词组成的,需要加""
4.文本粗细
***font-weight:bold;加粗
font-weight:lighter;细体
font-weight:normal;正常粗细
font-weight：100-900;不带单位,数值越大越加粗
5.文本倾斜
font-style:italic;
6.文本线条修饰
***text-decoration:underline;下划线
text-decoration:line-through;删除线
text-decoration:none;无线条
7.首行缩进
text-indent:32px;
8.***行高
line-height:24px;
单行文本的垂直居中:文本的行高设置为父元素高度即可
9.***文本和图片的水平对齐方式
text-align:center居中/right右/left左;
img的居中属性不能给img,而是给img的容器

属性的继承性

比较常用的：
font-size
font-family
font-weight
font-style
text-indent
text-align
line-height
color(a除外)

列表属性

1.列表标识符
去掉标识符
li{
	list-style-type:none;
}
2.列表图片
li{
	list-style-image:url();
}
3.标识符位置
li{
	list-style-position:inside;
}
***去掉列表标识符li{list-style:none;}
边框属性

四个方向边框的设置
border:粗细(1px) 线型(solid直线/dashed虚线/dotted点状线/double双线) 颜色;
单方向边框设置：
上边框border-top:1px solid #f00;
下边框border-bottom:1px solid #f00;
左边框border-left:1px solid #f00;
右边框border-right:1px solid #f00;

***清除元素的默认样式,css reset,css重置

*{
margin: 0;
padding: 0; 内外边距清零
}
li{
list-style: none; 去掉列表标识符
}
img{
vertical-align: middle; 去掉基线对齐
}

背景属性

背景图一般有衬托作用,而img一般是页面的内容
1.背景图片
background-image:url();
2.背景重复
background-repeat:repeat默认值,水平垂直都重复/no-repeat不重复/repeat-x只有水平重复/repeat-y只有垂直重复;
3.背景定位
background-position:水平方向的位移  垂直方向的位移;
水平方向:具体数值(正值向右)/left左/right右/center居中;
垂直方向:具体数值(正值向下)/top上/bottom下/center居中;
4.***背景的简写属性
background-color: #ea999f;
background-image: url(img/bg-2.png);
background-repeat: no-repeat;
background-position: 140px bottom;
***以上四个属性可以简写为以下形式,不分先后顺序
background:#ea999f url(img/bg-2.png) no-repeat 140px bottom;
5.背景固定
background-attachment:fixed;
给body设置居多
6.雪碧图、精灵图、css sprite
将多个小图标拼合在一张大图上,通过背景定位确定引入图片的位置

浮动

- float:none不浮动/left左浮动/right右浮动;
- 浮动的元素飘起来了,脱离文档流,空间不在拥有
- 浮动停止的条件
1.碰到父元素边缘停止
2.碰到浮动的元素也会停止