CSS样式与选择器

最新推荐文章于 2024-04-16 12:23:43 发布

cyrdjjn

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量226

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/cyrdjjn/article/details/105310761

版权

CSS样式与选择器

三原色(以六位十六进制数表示颜色)
如#ffffff 前两位表示红，中间两位表示绿，后两位表示蓝，三种原色混合成一种新的颜色。

CSS基础语法
CSS主要是由两个部分构成:选择器和样式申明(由一个属性和一个值组成)形式为:选择器{样式申明}

内联样式
内联样式即在html标签内使用样式
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!-- 内联样式-->
    <div style="width:50px;height:50px;background-color: #51b7ec;">hallo</div>
</body>
</html>

在我们实际工作中，因为内联样式是写在HTML标签中的，一旦有多个标签用到相同的样式，我们就需要重复的写内联样式，这样不仅看起来很乱，更重要的是修改也不方便

内部样式
内部样式即在头部(即hread标签)内定义一个样式表，样式表中定义的选择器可以提供给多个标签使用，提高样式的复用性
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    	<!-- 内部样式-->
        .ys{
            width:50px;/* 定义div标签的宽为50像素 */
            height:50px;/* 定义div标签的高为50像素 */
            background-color: #51b7ec;/* 定义div标签的背景颜色 */
        }
    </style>
</head>
<body>
    <div class="ys">hallo</div>
    <span class="ys">你好</span>
</body>
</html>

外部样式
当我们定义的样式多了之后，页面很容易显得杂乱，这时我们可以创建一个后缀为".css"文件(这里当成mycss.css)来定义我们的样式，再把样式引入进html，这样就会显得非常简洁，极大提高了工作效率。
mycss.css:

.ys{
    width: 50px;
    height: 50px;
    background-color: #51b7ec;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	/* 将定义在.css文件的样式引入以供使用 */
    <link type="text/css" rel="stylesheet" href="mycss.css"/>
</head>
<body>
    <div class="ys">hallo</div>
</body>
</html>

CSS选择器：
CSS选择器在html的部分定义，分为许多类型:

1: 标签选择器
<标签名 class=“class名”></标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: #51b7ec;
        }
    </style>
</head>
<body>
	<div class="a"></div>
</body>
</html>

如：

/* 标签选择器 */
div{
	/* 意思是这些样式在div标签生效 */
	width: 100px;
	height: 100px;
	color: red
}

2:id选择器:
#id名{
属性1:值1；
属性2:值2；
属性n:值n；
}
<标签名 id=“id名”></标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	/* id选择器 */
        #aa{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
	<div id="aa"></div>
</body>
</html>

3: 通配选择器:
不同的浏览器各个标签盒默认的边距(margin)大小不同，这就导致一个布局完好的html文件在以不同的浏览器打开的时候，可能会出现布局混乱的现象，所以一般我们可以使用通配选择器(即改变这个html文档中所有的标签样式)，把所有的标签盒子的默认边距置空
*{
margin:0
}

4:子选择器
顾名思义，子选择器，就是只有选择器1下的子辈选择器2中的内容适配样式
选择器1>选择器2{
属性1:值1；
属性2:值2；
属性n:值n；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 子选择器*/
        .box>b{
            color: yellow;
            width: 99px;
            height：99px;
        }

    </style>
</head>
<body>
<div class="box">
	
    <b>我想转变样式</b>
    <b>我也想转变样式</b>
    <span>
        <b>我不想转变样式</b>
        <b>我也不想转变样式</b>
    </span>
</div>
</body>
</html>

在这里插入图片描述

5:后代选择器
一个选择器(选择器1)下的指定选择器(选择器2)应用样式(这个指定选择器无论是在选择器1下的子选择器下还是就在选择器1下都能应用)；
选择器1 选择器2{
属性1:值1;
属性2:值2;
属性n:值n;
}
5.1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	/* 后代选择器 */
        div b{
            color: red;
        }
    </style>
</head> 
<body>
    <div>
        <p>
            <b>你好</b>
            <u>hallo</u>
        </p>
        <b>大家好</b>
    </div>
</body>
</html>

在这里插入图片描述
可以看到无论是div下的b标签还是div标签下的p标签下的b标签都变了红色

5.2：除此之外，还可以：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 后代选择器*/
        .box b{
            /* .box下的b标签适用这些样式 */
            color: yellow;
        }
    </style>
</head>
<body>
<div>
    	<span class="box">
            <p>
                <b>我想转变样式</b>
            </p>
        <b>我也想转变样式</b>
        </span>
    <span>
        <b>我不想转变样式</b>
        <b>我也不想转变样式</b>
        </span>
</div>
</body>
</html>

在这里插入图片描述
后代选择器是非常重要的一个内容。实际开发过程中，一个项目可能由不同的人开发，就很容易出现class样式写重的情况，使用后代选择器可以很好的避免这种现象。
同时，后代选择器使我们的标签在哪个位置非常明显，有利于我们的修改。

6:并集选择器
并集选择器中各个选择器是并列的关系。
选择器1，选择器2，选择器n{
属性1:值1;
属性2:值2;
属性n:值n;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 并集选择器 .box p后代选择器 */
        div,b,.box p,#id{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span class="box">
        <p>你好</p>
    </span>
    <b>我是b</b>
    <i>我是i</i>
    <a id="id" href="#">id</a>
    <u>我是u</u>
</body>
</html>

这里的例子结合后代选择器一起使用在这里插入图片描述
7:链接伪选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 链接伪标签 */
        a{
            /* 取消a标签的下划线 */
            text-decoration: none;
        }
        a:link{
            /* 设置a标签平常的样式 */
            color: blue;
        }
        a:visited{
            /* 设置a标签被访问过后的样式 */
            color: green;
        }
        a:hover{
            /* 设置a标签被鼠标指针指着时(还没点击)的样式 */
            color: red;
        }
        a:active{
            /* 设置a标签被点击时的样式 */
            color: yellow;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

注意:如果link、visited、hover、active要一起使用的话，一定要按顺序来。

cyrdjjn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式与选择器

CSS(层叠样式表)三原色(以六位十六进制数表示颜色)如#ffffff 前两位表示红，中间两位表示绿，后两位表示蓝，三种原色混合成一种新的颜色。CSS基础语法CSS主要是由两个部分构成:选择器和样式申明(由一个属性和一个值组成)形式为:选择器{样式申明}内联样式内联样式即在html标签内使用样式如：<!DOCTYPE html><html lang="en"&g...
复制链接

扫一扫