01.三原色与样式选择器

最新推荐文章于 2024-04-17 21:16:15 发布

忙碌的上帝シ

最新推荐文章于 2024-04-17 21:16:15 发布

阅读量204

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_41905827/article/details/105230445

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS

一. 三原色

在网页中我们可以直接书写颜色的名字，但是却记不了这么多的单词。可以使用 RGB（red green blue）三原色来表示颜色，书写形式为：

#ff00ff;

注意: 必须以#开头，后面紧跟着为6个16进制数，前两位为红色，中间两位为绿色，最后两位为blue.

#ff0000;   红色
#00ff00;   绿色
#0000ff;   蓝色
#ffffff;   白色
#000000;   黑色

二. 字体样式

<span style="color:red; font-size: 34px;">字体</span>

三. 样式选择器

3.1 标签选择器(重要）

<style>
	/** 让所有的div使用同一中样式 */
	div {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>

3.2 id选择器(不重要)

<style>
	/** 将id为box1的盒子应用以下样式 */
	#box1 {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>

在实际的工作中，定义样式采用class, 使用js的使用id.

3.3 类选择器(非常重要)

<style>
	/** 将id为box1的盒子应用以下样式 */
	.box1 {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box1"></div>
</body>

为什么使用类选择器：

1. 为了样式可重用性。
2. 为了代码的可维护性。

3.4 通配符选择器

* {
      margin: 0;
      padding: 0;
  }

在实际工作只用这一种用法。

3.5 后代选择器(非常重要)

.box1 li{    /** 中间必须是空格，表示class为box1, 所有的后代li都应用以下样式 */
    color: green;
}
<body>
    <!-- 如下的三个案例都会应用上如上的样式 -->
    <div class="box1">
        <ul>
            <li>用户</li>
            <li>系统</li>
            <li>菜案</li>
        </ul>
    </div>
    <ul class="box1">
        <li>用户</li>
        <li>系统</li>
        <li>菜案</li>
    </ul>
   
   <div class="box1">
        <div>
            <div>
                <ul>
                    <li>电脑</li>
                    <li>手机</li>
                    <li>计生用品</li>
                </ul>
            </div>
        </div>
    </div>
</body>

3.6 子选择器(用的较少)

<style>
        /**
            .box1的直接的儿子p, 变为红色
         */
        .box1>p {
            color: red;
        }
</style>
</head>
<body>
	<!-- 会应用如上定义的样式 -->
    <div class="box1">
        <p>文字</p>
        <p>系统</p>
        <p>菜案</p>
    </div>
    <!-- 不会应用如上定义的样式 -->
    <div class="box1">
        <div>
            <p>文字1</p>
            <p>系统1</p>
            <p>菜案1</p>
        </div>
    </div>
</body>

3.7 交集选择器(用的很少)

<head>
 	<style>
        /**
            p.red 意思是即是p标签，class又为red
         */
        p.red{
            color: red;
        }
    </style>
</head>
<body>
	<!-- 如下的三个盒子会应用如上定义的样式 -->
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <!-- 如下的两个盒子不会应用如上定义的样式 -->
    <p>绿色</p>
    <p>绿色</p>
</body>

3.8 并集选择器(非常重要)

<style>
		/** 所有p标签，span标签，含有class="red"下的所有的li标签 */
        p, span, .red li{
            color: red;
        }
        /*p {
            color: red;
        } */
        /*span {
            color: red;
        }*/
        /*.red li {
            color: red;
        }*/
    </style>
</head>
<body>
    <p>red</p>
    <p>red</p>
    <!-- .red li {} -->
    <div class="red">
        <span>文字</span>
        <ul>
            <li>电脑</li>
            <li>手机</li>
        </ul>
    </div>

    <div>green</div>

    <span>red</span>
    <span>red</span>
</body>

3.9 链接伪类选择器(非常重要)

爱恨法则(love hate)

lv包包，hao

a {
	text-decoration: none;   /** 去掉a标签的下划线 */
}
/* 是连接正常情况情况下的样式 */
a:link {
	color: orange;
}
/* 访问过之后所呈现的颜色 */
a:visited {
	color: red;
}
/* 鼠标停留在a标签上的样色 */
a:hover {
	color: green;
}
/* 当鼠标按下的时候，但是没有松手的时候呈现的样式 */
a:active {
	color: darkblue;
}

A. a标签中不要嵌套a标签。

B. a标签中虽然可以放块级元素，但是在实际的工作中，我们需要将其转换为块级元素。

C. 在实际的工作总，a标签用的最多只有hover.

3.10 css3高级选择器

<style>
	/** ul下的第一个li标签 */
	/** 
	ul > li:first-child {
		color: #41A0BF;
	}
	*/
    /** ul下的第一个li标签 */
	ul > li:nth-child(1) {
		color: deeppink;
	}
    /** ul下的第二个li标签 */
	ul > li:nth-child(2) {
		color: green;
	}
    /** ul下的第三个li标签 */
	ul > li:nth-child(3) {
		color: purple;
	}
     /** ul下的第四个li标签 */
	ul > li:last-child {
		color: red;
	}
</style>
<body>
	<ul>
        <li>电脑</li>
        <li>手机</li>
        <li>计生用品</li>
        <li>日用品</li>
    </ul>
</body>

忙碌的上帝シ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
01.三原色与样式选择器

CSS一. 三原色在网页中我们可以直接书写颜色的名字，但是却记不了这么多的单词。可以使用 RGB（red green blue）三原色来表示颜色，书写形式为：#ff00ff; 注意: 必须以#开头，后面紧跟着为6个16进制数，前两位为红色，中间两位为绿色，最后两位为blue.#ff0000; 红色#00ff00; 绿色#0000ff; 蓝色#ffffff; ...
复制链接

扫一扫