css引入方式，选择器，属性，行内、块级元素--Day3


一、css引入方式

1.行内式（以属性方式）

冒号开始，分号结束。

2.类嵌式

head里title下加

<style type="text/css">

p

{

  color:#F00

}

</style>

3.外链式（用得最多）

<link href="文件名" type="text/css" rel="stylesheet">

4.导入式（先加载HTML，再加载css）

<style type="text/css">

  @import(url(文件名))

</style>

优先级：就近原则

二、css常用选择器(外链式)

1.标签选择器

  页面里的所有标签都是一个颜色

2.class选择器

class可以共用且一个标签可以有多个class

如果有两个类的话后边的类覆盖前边

比如:

HTML文件中：

<p class="c1 c2">你好</p>

css文件中：

.c1

{

size：14px

}

.c2

{

size：36px

}

显示字体为36px大小

3.ID选择器

ID不可以重复！

css文件中：

#d1{}

HTML文件：

<p id="d1">你好</p>

4.优先级

id>class>标签

三、其它选择器

一、css引入方式

1.行内式（以属性方式）

冒号开始，分号结束。

2.类嵌式

head里title下加

<style type="text/css">

p

{

color:#F00

}

</style>

3.外链式（用得最多）

<link href="文件名" type="text/css" rel="stylesheet">

4.导入式（先加载HTML，再加载css）

<style type="text/css">

@import(url(文件名))

</style>

优先级：就近原则

四、css选择器权重

内联(a)>ID(b)>class(c)>标签(d)

例：

<div class="c1">

<h1 class="c2" id="id2">aaaaa</h1>

</div>

.c1 (权重是c) .c1 .c2(权重是cc) .c1 h1(权重是cd)

其优先级为：cc>cd>c

五、属性

1.字体属性

字体相关的属性有继承性

2.超链接属性（有先后顺序）

a:link{}不做操作显示时字体设置

a:visited{}访问过以后的的字体设置

a:hover{}鼠标移上去的字体设置

a:active{}鼠标点击时的字体设置

3.table属性

边框合并 boeder-collapse:collapse

表格内字体居中 text-align：center

4.边框背景属性

(1)border:

也可以分开设置：

border-style：soild;

border-width：5px;

(2)背景属性：

纵向重复：background-repeat：repeat-y;

横向重复：background-repeat：repeat-x;

不重复：background-repeat：no-repeat;

拖动滚动条时图片固定：background-attachment:fixd;

方位：background-position:10px 20px;

(3)超出部分

overflow：auto 超出产生滚动条

(4)隐藏

占位隐藏：visibility:hidden;

不占位隐藏：display:none;

(5)zindex

控制层级

如： z-index：2；就在第二层

(6)鼠标属性

cursor:pointer; 放到文字处鼠标显示手的图标

(7)列表属性

list-style-type:circle

list-style-image:url("xxx.jpg")

(8)垂直居中

vertical-align:center;

vertical只对行内元素有用

六、行内、块级元素 

    1.块级元素

      (1)内容默认显示左上角

      (2)单独占满一行

      (3)常用块级元素：div p h1-h6 form
menu pre table

        三种列表(ol li    ul li    dl dt)

    2.行内元素

      (1)没有单独占满一行

      (2)默认情况下，不受到宽和高的影响。文字内容多大就显示多大。

      (3)span a label img textarea strong input select 

    3.两者间相互转换

       块级元素->行内        块级元素->行内   

       display:inline;       display:block;

       display:inline-block;两者特点兼具