CSS层叠样式表
命名规则：常规
CSS三语法：选择器【selector】、属性和值 {property：value}
注释方法：/*···*/
html注释方法：<!–注释–>
- 样式
1、内联方式（行内模式）
<html标签 style=“property:value;property:value ……”>被修饰的内容</html标签>【仅作用于本标签 且不常用】
2、内部方式（内嵌样式）
<style type=“text/css”>
p{属性:值;
属性:值;
……
}
</style>【作用于当前整个页面】
3、外部导入方式（外部链入）
<link href=“文件名.css” type=“text/css” rel=“stylesheet”/>【作用于整个网站】
三个样式有冲突时取决于就近原则，无则叠加
- CSS几个重点选择器
1、html选择符
p{……}与h2{……}【直接选择控制】
2、class类选择符
<html标签 class=“mc”>…</html标签>
.mc{property:value;……;}/*凡是class属性值为mc的都采用此样式*/
p.ps{property:value;……;}/*只有p标签中class属性值为ps的才采用此样式*/
类选择符可以在网页中重复使用
3、id选择器
#tn{property:value;……;}【写在head里】
<html标签 id=“tn”>…</html标签>【tn尽量唯一哦】
4、通配符选择器
*{property:value;……;}
5、关联选择符（包含选择符）
table a{property:value;……;}/*table标签里的a标签才采用此样式*/
h1 p{property:value;……;} /*只有h1标签中的p标签才采用此样式*/
6、组合选择符（选择符组）
选择符1,选择符2,选择符3…{{property:value;……; }
7、伪类选（伪元素）择符
借鉴例子：
a:link {color: #FF0000; text-decoration: none} /*未访问的链接*/
a:visited {color: #00FF00; text-decoration: none }
/*已访问的链接*/
a:hover {color: #FF00FF; text-decoration: underline} /*鼠标在链接上*/
a:active {color: #0000FF; text -decoration: underline} /*激活链接*/
- 属性介绍
与<div>搭配使用
1、color颜色属性
RGB颜色【前面写过】
RGBA颜色 使用rgba(0,0,0,0.5)
A指透明度
2、字体属性
font：
font-size: 字体大小：XXpx,m%基于父对象的百分比
font-family: 字体：宋体，Arial
font-family: “Microsoft YAhei”;
font-style: normal正常; italic斜体;oblique倾斜的字体font weight: 字体加粗：bold
【运用手册查找属性】
3、文本属性
text-indent：首行缩进：text-indent：XXpx;
text-overflow: 文本的溢出是否使用省略笔记（. . .）
clip | ellipsis(显示省略标记)
while-space:nowrap;/*强制在同一行内显示所有文本*/
text-align：文本的位置： left、 center、 right
text-decoration:字体画线： none、underline、 line-through（贯穿线）
text-shadow:文本的文字是否有阴影及模糊效果
text-shadow: Xpx Xpx rgba(0,0,0.0.3)
letter-spacing:文字或字母的间距
line-height:行高【与div一样大小可center】
color:字体颜色
4、边框
border:宽度、样式、颜色
border-color:
border-style：边框样式： solid实线、 dotted点状线、 dashed虚线
border-width:
border-left-color：
border-left-style：
border-left-width：
……
5、多行溢出显示省略号
display: -webkit-box
-webkit-box-orient: vertical;
-webkit-line-clamp:3;【显示行数】
overflow:hidden;【可直接用】
6、背景属性:（background）
*background-color:背景颜色
*background- image: 背景图片
*background-repeat:是否重复。如何重复?(平铺)
*bac kground-position:定位
7、内补白(内补丁)
padding 例子：
检素或设置对象四边的内部边距,如padding: 10px; padding:5px 10px;
padding-top:检索或设置对象顶边的内部边距
padding-right:检索或设置对象右边的内部边距
padding- bottom:检索或设置对象下边的内部边距
padding-left:检索或设置对象左的内部边距
【外补白(外补丁)margin:（同上）】
8、Position定 位
position:定位方式: absolute(绝对 定位)、fixed(固定) (relative定位参考， 可对内部相对absolute定位)
Z- index:层叠顺序，值越大越在上方。
top:检索或设置对象与其最近一个定位的父对象顶部相关的位置
right:检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom:检素或设置对象与其最近一个定位的父对象下边相关的位置
left:检索或设置对象与其最近一个定位的父对象左边相关的位置
9、盒子模型
两种盒子(块和行内)它们的特点是由Css中的display 属性决定的这个属性主要有两种取值
Display:block ; //块盒子自动占一行
Display:inline; //行内盒子，一行摆放多个
10、Layout布局
display:是否及如何显示: none隐藏，block块状显示
float:指出了对象是否及如何浮动:值none | left| right
clear:清除浮动: none | left | right | both
visibility：设置或检索是否显示对象 visible | hidden | collapse与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip:检素或设置对象的可视区域，区域外的部分是透明
rect：(上-右-下-左)
如: clip:rect(auto 50px 20px auto)上和左不裁剪，右50， 下20
overflow:超出隐藏: hidden
visible: 不剪切内容
overflow-x:内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overf low-y:内容超过其指定高度时如何管理内容
【重】display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
【重】display: inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的內容而变化。
inline元素设置width,height属性无效
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left
margin-right都产生边距效果
但竖直方向的padding,top, padding . bottom, margin-top,margin-bottom不会产 生边距效果
【重】display; inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link (a 元素) inline-block属性值， 使其既具有block的宽度高度特性又具有inline的同行特性。
- 移动开发
CSS响应式布局
使用@media的三种方法
1、直接在CSS文件中使用:
@media类型and (条件1) and (条件二){
css样式
@media screen and (max -width: 1024px) {
body{
background -color: red;
}
2、使用@import导入
@import url(“css/moxie.css”) all and (max . width:980px);
3、也是最常用的方法，直接使用link连接，media属性用于设置查询方法
<link rel=“stylesheet” type=“text/css” href=“css/moxie.css” media=“all and (max -width=980px)”/>
----------------------------------------------------------------------------------next还有next
