深圳10大品牌策划公司_成都今日疫情增加_免费推广途径与原因_网站排名优化教程

1、CSS介绍

• 背景

  • 使用HTML可以搭建起页面的结构，但是从页面的观感上看，给人的感受就是一个字 “丑”
    

• 介绍

  • CSS全称为： Cascading Style Sheets ，意为 层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化。

• 作用

  • 用于设置 HTML 页面的 文字内容（字体、大小、对齐方式等）、图片外形（宽高、边框、边距等） 及 版面的布局 和 外观显示样式。

• 使用

  • 结构（HTML）与 样式（CSS）相分离。

• 注释

  • 以 /* 开始，以 */ 结束。

    /*注释内容（解释与说明）
    */
    

2、CSS使用方式

1. 内联样式（行内式）

• 介绍

  • 借助于style标签属性，为当前的元素添加样式声明

    <标签名 style="样式声明">
    

  • CSS样式声明 : 由CSS属性和值组成

    style="属性: 值; 属性: 值;"
    

• 常用场景

  • 用于为单个元素应用唯一的样式。

• 常用CSS属性

  • 设置文本颜色 color: red;
  • 设置背景颜色 background-color: green;
  • 设置字体大小 font-size: 32px;

• 说明

  • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的标签中
  • 可以方便控制当前整个页面中的元素样式设置，使用内部样式表设定 CSS

• 示例
  

2. 内部样式（嵌入式）

• 介绍

  • 借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到 HTML 中匹配元素并应用样式。
  • 所有的样式，都包含在

• 选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式。

  /* 标签选择器 : 根据标签名匹配所有的该元素 */  
  p{color: red;
  }
  

  • 说明
    • 属性和属性值 以 “键值对” 的形式出现，中间用英文 : 分开，多个 “键值对” 之间用英文 ; j进行区分。
    • 属性是对指定的对象设置的样式属性，如：字体大小、文本颜色等。

• 缺点

  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

• 应用场景

  • 一个HTML页面拥有唯一的样式。

3. 外部样式（链接式）

• 介绍

  • 样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用（实际中常用）。

• 操作

  1. 创建外部样式表文件 后缀使用.css

  2. 在HTML文件中使用标签引入外部样式表

      <link rel="stylesheet" href="URL" type="text/css">
     

• 属性

  属性名	描述
  rel	定义当前文档与被链接文档之间的关系，在这里需指定为 stylesheet，表示被链接的文档是一个样式表文件
  href	定义所链接外部样式表文件的路径或URL，可以是相对路径或绝对路径

• 说明

  • 样式表文件中借助选择器匹配元素应用样式

  • 只需要修改一个文件即可改变整个网站的外观。

4. 总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个页面
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构与样式表分离	需要 link 引入	最多	控制多个页面

5. Chrome调试工具

• 介绍

  • Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的 HTML 结构和 CSS 样式。

• 操作

  • 打开 Chrome 浏览器，按下 F12 键 或者 右击页面空白处 检查。
    

• 使用

  1. Ctrl + 滚轮 可以放大或缩小 开发者工具 代码的大小。
  2. 左侧是 HTML 元素结构，右侧是 CSS 样式表。
  3. 右侧 CSS样式点击数值（左右箭头或直接输入）修改大小和调整颜色。
  4. Ctrl + 0 表示复原浏览器的显示大小。
  5. 如果点击元素，右侧没有样式引入，极可能是类名或样式引入错误。
  6. 如果有样式，但样式前有 黄色叹号提示，则是样式属性书写错误。