02 css层叠样式表

【CSS  层叠样式表】

 

【 使用CSS的好处】

 1.可以对HTML标签进行样式的强行控制。

 2.1个CSS属性可以同时控制多个HTML标签。

 3.将HTML代码和CSS样式代码分离。

 4.方便分工合作。

 5.给1个HTML页面配置多个CSS界面皮肤。

 

<div></div>      块级元素   占满整个一行  

 

<span></span>    行内元素

 

 

【CSS的书写方式】

 

 1. 行内式

      <标签名 style="css属性:值; css属性:值; css属性:值; ...."  />

      利用分号来分割多个属性值

例

<div style="background-color: green;width: 50%;>div1</div>

 2. 标签式

      <style type="text/css">

      </style>

例

<style type="text/css">

div {

background-color: black;

width: 50%;

}

</style>

1. 导入式

在html的head标签内加上link标签,指向对应的css文件

    例

  <link href="CSS文件路径" rel="stylesheet" href="xxx.css" />

 

【CSS选择器】

 

例

1. 标签选择器    标签名

div {

background-color: green;

width: 50%;

}

1. 类别选择器 class    .类别名

 类名的第一个字符不能使用数字!它无法在火狐浏览器中起作用

例

.d1{

background-color: green;

width: 50%;

}

1. ID选择器    id  #ID名

id不要以数字开头,数字开头的id在火狐浏览器中不起作用

Id属性只能在每个html文档中出现一次

例

#p1{

background-color: red;

width: 50%;

}

【CSS选择法】

1. 并集选择法  （或者）   选择器1,选择器2,选择器3,......

满足div标签和p标签的标签

例

div,p {

background-color: red;

width: 50%;

}

1. 交集选择法  （并且）   标签名.类别名

同时满足div标签和di类别的标签

例

div.d1 {

background-color: red;

width: 50%;

}

1. 子代选择法   

例

id为tb2下的所有的td标签

#tb2 td{

background-color: darkorange;

}

  选择器和选择法的优先等级：

加载页面时优先加载前面的,后面加载的会把前面的覆盖

    并集选择法 > 标签选择器 > 类别选择器 > 交集选择法 > ID选择器

 

 

【基本属性】

width 宽度

height  高度

overflow 溢出(对盒子内溢出的文字)

visible 显示（默认）

scroll 滚动轴

hidden 隐藏

 

a标签和font标签是功能性标签,没有width和height属性

如何让a标签等拥有别的标签的功能呢?

display 显示  

            block (div)  块级样式显示,拥有div标签的属性

            none(隐藏)

            inline (span) 行内元素的样式显示,拥有span标签的属性

            inline-block  在同一行中的块级样式显示  仅限于IE浏览器(慎用)

            list-item(<li>) 列表项样式显示

 

float 浮动

Float属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止.

浮动之后的元素将围绕它

浮动元素之前的元素将不会受到影响

     left 向左浮动    right

clear:left; 清除向左浮动

         right

         both

一般定义一个类别选择器,用来清除浮动:

.clear{

width: 0px;

height: 0px;

clear: both;

}

 

 

 

 

【背景属性】

background

background-color 背景颜色

background-image 背景图片  循环  

例:background-image: url(img/logo.png);

background-repeat   背景图片循环方式

                                   repeat:循环  （默认）

                                   repeat-x:X轴循环

                                   repeat-y:Y轴循环

                                   no-repeat:不循环

 

background-position  背景图片位置  背景不循环时才能使用

                     left right top bottom center

背景图片位置设置为左下:background-position: left bottom

 

【边框属性】

border-style 边框线形    

                     solid      实线

                     dashed  虚线

                     dotted   点线

                     double   双实线

                     groove   和黑色组成的立体边框

                     inset    内发光立体边框

                     outset   外发光立体边框

 

border-color 边框颜色    颜色名称  16进制  rgb函数

 

border-width 边框宽度   xxxpx

 

方位：left right top bottom

 

简要写法(四周都有边框线):border: 1px red solid;

【文字属性】

color 文字字体颜色

font 文字

font-family 文字字体

font-size 文字大小

font-style 文字样式   italic  倾斜

font-weight 文字粗细

text-decoration 文字线形   

                     underline 下划线

                     overline  上划线

                     line-through  删除线

 

text-align 水平对齐

 

vertical-align 垂直缩进  td适用

 

line-height  行高

 

 

【列表属性】

list-style-type       符号样式

list-style-position   列表项位置  inside outside

list-style-image      符号图片

 

 

【超链接属性】

a:link    默认状态

a:hover   鼠标掠过

a:active  鼠标点击

a:visited  访问过的链接

 

inherit 继承=======================>Demo14.html

 

【鼠标指针样式属性】

cursor

 

hand 手型

crosshair 十字型

text 移动到文本上的那种效果(I 形)

wait 等待的那种效果(沙漏)

default 默认效果

help 问号

e-size 向右的箭头

ne-resize 向右上的箭头

n-resize 向上的箭头

nw-resize 向左上的箭头

w-resize 向左的箭头

sw-resize 向左下的箭头

s-resize 向下的箭头

se-resize 向右下的箭头

auto 由系统自动给出效果

 

【盒子模型】

 

border：边框

margin：边框离外部的距离

margin:auto设置以后不居中的原因：

没有为DIV设置宽度，这很容易理解：DIV没有宽度，如何根据宽度自适应呢？

 

padding：边框离内部内容的距离

div坍塌现象：

     上下两个div标签的margin-top和margin-bottom值不会叠加，按照值较大的属性为准。

改变内边距

 

【position：定位】（将该标签放在一个新的图层中）

relative      相对定位

 相对于自己原来的位置的左上角。因此，移动元素会导致它覆盖其它框。

 可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变

absolute      绝对定位   

相对于自己外部最近的一个有定位的父级标签。

       绝对定位的标签是没有盒子的。

绝对定位使元素的位置与文档流无关,因此不占据空间

 

fixed         锁定定位

 相对于浏览器的可见部分。

锁定定位使元素的位置与文档流无关,因此不占据空间

例:网页上的广告,返回定义按钮

 

left        ：x轴坐标

top        ：y轴坐标

z-index     ：z轴坐标

      

CSS 定位 position

 

position ： 定位属性  （确定坐标轴的中心点）

           值： relative    相对定位()

            坐标轴原点是自己原来位置的左上角

           absolute  绝对定位

            坐标轴的原点是离自己最近的一个有定位的盒子的左上角。

            fixed        锁定定位

 

left：        x轴坐标

top：        y轴坐标

y轴是从0开始朝下为正方向!所以如果要往上移动,top的像素值取负数

z-index：  z轴坐标