【CSS】CSS基础知识扫盲

1、 什么是CSS?

CSS即层叠样式表 (Cascading Style Sheets) .

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离

2、 CSS引入方式

CSS代码编写的时候有多种引入方式:

内部样式、外部样式、内联样式

2.1 内部样式

写在 style 标签中. 嵌入到 html 内部.

理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.

html 复制代码
<style>
        div {
            font-size: 50px;
            color: green;
        }
    </style>

2.2 外部样式

实际开发中最常用的方式.
🚕1. 创建一个 css 文件.
🚕2. 使用 link 标签引入 css

link标签存在head标签中:

html 复制代码
<link rel="stylesheet" href="hello.css">
html 复制代码
<div>
        hello
</div>

2.3 内联样式

html 复制代码
<div style="color:blue; font-size: 20px;">hello</div>

3、CSS选择器

选择器的功能:选中页面中指定的标签元素

3.1 标签选择器

使用标签名把页面中同名标签的元素都选中了

缺点:难以对某个元素进行个性化的定制

html 复制代码
<style>
        div {
            color: aqua;
        }
</style>
html 复制代码
<div>hello</div>
<div>world</div>

3.2 类选择器

🚑1、差异化表示不同的标签
🚑2、可以让多个标签的都使用同一个标签

html 复制代码
<style>
        .allred {
            color: red;
        }
        .allgreen {
            color: green;
        }
</style>
html 复制代码
<div class="allred">hello</div>
<div class="allgreen">world</div>

注意:
🚕1、类名用 . 开头的
🚕2、下方的标签使用 class 属性来调用
🚕3、一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)

3.3 id选择器

html 复制代码
<style>
        #a {
            color: brown;
            font-size: 30px;
        }
        #b {
            color: blueviolet;
            font-size: 30px;
        }
    </style>
html 复制代码
<div id="a">hello</div>
<div id="b">world</div>

注意:
🚓1、CSS 中使用 # 开头表示 id 选择器
🚓2、id 选择器的值和 html 中某个元素的 id 值相同
🚓3、html 的元素 id 不必带 #
🚓4、id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

3.4 后代选择器

上面三个选择器都是基础的选择器,后代选择器则是"复合选择器"

后代选择器的效果就是把上面三种基础选择器,进行组合,同时能够体现出"标签的层次结构"

html 复制代码
<style>
        .one h3 {
            color: red;
            font-size: 30;
        }
        .two h3 {
            color: blue;
            font-size: 30;
        }
        #three h2 {
            color: green;
            font-size: 30;
        }
</style>
html 复制代码
<div class="one">
        <h3>hello</h3>
</div>

<div class="two">
        <h3>world</h3>
</div>

<div id="three" class="one">
        <h2>haha</h2>
        <h3>hehe</h3>
</div>

4、CSS常见属性

4.1 字体相关

html 复制代码
<style>
        .one {
            color: red;
            font-family: '宋体';
            font-size: 100px;
            font-weight: 900;
            font-style: italic;
        }
</style>
html 复制代码
<div class="one">
        hello
</div>

4.2 文本相关

html 复制代码
<style>
        .two {
            font-size: 50px;
            color: blue; /*文本颜色*/
            text-align: center; /*文本对齐:左对齐(left)右对齐(right)居中(center)*/
            text-decoration: underline; /*文本装饰 加下划线之类的*/
            text-indent: 30px;  /*文本缩进 首行缩进多大空间*/
            line-height: 100px;  /*行间距*/
        }
</style>
html 复制代码
<div class="two">
        hello
</div>
<div class="two">
        world
</div>


颜色属性:
color 属性值的写法:
🚌1、预定义的颜色值(直接是单词)
🚌2、[最常用] 十六进制形式
🚌3、RGB 方式

html 复制代码
<style>

    .color {
        color: red;
        /* color: rgb(255, 0, 0); */
        /* color: #ff0000; */
   }

</style>

<div class="color">hello</div>

4.3 背景相关

🚌background-color设置背景颜色

html 复制代码
<style>
        .one {
            color: greenyellow;
            font-size: 100px;
            height: 300px;
            width: 300px;
            background-color: gray;
        }
</style>
html 复制代码
<div class="one">hello</div>

🚌background-image: url(...);设置背景图片

html 复制代码
<style>
        .one {
            background-image: url(ikun.png);
            font-size: 50px;
            color: rgb(0, 0, 0);
            height: 500px;
            width: 500px;
            background-color: gray;
        }
</style>
html 复制代码
<div class="one">ikun</div>

默认背景图是"平铺"的,我们可以禁止平铺

html 复制代码
background-repeat:no-repeat;

还可以通过background-position: center; 来调整图片位置

相关推荐
m0_7482550211 分钟前
前端常用算法集合
前端·算法
真的很上进24 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web1309332039831 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2341 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww2 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest