HTML5教程

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

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

文章目录

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

1.何为CSS

image-20210912130648514

2.CSS基本样式

image-20210912131148426

3.CSS选择器

CSS常用三种选择器：

image-20210912134604417

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

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

4.为HTML添加CSS

4.1.添加方式

image-20210912132021534

4.2.实践一下

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

image-20210912142935659

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

image-20210912142545874

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

image-20210912142700903

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

image-20210912142756809

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

image-20210912143050572

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，内层的优先级更高，因此该部分内容背景颜色变成蓝色

image-20210912150419327

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