第二天 css基础

1、css的发展史：

    css 是用来表现我们html  文件的一种语言

        1996年  发布第一个版本

        2004年  发布的2.01版本

        2010年  最新版本3.0版本

2、基本语法+选择器：

（1）基本语法

图1 基本语法

（2）选择器

选择器｛

        声明1；（声明里面包含了属性名和属性值）

        声明2；

              ｝

直接用标签改变样式，这个标签就称作标签选择器

（3）类选择器 

 类选择器  可以给多个标签设置一样的类名

 

  我是p标签

 

我是h2

id选择器  一个id名只能对一个标签（唯一性）

 

我是h3

选择器的优先级：

id  最大---class---标签最小

3、引入方式

（1）行内样式

图2  行内样式

在body段落中直接引入

（2）内部样式

图3   内部样式

（3）外部样式 （两种方法引入）

1、外部引用第一种 链接引入

图4 使用link外部引用

2、外部引入第二种 导入本地css

      @import url(导入本地.css文本) 

图5 使用@import引入

优先级：

      css样式遵循就近原则  行内样式＞内部样式＞外部样式

4、span标签

span标签没有实际意义

不能直接设置宽高，不独占一行

图6 span标签的使用

图6-1 span标签使用的效果图

5、字体样式

font-size: __px; 设置P标签里面的字体大小

      font-family: "宋体"    设置P标签里面的字体类型

      font-style: italic;    设置P标签里面的字体样式为倾斜

      设置P 标签里面的字体粗细

      font-weight: bold;加粗

      font-weight: bolder;在bold基础上更粗

      font-weight: lighter; 变得更细

      font-weight: 100; 取值范围100-900，常用400  600  900（同样设置字体粗细）

  亦可以简写为： font:italic 900 50px "楷体";

      顺序： font ： font-style(倾斜)  font-weight（粗细）  font-size（字体大小）  font-family（字体类型）

6、文本样式：

    color: #000; 黑色

    color:#fff; 白色

    color: #f00; 红色

    color: #0f0; 绿色

    color: #00f; 蓝色

    color: rgb(255, 0, 0);

    color: rgba(255, 0, 0, .9);

    rgba(    );设置透明色，透明度的0.9可以写成.9

    text-align: left;    文本居左

    text-align:right    文本居右

    text-align: center;  将文本居中

    text-indent: __px;  设置首行缩进

    line-height: 100px;  设置行高

    设置行高等于高度，并且再设置text-align:center 就可以让文本水平居中

    text-decoration:none;            设置文本的装饰（none为默认值，代表无）

    text-decoration: underline;      给文本添加下划线

    text-decoration: overline;      给文本上方加上一条线

    text-decoration:line-through    给文本加上一条线，穿过这个文本

7、a标签的伪类

    a:link 未访问时候的样式

    a:visited  访问过后的样式

    a:hover    鼠标悬浮上方的样式

    a:sctive    鼠标未点击未松开时的样式

    顺序不可错，记忆方式love hate

图7  a标签伪类的使用