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

helloses

已于 2022-03-24 19:13:49 修改

阅读量321

点赞数

分类专栏：前端 CSS 文章标签：前端 css css3

于 2022-03-22 09:42:09 首次发布

本文链接：https://blog.csdn.net/lm12032015/article/details/123651704

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

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

菜鸟教程网址: 菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
w3school网站:https://www.w3school.com.cn/
CSS:cascading style sheet:层叠级联样式表

1.0时只有基本样式,如h1标签的加粗等.
2.0时加入DIV块和css,提出HTML+CSS结构分离思想:让网页变得更简单,让网页开始做SEO
2.1时加入浮动定位
3.0时加入圆角,阴影和动画,但要注意浏览器兼容性

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

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

离要更改样式,的内容越近,优先级越高
行内>内联样式表>外联样式表

内部样式表:在head里面写style标签,在里面写css样式

<head>

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

</head>

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

<head>

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

</head>

行内样式:不建议使用,只在想偷懒时的特殊情况下使用

<span style="color: red">Hello World</span>

@import导入:要写在style的最前面,2.1版本特有

<style>
      @import url("淘宝网首页/css/index.css");
</style>

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

css

加入css后的优势

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

helloses

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础常识之引用方式和优势

1. 1.0时只有基本样式,如h1标签的加粗等.2. 2.0时加入DIV块和css,提出HTML+CSS结构分离思想:让网页变得更简单,让网页开始做SEO3. 2.1时加入浮动定位4. 3.0时加入圆角,阴影和动画,但要注意浏览器兼容性
复制链接

扫一扫