CSS——CSS基础

最新推荐文章于 2024-01-22 06:49:10 发布

secret_lee

最新推荐文章于 2024-01-22 06:49:10 发布

阅读量714

点赞数 2

分类专栏：前端文章标签： css样式基础

本文链接：https://blog.csdn.net/secret_lee/article/details/86914427

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

IE：trident；Firefox：Gecko；Google Chrome：Webkit/blink；Safari：Webkit；Opera：presto；

这里我们列出了目前市场上的主流浏览器及其所用的内核，目的会在接下来的博客中解释。

在开始讲解CSS之前，我们需要知道css是干什么的？

CSS叫cascading style sheet ：层叠样式表，是用来装饰我们的HTML的。

1、引入css

要使用css我们首先要能够引用CSS代码到HTML代码中

a.行间样式

b.页面级样式

<html>
<head>
    <title>css样式</title>
    <meta charset="utf-8">
    <style>
        div{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

c.外部CSS文件！！！（很重要）

//文件名叫lesson2.css
div{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: red;
}

<!DOCTYPE html>
<html>
<head>
	<title>css样式</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="lesson2.css">
    <!--在这里我们引用了这个css样式文件-->
</head>
<body>
	<div></div>
</body>
</html>

2、CSS选择器

当我们引入了CSS样式过后，那么我们自然就要把CSS样式应用到我们的HTML中。但是我们如何把某一部分css样式应用到对应的HTML结构中呢？这个时候我们就要使用css中的选择器，来选择css要作用的范围。以保证这段css样式是作用于我们想要它应用到的HTML结构上。

a.id选择器

一个元素只能有一个id，所以id与元素之间是一一对应的。

<!DOCTYPE html>
<html>
<head>
	<title>css样式</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
	<!--id选择器-->
	<div id="only">123</div>
</body>
</html>

#only{
	background-color: red;
}

b.class选择器

我们先试着看一下class选择器的HTML以及CSS代码。

<!DOCTYPE html>
<html>
<head>
	<title>css样式</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>

	<div class="demo demo1">123</div>
    <div class="demo">234</div>
</body>
</html>

//选择class就是在css样式表中，添加这个元素的class的名字，并且在前面加上一个.号。
.demo{
	background-color: red;
}

.demo1{
    color:#f0;
}

那么id选择器与class选择器有什么区别呢？看起来都差别不大呀~。

还记得我们说id是一一对应的吧~~。但是class不是这样的。一个class可以对应多个元素，同样一个元素可以有多个class！而这些例子也在上面的代码中有演示。

c.标志选择器

标志选择器的意思就是我们通过标签元素来直接锁定css作用的对象。

<!DOCTYPE html>
<html>
<head>
	<title>css样式</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>

	<div></div>

</body>
</html>

div{
    background-color:red;
}

d.通配符选择器

我们先来看一下通配符选择器的代码实例：

<!DOCTYPE html>
<html>
<head>
	<title>css样式</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
	<div>123<div>
    <span>234</span>
    <strong>345</strong>
</body>
</html>

*{
    color:#f40;
}
//* 号在生活中代表的就是any，任意的意思。所以在这里，它就表示所有在引用了该css样式的HTML文件中出现了的标签都会被这个*下的样式所应用。

所以通配符选择器很简单，它就是作用于当前HTML文件下的所有标签。{注：不仅仅是作用于<p><h>这些标签，<body>这些标签也是被通配符选择器作用到了的哟！！！}

3、选择器的优先级！！

上面我们说了总共有四种css选择器，那么同一个css文件中出现了这四种选择器，那么谁的优先级更高~~，同时作用于一个标签，那么这个标签是听哪个选择器的呢？？？那么老规矩~~，no code，say 98K~~。我们在代码中分别尝试一下~。

<html>
<head>
    <title>css选择器优先级</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
    <div id="demo1" class="demo2">123</div>
    <span class="demo3">234<span>
    <strong>345</strong>
</body>
</html>

//比较id选择器以及class选择器
#demo1{
    background-color:red;
}
.demo2{
    background-color:blue;
}

//比较class选择器以及标志选择器
.demo3{
    color:red;
}
span{
    color:blue;
}

//比较标志选择器以及通配符选择器
strong{
    color:red;
}

*{
    color:yellow;
}

运行上面的代码，我们可以通过对比得到结果。

id选择器 > class选择器 > 标志选择器 > 通配符选择器

让我们回忆下，之前我们讲过一个行间样式，这里我直接告诉大家，大家可以下来实验，就是行间样式的优先级是高于外部css文件的id选择器的。

接着我们要引入一个属性选择器；这个属性选择器，顾名思义是通过标签中的属性进行锁定css样式对象。写法如下：

[属性名] ==》即中括号括上属性名，比如： [id]这代表所有拥有id这个属性的标签都会被这个选择器选中，同样，[class]表示所有拥有class这个属性的标签会被选中。

那么属性选择器的优先级和class、id选择器的优先级是怎么样的呢？

<html>
<head>
    <title>css选择器优先级</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
    <div id="demo1">123</div>
    <div class="demo2">234</div>
    <div class="demo3">345</div>
</body>
</html>

//id选择器和属性选择器
#demo1{
    background-color:red;
}

[id]{
    background-color:blue;
}

//class选择器与属性选择器
.demo2{
    background-color:yellow;
}

[class="demo2"]{
    baskground-color:blue;
}

//class选择器和属性选择器在css样式表中顺序替换一下
[class="demo3"]{
    background-color:blue;
}

.demo3{
    background-color:red;
}

通过代码实验，我们发现，属性选择器的优先级低于id选择器，但是它的优先级和class选择器是同级的！！！他们作用于同一标签时，是决定于它们在css文件中的先后顺序的！

其次，如果我们在一个样式后面加上一个!important，那么这个样式就是“老大”；

比如 background-color:red;!importtant，那么这个样式即使遇到行间样式，依旧使用这个样式。

所以综上所述，最后的排序如下：

!important > 行间样式 > id选择器 > class选择器 | 属性选择器 > 标志选择器 > 通配符选择器

虽然记住上面这个大小关系已经够用了，但是其实上面的优先级是通过CSS权重来判断的！！！CSS权重我们会在下一篇博客涉及到，CSS基础就讲到这里啦~~~。

PS：这篇博客中，对一些概念我没有进行详细的描述，比如使用id选择器，就是在id名前加一个#号等等。但是这些概念我都在代码中进行了展示了的。所以只要大家将这些代码进行了运行，就一定会收获这些我没有直接写出来的知识，会有自己的心得。毕竟编程不是一门只是光靠看就能大成的事情，编程一定一遍学习，一边动手自己操作！！！所以以后的博客也是伴随着大量的代码和少量必要的讲解。重要的事情再说一遍，学习编程，一定一定要多动手练习！！！

secret_lee

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS——CSS基础

IE：trident；Firefox：Gecko；Google Chrome：Webkit/blink；Safari：Webkit；Opera：presto；这里我们列出了目前市场上的主流浏览器及其所用的内核，目的会在接下来的博客中解释。在开始讲解CSS之前，我们需要知道css是干什么的？CSS叫cascading style sheet ：层叠样式表，是用来装饰我们的HTML的。...
复制链接

扫一扫

专栏目录