CSS知识归纳

程序员正正

已于 2022-04-04 10:30:23 修改

阅读量238

点赞数

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

于 2022-03-21 08:38:03 首次发布

本文链接：https://blog.csdn.net/WXxz0/article/details/123626344

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括选择器、美化元素（如字体、阴影、背景等）、盒子模型、浮动、定位、动画，以及如何通过CSS提升网页设计效果。同时涵盖了外部样式的导入方式和关键概念，适合初学者快速上手。

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

1. CSS快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--规范,<style> 可以编写css的代码, 每一个声明, 最好使用分号结尾
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
            ......
        }
        -->
    <style>
        h1{
            color: red;
        }

    </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议分离样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b72WUjuF-1647822069366)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320114800592.png)]$

CSS的优势

内容和表现分离
网页结构表现统一，可以实现复用.
样式十分的丰富
建议使用独立于html的CssS文件
利用SEO,容易被搜索弓|擎收录!

CSS的三种导入方式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9A5s4Vav-1647822069367)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320115652467.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zphReYcJ-1647822069367)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320115719660.png)]$

拓展:外部样式的两种写法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ILmRozfT-1647822069368)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320115846756.png)]$

2. 选择器

作用:选择页面上的某一个或者某一类元素

基本选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQvTHOkq-1647822069369)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320160037108.png)]$

标签选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NK7z8cNh-1647822069370)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320155305823.png)]$

类选择器class

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1DNN9CLG-1647822069370)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320155551719.png)]$

Id 选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnKOd4QP-1647822069371)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320155812382.png)]$

层次选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9aFCPHoz-1647822069372)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320160913950.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QfM00BU-1647822069372)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320160924225.png)]$

结构伪类选择器

伪类:条件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QqncFCWw-1647822069374)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320162204143.png)]$

属性选择器(常用)

id + class 结合~

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8lbWTxJk-1647822069375)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320163220668.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2DlNwemY-1647822069376)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320163248849.png)]$

3. 美化网页元素

为什么要美化网页

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JyWmdUkW-1647822069377)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320163623559.png)]$

字体样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ajFjhLx2-1647822069378)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320164210070.png)]$

文本样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-twldnsIm-1647822069379)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320165429168.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NjvdtgpU-1647822069379)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320165948875.png)]$

阴影

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uuPu1SUL-1647822069380)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320170230514.png)]$

超链接伪类

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Lpn93pm-1647822069380)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320170321090.png)]$

列表

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uq64sRuG-1647822069380)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320171030848.png)]$

背景

背景颜色

背景图片

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfJoroNJ-1647822069381)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320171515849.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpS9YiAE-1647822069381)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320171801484.png)]$

渐变

https://www.grabient.com/

这个网站可以选别人调好的渐变色

background-color: #4158D0;
background-image: linear-gradient(333deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4. 盒子模型

什么是盒子盒子模型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0m4KQKnX-1647822069381)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320172922631.png)]$

margin: 外边距

padding: 内边距

border: 边框

边框

边框的粗细
边框的样式
边框的颜色

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-72keV8mq-1647822069382)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320181154352.png)]$

内外边距

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D9ZCRvNE-1647822069382)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320192524209.png)]$

盒子的计算方式:这个元素有多大

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-arjLTyEJ-1647822069383)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320192554635.png)]$

margin + border + padding + 内容宽度

圆角边框

4个角

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hsRJaHId-1647822069383)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320193446727.png)]$

盒子阴影

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eFfwu8ZD-1647822069384)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320193705720.png)]$

5. 浮动

标准文档流

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDsiRzke-1647822069384)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320201039320.png)]$

display

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DKBBl9hB-1647822069385)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320201908581.png)]$

这个也是一种实现行内元素排列的方式,但是我们很多情况都使用float

float

左右浮动

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XxI1Wjis-1647822069385)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320201838785.png)]$

父级边框塌陷的问题

clear

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xeQ3up0S-1647822069385)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320202541599.png)]$

解决方案

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-spc95pLr-1647822069386)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320202716403.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ueNlAcbF-1647822069386)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320212900007.png)]$

小结

浮动元素后面增加空div
简单，代码中尽量避免空div .
设置父元素的高度
简单，元素假设有了固定的高度,就会被限制
overflow
简单，下拉的- -些场景避免使用
父类添加一一个伪类: after (推荐)
写法稍微复杂- -点, 但是没有副作用，推荐使用!

对比

display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

6. 定位

相对定位

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IoY6Ppwq-1647822069387)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320214705302.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2qiGyY4-1647822069387)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320214946796.png)]$

示例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lryhQcOC-1647822069387)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320215418335.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qPVKDX2z-1647822069388)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320215437205.png)]$

绝对定位

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHw0vr7f-1647822069388)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320215806784.png)]$

固定定位fixed

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i1n2zQnv-1647822069388)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320220048147.png)]$

z-index

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8iCMwdpl-1647822069389)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320220233267.png)]$

图层~

z-index : 默认为0, 最高无限~

opacity:0.5; /背景透明度/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ihbcrjsr-1647822069389)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320221015205.png)]$

7. 动画

8. 总结

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mXZhkSKg-1647822069389)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320222731399.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-voEiOVxU-1647822069390)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320222757737.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywsFbWfR-1647822069391)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320222812624.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ZLaSwzz-1647822069391)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320222832684.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CsGry91B-1647822069391)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220320222842923.png)]$

程序员正正

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录