一、CSS概述

1.css是什么？？

层叠样式表

2.css的引入方式

1.行内样式在标签上加属性style="属性名1:属性值1;属性名2:属性值2;..."

2.内嵌式在head里加<style></style> 所有的样式写在标签内

3.外链式单独的css文件(后缀名 css名字.css) <link href="css文件的路径" rel="stylesheet" type="text/css" />

4.导入式 @import url(css路径) 或者 @import css路径

3.css语法

选择器{声明1;声明2;...} 声明====>属性名:属性值

4、常用.选择器

1.标签(元素)选择器

标签名{属性名1:属性值1;属性名2:属性值2;...}

2.通配符选择器 *

选择所有的标签

*{属性名1:属性值1;属性名2:属性值2;...}

3.id选择器

#id名{ }

4.类选择器

.类名{ } 标签名.类名{ } 例子：div.box{ } 类名叫box的div

5.包含选择器

父元素子元素{ } 此时的子元素可能是父元素的直接子元素也可能是子元素的子元素

例如：div .box{ } div下方所有类名叫box的元素

选择直接子元素父元素>子元素{ }

二、css中的属性

1、单位

1.px 像素

2.em 字大小的倍数

2.表示颜色的英文单词

2.rgb值取值范围0-255 例如：绿色 =====> rgb(0,255,0)

rbga(数值1，数值2，数值3，透明度) 透明度取值范围0-1

3.十六进制表示法取值范围0-f 例如:蓝色 =======>#0000ff

3.字体样式的设置

1.font-family 字体系列

指定多个字体时用“,”隔开例如:font-family:"New Times","微软雅黑",....;

2.font-size 字体大小

单位 px 、 em 例如：font-size:30px;

3.font-style 字体倾斜效果

值：

normal 正常（默认）

oblique 倾斜体

italic 斜体

4.font-weight 字体加粗

值：

normal 正常（默认）

bold 粗体

bolder 加粗体

lighter 细体

100-900 数字越大字体越粗

5.text-transform 字体英文大小写转换

值：

uppercase 全大写

lowercase 全小写

capitalize 首字母大写

6.text-decoration 字体的修饰

值：

none 去除下划线

underline 增加下划线

line-through 中划线（删除线）

overline 上划线

7.text-align 文本水平对齐方式

值：

left 左对齐

center 居中对齐

right 右对齐

justify 两端对齐（一般常用与英文）

8.line-height 行高

文字在一行内垂直居中 line-height:height的值

9.vertical-align 垂直居中

行内块级元素与行内元素或文本的垂直对齐

值：

baseline

top

middle

bottom

10.overflow 内容溢出处理

值：

visible 超出部分可见

hidden 超出部分隐藏

scroll 出现滚动条

auto 浏览器自动处理

11.text-overflow 文本溢出处理

值：

clip 超出部分剪切

ellipsis 超出部分显示省略号

12.white-space 空白处理

值：

normal

pre 保留空格

nowrap 不换行 =====》<nobr>强制不换行</nobr>

13.text-indent 文本缩进

值：正负都可以

14.letter-spacing 字母与字母之间的间距/中文的字与字之间的间距

值：正负都可以

15.word-spacing 单词与单词之间的间距（英文）

三、权重问题

* 通配符选择器权重 0.5

标签选择器权重 1

类选择器权重 10

id选择器权重 100

行内样式权重 1000

样式里的值后面 !important 权重最大

包含选择权重相加

谁的权重大谁的样式起作用

四、盒子模型

1.什么是盒子模型？

具有内边距外边距内容边框等属性的假想的盒子

2、padding

2.padding 内边距（内补丁）

padding-top

padding-right

padding-bottom

padding-left

padding:上下左右; （一个值）

padding:上下左右; (两个值)

padding:上左右下; (三个值)

padding:上右下左; (四个值) 遵循顺时针次序

-------------------------------------------------border

3.border 边框

border-width 边框的宽度

border-color 边框的颜色

border-style 边框的样式（值：solid实心 dotted小圆点 dashed虚线 ...）

border:border-width border-color border-style;

border-left: border-width border-color border-style;

border-right、border-top、border-bottom

例如：border:2px solid red;

border-right:1px dotted blue;

border:none;

border:1px solid red;

border-bottom:none;

边框的小应用：

小三角：

width:0;

border:10px solid transparent;

border-bottom-color:red;

4.a元素的伪类

a:link{} 未访问状态

a:visited{} 访问过后的状态

a:hover{} 鼠标悬停时的状态

a:active{} 激活时的状态

遵循原则：LoVe HAte

5.元素间的转换

a.任何元素转换为块级元素 display:block

b.任何元素转换为行内块级元素 display:inline-block（ie7及以下版本不支持）

c.任何元素转换为行内元素 display:inline

d.任何元素消失不见 display:none

-----------------------------------------------margin外边距

用法同padding

注意：

1.左右横排的盒子之间的间距是两者的外边距相加

2.上下排列的盒子之间的间距是以最大的为准（大的会把小的给吞掉）

3.一个盒子包着里一个盒子他们都有margin-top 以最大的为准（大的会把小的给吞掉）

解决方案:给父元素加overflow:hidden

块居中 margin:0 auto;

五、关于background背景

1.背景颜色 background-color

值:

1,2,3,4

2.背景图片 background-image

值:

url(图片的路径)

默认情况下图片垂直水平都平铺（重复）

3.背景平铺 background-repeat

值:

repeat 默认图片垂直水平都平铺（重复）

no-repeat 不平铺

repeat-x 水平平铺

repeat-y 垂直平铺

4.背景图片位置 background-position

值：

a.表示位置的英文单词 left right center top bottom

b.百分比

c.具体有单位的数值

left top ====> 0 0 左上角

center top =====>50% 0 顶部中间

right top =====>100% 0 右上角

left center ====>0 50% 左中

center center=====>50% 50% 正中间

right center====>100% 50% 右中

left bottom=====>0 100% 左下角

center bottom====>50% 100% 下中

right bottom===>100% 100% 右下角

5.背景图片渲染的位置 background-origin

值：

padding-box 从内边距位置开始渲染图片（默认）

content-box 从内容区域开始渲染图片

border-box 从边框区域开始渲染图片

6.背景图片的大小 background-size

值:

a.百分比

b.数值+单位

c.cover 等比例扩展图片至足够大（图片可能被裁减）

d.contain 等比例扩展图片至足够大（图片可以完整显示，可能会引起区域内空白）

7.背景图片是否固定 background-attachment

值:

a.scroll 背景图片会随着正常的文档流滚动（默认）

b.fixed 背景图片固定不动不会随正常的文档滚动

简写： background:background-color background-image background-repeat background-position;

background:背景颜色 url(图片路径) 是否重铺背景图片的位置;

例子： background:#fff url(img/1.jpg) no-repeat center center;

css精灵--sprite雪碧图

六、浮动

浮动的元素脱离正常的文档流

float:

值:

left 左浮动

right 右浮动

none 不浮动

任何元素加了浮动后（left,right）,变成了块级元素

清除浮动

1.给父元素加height

2.给父元素加overflow:hidden

3.在浮动元素后面加一个空的块级元素给它加样式 clear:both clear(left清除左浮动 right清除右浮动 both清除左右浮动）

a.给父元素加伪类 :after

父元素:after{

content:"";

display:block;

clear:left;

}

七、定位

position定位：

值：

static 不定位（默认正常文档流）

relative 相对定位（相对于自身）

absolute 绝对定位

1.有定位的元素的外面包着它的元素（可能是直接元素，也可能是间接元素）有定位，相对于有定位的那个元素定位

2.有定位的元素的外面包着它的元素没有定位，相对于浏览器定位

fixed 固定定位（相对于浏览器定位）

多个定位元素的覆盖次序通过z-index来判断 z-index的值是一个没有单位的数值

谁的z-index的值越大，谁就在最上层

八、列表样式

1.list-style-type 列表样式类型

值：

a.disc 实心原点

b.none 去掉样式

c.circle 空心圆

d.square 实心方形

2.list-style-image 列表样式图片

值：

url(图片路径)

3.list-style-position 列表样式的位置

值：

outside 列表样式在内容的外面

inside 使列表样式在内容再里面

元素隐藏

1.display ：none 元素在页面不显示位置也不见了

2.visibility:hidden 元素在页面不显示位置还在

3.opacity:0 元素在页面看不见位置还在

4.z-index ： -999999 元素在页面也看不见

鼠标光标的样式

1.cursor 光标

值：

pointer 小手样式

wait 等待

help 帮助

url(图片路径),auto 光标变成所需要的小图片

巴特西

CSS基础全荟