CSS——CSS样式

最新推荐文章于 2022-11-30 21:37:28 发布

secret_lee

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： CSS基础

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

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在上一篇CSS基础的博客中，我们提到了权重这一概念。即各个选择器的优先级是由权重决定的！那么什么是权重呢？

权重，就是没个选择器所拥有的一个代表它们的重要程度的值，即，选择器的优先级是通过比较它们所拥有的权重值而得到的。

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
最后要提到的是!important，权重值为无穷大。（PS：虽然名为无穷大，但计算机本身是有穷的，所以!important的权值在计算机中其实也是一个确定值来表示的。所以比如!important+ID选择器的权值是可以和内联选择器的权值进行比较的。）

说完了权值，那我们先来补充一些上篇博文我们没有说完的一些选择器。

1、父子选择器/派生选择器：

<html>
<head>
    <meta charset="UTF-8">
    <title>派生选择器</title>
    <link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
    <div>
        <span>123</span>
    </div>
    <span>234</span>
    <!--通过派生选择器，我们就可以选择div标签里的span标签，而非所有span标签-->


    <!--那么浏览器是按照怎么样的顺序来遍历父子选择器的呢？-->
    <section>
        <div>
            <p>
                <a>
                    <span></span>
                </a>
            </p>
            
            <ul>
                <li>
                    <a>
                        <span>
                            <em>1</em>
                        </span>
                    </a>
                    <p></p>
                </li>
            </ul>
        </div>

        <a>
            <p>
                <em>2</em>
            </p>

            <div></div>
        </a>
    </section>        
</body>
</html>

/*lesson2.css*/

/*派生选择器， 前面是父标签名，后跟子标签名组成*/
div span{
    background-color:red;
}

/*父子选择器的遍历规则是从左往右，还是从右往左呢？*/
section div ul li a em{
    background-color:red;
}

从上面第二个例子中，我们不难知道结果是数值为1的em标签变色，但是父子选择器是以怎样的规则来搜索下改标签的就值得我们来思考了。首先让我们来画一个树形结构来表示section标签下的所有标签。我们不难发现，如果是从左往右遍历来搜索目标标签，其所经历的次数是远远高于从右往左遍历的！！！所以我们不难得出父子选择器的搜索方式是从父子结构的右标签开始遍历搜索。

2、并列选择器

<html>
<head>
    <meta charset="UTF-8">
    <title>派生选择器</title>
    <link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
    <!--如果我们现在要将值为2的标签的背景颜色修改为红色，我们该如何利用css进行选择呢？-->
    <div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>
</body>
</html>

/*并列选择器： 利用多个条件来选择某一标签，我们就使用标签选择器进行选择。*/

/*注意，这里没有空格*/
div.demo{
    background-color:red;
}

3、分组选择器

<html>
<head>
    <meta charset="UTF-8">
    <title>分组选择器</title>
    <link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
    <!--在开发过程中，为了避免耦合度过高的问题，我们需要把重复代码进行整合，而分组选择器做的就是这样一份工作。 假设我现在希望下面的三个标签的背景颜色都为红色，那么写法如下-->
    <em>1</em>
    <strong>2</strong>
    <span>3</span>
</body>
</html>

/*分组选择器：  将有共同特点的标签样式整合在一起，从而避免了代码耦合度过高的问题。*/

em, 
strong,
span{
    background-color:red;
}

4、伪类选择器

在平常浏览网页时，我们经常浏览到这样一个效果，就是当我们将鼠标移动到某一个链接时，它会有一定的特效。比如：

在这里，当我们把鼠标移动到这个链接时，这个链接变味了红色。其实呢，这样一个效果我们只是通过css一样可以实现，只是这里我们就需要用到一个新的选择器了。它就是伪类选择器！下面，让我们通过伪类选择器来实现一个这样的类似效果。

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

	<div>
		<a href="/www.baidu.com">百度一下</a>
	</div>
</body>
</html>

a:hover{
	color: orange;
}

/*使用hover，当我们把鼠标移动到这个链接上时，
链接的字体颜色就会变成橘色。
*/

其实伪类选择器还有很多，但是在平时开发过程中最常用的就是这个hover！但是我们要记住，hover是有权重的。伪类的权重是10！！！正是因为伪类有权重，所以我们才能在鼠标以上目标标签后，覆盖原有样式，实现我们想要得到的效果。

介绍完大部分选择器了，那么接下来我们开始讲解CSS的一些基础样式

首先，通过阅读前面的代码大家不难发现，css样式基本结构是由选择器、花括号、以及内部的css样式构成的。而我们接下来主要讲解的就是css有哪些样式及其作用。

PS：每个样式有许多属性值，我们这里只是讲解其中比较重要的值，要想查看该样式下的所有值，可以去https://www.w3cschool.cn/css/dict ,这是一个css词典，所有的css样式都可以在其中查询到。

1、font-size：该样式的用处是修改文本的字体大小，而浏览器默认的字体大小是16px，但是大部分的网页使用的都是12px。而在这里，font-size修改的是字体的高来改变的字体的大小。

2、font-weight：默认值为normal，当其值为blod时，字体被加粗了；所以font-weight样式控制的是字体的粗细。它的属性值按照字体从细到粗排列如下：lighter < normal < bold < bolder 。（PS：但是当我们对某些字体使用bolder样式时，字体却并没有更粗。其原因在于，一个字体有哪些样式，是取决于这个字体的字体包。如果这个字体包中该字体最粗即为bold，那么我们即使在css样式中使用bolder值也不会更粗。）

3、font-style：最重要的一个值为italic，italic实现的一个效果就是使该字体呈现斜体效果。

4、font-family：这个样式的意思是字体的意思，比如宋体、楷体等等。在互联网中，我们经常使用的一个字体时arial。

5、border：这是一个复合属性，border: border-width, border-style, border-color; 这个样式是作用就是修饰盒模型的边框。

<!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{
	
    height: 1px;
	width: 1px;
	border: 10px solid black;
	border-left-color: #f00; 
	border-top-color: #0f0;
	border-right-color: #00f;
    border-bottom-color: transparent; /*将颜色设置为透明。 */

}

6、text-align：文本对齐方式；line-height：行间距；text-indent：缩进，单位为em；text-decoration：文本装饰；

通过上面讲解的一些简单的样式，那么我们就可以进行一些简单的小游戏。之前我们在HTML中使用<del>标签来模拟删除，使用<a>标签的时候，显示出来的文本是自带下划线且为蓝色，那么现在我们自己就可以通过css实现这些样式！

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

	<div>
		<a href="http://www.baidu.com">百度一下</a>
		<span>百度一下</span>
	</div>
</body>
</html>

span{
	text-decoration: line-through;

}

div span{
	text-decoration: underline;
	color: rgb(0,0,258);
	cursor: pointer;
}

所以，类似于<del>这一类HTML中的会修改样式的标签，我们一般在开发中是禁用的。因为在开发过程中，我们遵循一个标准叫做：行为、结构、样式相分离。为了避免发生冲突，样式的控制我们就交给CSS调控，而不是使用HTML中的某些标签。

接下来，我们来总结一下从HTML讲到现在的一些知识：

首先，观察目前学到的HTML标签我们不难发现，HTML标签可以分为以下两类：

1、行级元素（inline 内联元素）

特点：1、内容决定元素位置；2、不可以通过CSS样式改变宽高；下面我们来列出有哪些标签是行级元素：

span、a、strong、em、del

2、块级元素（block）

特点：1、独占一行；2、可以通过CSS改变宽高；

div、h、p、ul、li、ol、form、address

3、行级块元素（inline-block）

特点：1、内容决定大小；2、可以通过CSS改变宽高； img标签。

然而这些样式都是有CSS中的display这个属性来控制的！！！所以如果我们控制div标签下的display样式值为inline，那么div标签就变为了一个行级元素了！！！

在开发过程中，大家常常是先写出HTML代码，然后根据HTML代码来添加对应的样式。但是在实际开发过程中，有另外一种方式进行开发，那就是先定义功能，后编写。例子如下：

假设我们现在要实现红绿灰三种颜色，同时是100px、200px、300px为长宽的正方形盒子，那么我们通过这种方法来编写一下。

首先，我们知道了有三种颜色，三种尺寸，那么我们先写出这六种css样式：

.green{
    background-color:#0f0;
}

.red{
    background-color:#f00;
}

.gray{
    background-color:grey;
}

.size1{
    width:100px;
    height:100px;
}

.size2{
    width:200px;
    height:200px;
}

.size3{
    width:300px;
    height:300px;
}

在这里，我们就根据功能先写好了CSS文件，接下来我们要实现什么样式的具体页面，我们就分别在不同的div中命名不同的class组合即可了！！比如这里我们要实现两个盒子，分别是红色的200px大小以及灰色的300px大小。

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

这样我们就做出了我们想要的页面了。

以上就是CSS的基本样式以及一些复杂选择器的知识。在下一篇博客，我将讲解CSS中的高级概念即：盒子模型与层模型。

secret_lee

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——CSS样式

在上一篇CSS基础的博客中，我们提到了权重这一概念。即各个选择器的优先级是由权重决定的！那么什么是权重呢？权重，就是没个选择器所拥有的一个代表它们的重要程度的值，即，选择器的优先级是通过比较它们所拥有的权重值而得到的。第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.co...
复制链接

扫一扫

专栏目录