CSS3初学基础 帮助你快速入门

CSS基础

CSS基本格式

• Cascading Style Sheet 层叠级联样式表
• css 标签

<style></style>

• css是HTML与CSS结构分离的思想 使网页变得简单 SEO

• CSS：是表现层 用来美化网页

  • 字体 颜色 边距 高度 宽度 背景图片 浮动 定位 动画…

• 页面上css的显示 :打开网页 按F12可查看

• css新建:创建项目-创建css文件夹-里面存放.css文件 推荐使用外部css

• 外部css与html链接的代码:

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

• css与html的具体代码

  • 如图1显示的是:选中所有h1标签
  • 如图2显示的是:效果

CSS三种导入样式

行内样式

• 在标签元素中 编写一个style属性 编写样式即可
• 文件很多的情况下效果不好
• 不符合结构与表现分离 不建议使用

<h1 style="color: red">我是标题</h1>

内部样式

• 文件位置位于标签内
• style标签中的注释为/**/ 快捷键ctrl+？

    <style>
        h1{
            color: green;
        }
    </style>

外部样式

• 需要按上面步骤新创建.css 文件
• 需要上面的链接代码 把外部css和html连接起来
• 结构与表现分离 建议使用

h1{
    /*    选择器 选中所有h1*/
    color: red;
}

• 以上为链接方式 以下为导入方式

• 链接方式会直接展示美化后的页面 导入方式则先展示结构 后展示美化页面 所有建议使用链接方式

  <style>
      @import url("css/style.css");
      
  </style>
  

三种导入样式优先级

• 正常来说：行内样式>内部样式>外部样式

• 但存在就近原则 ： 外部链接在内部样式上面： 外部样式>内部样式