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;两者特点兼具