CSS基础全荟

一、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  光标变成所需要的小图片