04-CSS样式

一、CSS简介

1.什么是CSS

CSS（Cascading Style Sheet）层叠样式表，是用来对网页元素进行格式化和布局。

2.用途

• 美化网页元素
• 网页元素布局

3.意义

内容与样式的分离，方便对内容进行复用，对样式进行修改

4.版本

1. CSS1.0
2. CSS2.0
3. CSS3.0

二、CSS的使用

1.行内样式表（不推荐）

1. 写法：

   <element style="css属性：属性值;css属性:属性值;"></element>
   

2. 特点：

• 优点：则针对性强 优先高

• 缺点：

  1. 没有实现内容和样式的分离
  2. 复用性差
  3. 可维护性差

2.内部样式表

• 写法：

  ​ 在页面的head标签中，是使用

<style>
    选择器{
        CSS属性:属性值;
        CSS属性:属性值;
    }
</style>

• 特点：

  ​ 优点：实现单页面的集合央视管理，最大程度实现样式的复用

  ​ 缺点：不利于多页面的样式复用和维护

3.外部样式表（推荐）

• 写法：

  1. 单独编写扩展名为CSS的样式表文件
  2. 在需要使用外部样式表文件的页面的head标签中用过使用

• 注意：

  1. 在样式表文件中，直接编写样式，不需要添加
  2. 如果页面中既引用外部样式表，又添加了内部样式表，按照最后解析的样式优先

• 特点：

  • 内容和样式的分离，实现多张页面的杨师傅用，可维护性好

三、CSS选择器

• 作用：定位想要梅花的网页元素

• 分类：

  1. CSS1.0选择器

     1. 基本选择器

        1. 标签选择器

           • 定义：标签名{CSS属性：属性值；CSS属性：属性值}
           • 应用：相同标签的元素自动应用样式

           2.类选择器

           • 定义：类选择器名{CSS属性：属性值；CSS属性：属性值}
           • 应用：在需要应用样式的元素上添加属性class=“类选择器名”

           3.id选择器

           • 写法：#id名{css属性：属性值；css属性：属性值}
           • 应用：在元素上使用id=“名称”
           • 注意：id是唯一的，不能重复

     2. 伪类选择器

        • :link 向未被访问的链接添加样式
        • :visted 向已被访问的链接添加样式
        • :hover 鼠标悬停在元素上方时添加样式
        • :active 向被激活的元素添加样式

        注意：超链接的不同状态时的样式设置，要严格按上面的顺序设置

四、优先级

• 行内>id>class>标签
• 如果一个元素有多个class眼视光hi，按照class样式定义的先后顺序，后面定义的优先级更高

五、CSS常用样式

1. 字体样式
   • font-famliy:设置字体系列
   • font-size:设置字体尺寸
   • font-style:设置字体风格
   • font-weight:设置字体体重
2. 文本样式
   • color:文本颜色
   • text-align:文本的水品对齐
   • line-height:文本的行高
   • text-decoration:文本的修饰效果
   • text-indent:文本的首行缩进
   • letter-spacing:字符间距