前端速成-CSS | 01.CSS概述和使用

2021/9/26 6:12:34

编程Tag： 选择器 css html 类名添加 01 速成

本文主要是介绍前端速成-CSS | 01.CSS概述和使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

1.何为CSS
2.CSS基本样式
3.CSS选择器
4.为HTML添加CSS
- 4.1.添加方式
- 4.2.实践一下
5.CSS层级关系

1.何为CSS

2.CSS基本样式

3.CSS选择器

CSS常用三种选择器：

标签选择器：为所有<p>添加css
类名选择器：为所有class属性值为"paragraph"的标签添加css
id选择器：为所有id属性为"para1"的标签添加css

通常在同一个HTML中，类名可以不唯一，但id必须唯一

4.为HTML添加CSS

4.1.添加方式

4.2.实践一下

先为HTML元素定义好类名或id：

在resources文件夹中，创建css文件夹，在其中创建css文件

在css文件中，定义外部样式表——HTML定义了类名，因此用类名选择器

在HTML的<head>中，使用<style>引入这个css：

<head>
    <link rel="stylesheet" href="css所在路径"/>
</head>

5.CSS层级关系

越里层，使用的优先级越高，以下方代码为例：

.outer {
    background-color: yellow;
}

.inner {
    background-color: blue;
}

<!--被添加css，背景变成黄色-->
<div class="outer">
    <div>
        内容1
    </div>
    
    <!--该部分既属于outer的div标签中内容，也属于innerdiv标签中内容-->
    <!--此时内层的css优先级更高，即背景会变成蓝色-->
    <div class="inner">
        内容2
    </div>
</div>

内容1属于类名为outer的div，由于该标签被类名选择器选中，因此标签内容会被添加css，使得背景颜色变为黄色
内容2既属于类名为outer的div，又属于类名为inner的div，内层的优先级更高，因此该部分内容背景颜色变成蓝色

这篇关于前端速成-CSS | 01.CSS概述和使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！