CSS:cascading style sheet(级联样式表)

  1. 菜鸟教程网址: 菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob)
  2. w3school网站:https://www.w3school/
  3. CSS:cascading style sheet:层叠级联样式表
  1. 1.0时只有基本样式,如h1标签的加粗等.
  2. 2.0时加入DIV块和css,提出HTML+CSS结构分离思想:让网页变得更简单,让网页开始做SEO
  3. 2.1时加入浮动定位
  4. 3.0时加入圆角,阴影和动画,但要注意浏览器兼容性

养成规范思想:让css单独一个文件夹

引入方式:样式判断时釆用"就近原则"

  • 离要更改样式,的内容越近,优先级越高
  • 行内>内联样式表>外联样式表
  1. 内部样式表:在head里面写style标签,在里面写css样式
<head>

  <style>
      *,ul,li{
          margin: 0px;
          padding: 0px;
          font-size: 12px;
          list-style: none;
      }
  </style>

</head>
  1. 外部样式表:link标签引入外部后缀名为.css的文件
<head>

  <link rel="stylesheet" href="css/index.css">

</head>
  1. 行内样式:不建议使用,只在想偷懒时的特殊情况下使用
<span style="color: red">Hello World</span>
  1. @import导入:要写在style的最前面,2.1版本特有
<style>
      @import url("淘宝网首页/css/index.css");
</style>

网页页面"右键 - 检查",我们可以看到在控制台有相应的css和文件和style样式

加入css后的优势

  1. 内容与表现分离,网页结构表现统一,代码可复用
  2. 样式丰富
  3. 建议独立于html,即引入css文件
  4. 利于SEO,易被搜索引擎收录
  5. 建议先写html(骨架),再写css(样式)

更多推荐

CSS基础常识之引用方式和优势