作为一个后端程序员必须要会的基础的CSS知识

最新推荐文章于 2023-08-25 17:33:16 发布

没有对象就自己new一个

最新推荐文章于 2023-08-25 17:33:16 发布

阅读量491

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41187393/article/details/105283863

版权

本文介绍了CSS的基础知识，包括三原色、字体样式、样式选择器（如标签选择器、类选择器、通配符选择器等）、行内元素与块级元素的区别、盒子模型、浮动和定位。强调了类选择器的重要性，以及CSS的层叠性、继承性和优先级。还提到了CSS3的新特性，如渐变、阴影和状态改变。

摘要由CSDN通过智能技术生成

CSS的一些基础知识

一. 三原色

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

#ff00ff;

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

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

二. 字体样式

font-size:10px;		字体字号
font-weight:100;	字体粗细(100-900正整数)
font-color:#000000	字体颜色(多种方式)

三. 样式选择器

3.1 标签选择器(重要）

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

3.2 id选择器(不重要,主要是让给js用)

<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