前端总结之CSS(层级样式表)

最新推荐文章于 2024-08-21 15:03:08 发布

liubin5620

最新推荐文章于 2024-08-21 15:03:08 发布

阅读量4.8k

点赞数 1

分类专栏：前端设计

本文链接：https://blog.csdn.net/liubin5620/article/details/79733196

版权

6 篇文章 0 订阅

订阅专栏

cascading style sheet,层级样式表，表现HTML或者XHTML文件样式的计算机语言：包括对字体、颜色、边框、高度、宽度和背景图片，网页定位等等的设定；

选择器{   声明1:
          声明2:
       }

例如：
 h1{                 //选择器(标签选择器，或者叫元素选择器)
    font-size:12px;  //属性：属性值
    color:#ffffff;   //属性：属性值
    }

直接写在标签的属性style里面，如下：

<h1 style="font-size:12px;color:#ffffff;">字体大小和颜色</h1>

<style type="text/css">
  h1{
     font-size:12px;
     color:#ffffff;
    }
</style>

使用外部样式，是为了降低多个页面引用相同样式而产生的代码重复，提高代码复用。将css代码保存在扩展名为.css的样式表中，HTML文件引入.css样式表，有两种方式。1、链接式。2、导入式；

链接式：在<head></head>里面，链接外部样式表=> <link ref="stylesheet" href="style.css" type="text/css" />

导入外部样式表：在<style type="text/css"></style>中加入=> @import url("style.css")

链接式和导入式的区别：

1、链接式中<link />标签属于XHTML，导入式中@import属于CSS2.1

2、使用<link />链接的CSS文件先加载到网页中，然后再进行编译显示；使用导入式导入CSS文件，客户端显示HTML结构，再把CSS文件加载到网页中。

3、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器是不兼容的。

行内样式 >（优先于）内部样式 > (优先于) 外部样式

简介：什么是CSS选择器呢？所谓的CSS选择器，是指如何选择指定选择器并给它加上样式。基本选择有以下几种：标签选择器、类选择器和ID选择器。

ID选择器 > 类选择器 >标签选择器

关注

专栏目录