CSS基本概念

最新推荐文章于 2023-10-04 21:22:18 发布

YiLin_Classics

最新推荐文章于 2023-10-04 21:22:18 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/YiLin_Classics/article/details/123348172

版权

web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

css基本概念

css相关知识点

    css的含义：层叠样式表（cascading（层叠）、style(样式) 、sheet(表格)）
    目前来看遵循的是w3c css3.0版本相关规则

css的基本语法

选择器{
属性：属性值；
属性：属性值；
属性：属性值；
}

属性和属性值需要使用冒号链接
属性和属性值使用分号结束
基本语法分为两部分：选择器和样式规则。其中，选择器：查找页面元素的一种方法，{}：样式规则，规定选择器选择样式使用何总样式

css的引入

行内样式表
直接把语法放在标签里面进行修饰

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div style="color:red;width=100px;height=100px">我是第一个div</div>
  <div>我是第二个div</div>
  <div>我是第三个div</div>
</body>

</html>

优点：
直接快速找到对应的元素进行修饰；
缺点：
重复性比较大，样式写在行内不便于维护;
结构样式没有分离，不方便爬虫爬取。

内部样式表
需要把css样式表放在一个style里面，而style标签放在head标签里面。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      div{
      color:red;
      width=100px;
      height=100px;
      }
  </style>
</head>

<body>

  <div >我是第一个div</div>
  <div>我是第二个div</div>
  <div>我是第三个div</div>
</body>

</html>

优点：解决行内样式的弊端，结构样式没有分离
缺点：没有完全的做到结构样式分离，当页面中的元素过多时需要来回滚动页面，只能在本页面中使用，复用率不高。

外部样式表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/1.css">
</head>

<body>

  <div >我是第一个div</div>
  <div>我是第二个div</div>
  <div>我是第三个div</div>
</body>

</html>

1.css文件如下：

div{
color:red;
width:100px;
height:100px;
}

行内样式表、内部样式表、外部样式表的优先级

权重值的大小：（就近原则，谁离标签近谁的权重大）
行内和内部：行内>内部
内部和外部：内部>外部
原因：首先内部外部进行对比的时候实现的效果与代码的先后顺序有关，为了方便开发，需要把对应的外部引入进来的内容放在前面，有其他修饰的时候放在后面，即：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/1.css">
  <style>
      div{
          color:red;
       }
  </style>
</head>

<body>

  <div >我是第一个div</div>
  <div>我是第二个div</div>
  <div>我是第三个div</div>
</body>

</html>

     行内和外部：行内>外部

## ！important
比行内的优先级还要高
使用方法：
    属性：属性值 ！important;


## 另一种css的引入方法
          @import   url（css文件路径）

     **两个样式表的引入方法，区别是啥，常用哪一个？**
     
       1）概念本质角度：link标签语法遵循html语法规范，@import遵循的是css基本语法规范。
       2）兼容性问题：link使用的时候，兼容性比较强；@import是css2.0版本提到的
       3）加载顺序的问题：link引入css样式，结构和样式是同时加载的，@import是先加载方法后加载结构

YiLin_Classics

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基本概念

css基本概念css相关知识点css的基本语法css的引入行内样式表、内部样式表、外部样式表的优先级css相关知识点 css的含义：层叠样式表（cascading（层叠）、style(样式) 、sheet(表格)）目前来看遵循的是w3c css3.0版本相关规则css的基本语法选择器{属性：属性值；属性：属性值；属性：属性值；}属性和属性值需要使用冒号链接属性和属性值使用分号结束基本语法分为两部分：选择器和样式规则。其中，选择器：查找页面元素的一种方法，{}：样式
复制链接

扫一扫