码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础2

时间:2016-07-24 00:17:44      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

一 css的三种使用方式

1 内嵌式

<style>

css代码

</style>

 

特点:

结构和样式有一定的分离

可维护性较高

可以影响当前页面

2 外联式

<link rel=”stylesheet” href=”css文件的路径” >

 

特点:

结构和样式完全分离

可维护性最高

可以影响所有引用它的页面

3 行内式(内联式)

 

 

特点:

结构和样式混合在一起

可维护性最差

只能影响当前标签

二 HTML元素的显示方式

1 块级元素

典型代表:

div,li,ul,p,h

 

特点:

1 会独自占据一行

2 可以设置有效宽高

3 当发生嵌套,子元素没有设置宽度,子元素会跟父元素长得一样宽

2 行内元素

典型代表:

span,em,strong,a

特点:

1 多个行内元素在一行上显示

2 不能设置有效宽高

3 宽高取决于内容

3 行内块级元素

典型代表:

img,input

 

特点:

1 多个行内块元素在一行上显示

2 可以设置有效的宽高

4 显示模式转换

display

block 块级

 

 

inline 行内

 

 

inline-block 行内块

display:inline-block     把非行内块元素转换为行内块元素

 

三 background

1 与background相关的属性

background-color 控制背景的颜色

颜色的三种表示方式都可以

 

background-image 背景图片

 

 

background-repeat 背景图片平铺方式

repeat 平铺

repeat-x 水平平铺

repeat-y 垂直平铺

no-repeat 不平铺

 

 

background-position 控制背景图片的位置

 

水平和垂直的大体位置

水平:   left 图片左对齐

center 图片居中对齐

right 图片右对齐

垂直:

top 图片上对齐

center 图片居中对齐

bottom 图片下对齐

用长度赋值

水平

 

垂直

 

注意一定: 总是把水平方向的位移写在最前面

 

background-attachment 控制背景图片是否随着滚动条滚动

fixed 固定,不滚动

scroll 滚动

 

2 background连写

 

 

背景的连写: 顺序不论,都可以省略。

四 伪类

1 a:link

作用:控制a标签所指向的地址,被浏览器访问前的样式

 

 

2 :hover

控制标签当鼠标移动到它的范围内时的样式

 

 

3 a:active

控制标签被激活(鼠标按下,没有松开)时的样式

 

4 a:visited

控制a标签被访问过后的样式

 

 

 使用的顺序:

love hate

link,visited,hover,active  

否则可能会不起效果

5 :focus

控制input获得焦点时的样式

 

五 CSS三大特性

1 层叠性

属性冲突:多个选择器都设置了这个属性

 

当多个选择器修饰同一个标签,并且发生属性冲突的时候,某个选择器的属性最终会作用在这个标签上   ---   层叠性

2 继承性

发生嵌套关系的时候,子元素会从父元素那里得到一部分属性   ----    继承性

color,text-系列,font-系列,line-系列

 

a不继承color,text-decoration:none

h系列,不继承font-weight

3 优先级

当选择器作用在标签上的时候,是存在优先级的

 

继承 < 标签  <  class选择器  <  id选择器 < 行内样式 <  !important

  0     1           10            100       1000        10000

 

1 存在优先级

2 权重可以叠加

3 继承的权重总是为0

4 权重计算

就是把选择器的权重相加到一起,最终权重最大的选择器可以层叠权重低的选择器

 

 

CSS基础2

标签:

原文地址:http://www.cnblogs.com/pengzijun/p/5699777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!