HTML和CSS(二)

一、CSS：页面美化和布局控制

1. 概念

CSS即Cascading Style Sheets 层叠样式表，是表现HTML或XHTML文件样式的计算机语言 ，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等的设定

• 层叠：多个样式可以作用在同一个html的元素上，同时生效

使用CSS的优点：

• 功能强大
• 减少网页的代码量，增加网页的浏览速度，节省网络带宽
• 将内容展示和样式控制分离
  • 降低耦合度。解耦
  • 让分工协作更容易
  • 提高开发效率

CSS的使用

• CSS的使用：CSS与html结合方式

  • 内联样式：使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的 ，不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用

    • 使用style属性引入CSS样式
    • 如：<div style="color:red;">hello css</div>

  • 内部样式：

    • 在head标签内，定义style标签，style标签的标签体内容就是css代码

    • 优点：方便在同页面中修改样式

    • 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

    • 如：

    • <style>
      div{
      	color:blue;
      }
      </style>
      
      <div>hello css</div>
      

  • 外部样式：CSS代码保存在扩展名为.css的样式表中 ,HTML文件引用扩展名为.css的样式表

    • 定义css资源文件

    • 在head标签内，定义link标签，引入外部的资源文件

    • 如： a.css文件：

    • div{
      	 color:green;
      }
      <link rel="stylesheet" href="css/a.css">
      <div>hello css</div>
      <div>hello css</div>
      

  • CSS样式优先级 ：行内样式>内部样式表>外部样式表

    • 就近原则：越接近标签的样式优先级越高

  • 注意：

    • 1,2,3种方式，css作用范围越来越大

    • 1方式不常用，后期常用2,3种方式

    • 第三种方式，即引入外部样式可以有另一种写法：

    • <style>
      	@import "css/a.css";
      </style>
      

css语法

• 格式：

  • 选择器 {
    			属性名1:属性值1;
    			属性名2:属性值2;
    			...
    		}
    

  • 选择器:筛选具有相似特征的元素

  • 注意：

    • 每一对属性需要使用；隔开，最后一对属性可以不加；

选择器

• 选择器：筛选具有相似特征的元素
  • 分类：
    • 基础选择器：
      • id选择器：选择具体的id属性值的元素。建议在一个html页面中的id值唯一
        • 语法： 标签名称{}
        • 注意：id选择器优先级高于元素选择器
      • 元素选择器：选择具有相同标签名称的元素
        • 语法： 标签名称{}
        • 注意：id选择器优先级高于元素选择器
      • 类选择器：选择具有相同的class属性值的元素。
        • 语法：.class属性值{}
        • 注意：类选择器选择器优先级高于元素选择器
    • 扩展选择器：
      • 选择所有元素：
        • 语法： *{}
      • 并集选择器：
        • 选择器1,选择器2{}
      • 子选择器：筛选选择器1，元素下的，选择器2元素
        • 语法： 选择器1 选择器2{}
      • 父选择器：筛选选择器2，的父元素——选择器1
        • 语法： 选择器1 选择器2{}
      • 属性选择器：选择元素名称，属性名=属性值的元素
        • 语法： 元素名称[属性名="属性值"]{}
      • 伪类选择器：选择一些元素具有的状态
        • 语法：元素:状态{}
        • 如：<a>，状态：
          • link：初始化的状态
          • visited：被访问过的状态
          • active：正在访问状态
          • hover：鼠标悬浮状态

属性

• 字体、文本
  • font-size：字体大小
  • color：文本颜色
  • text-align：对其方式
  • line-height：行高
• 背景：
  • background：
• 边框
  • border：设置边框，符合属性
• 尺寸：
  • width：宽度
  • height：高度
• 盒子模型：控制布局
  • margin：外边距
  • padding：内边距
    • 默认情况下内边距会影响整个盒子的大小
    • box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
  • float：浮动
    • left
    • right