CSS基础

已于 2023-03-08 22:09:05 修改
阅读量397 收藏
点赞数
文章标签： css 前端 html
于 2023-02-28 18:15:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaose10086/article/details/129223736
版权

CSS

CSS简介

CSS语法规范

在这里插入图片描述

CSS基础选择器

选择器的作用

在这里插入图片描述

主要的基础选择器

在这里插入图片描述

标签选择器

在这里插入图片描述

类选择器

定义语法注意事项

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

多类名

在这里插入图片描述

id选择器

定义语法注意事项

在这里插入图片描述

id选择器和类选择器的区别

在这里插入图片描述

通配符选择器

定义语法注意事项

在这里插入图片描述

CSS字体属性

在这里插入图片描述

字体系列

在这里插入图片描述

字体大小

在这里插入图片描述
标题比较特殊，需要单独指定文字大小

字体粗细

在这里插入图片描述

文字样式

在这里插入图片描述

字体复合属性

在这里插入图片描述

CSS文本属性

在这里插入图片描述

文本颜色

在这里插入图片描述

对齐文本

在这里插入图片描述

装饰文本

在这里插入图片描述

文本缩进

在这里插入图片描述

行间距

在这里插入图片描述

CSS的引入方式

在这里插入图片描述

内部样式表

在这里插入图片描述

行内样式表

在这里插入图片描述

外部样式表

在这里插入图片描述

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例一</title>

    <style>
        body {
            font: 16px/28px '微软雅黑';
        }
        h1 {
            font-weight: 400;
            text-align: center;
        }
        .gray {
            color: #888888;
            text-align: center;
            font-size: 12px;
        }
        a {
            text-decoration: none;
        }
        .serch {
            color: #666666;
            width: 170px;
        }
        p {
            text-indent: 2em;
        }
        .picture1 {
            text-align: center;
        }
        .footer {
            color: #888888;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="gray"> 
        2019-07-03 16:31:47 来源:
        <a href="http://www.weather.com.cn/" target="_blank">中国天气网&nbsp;</a>
        <input type="text" value="请输入查询条件" class="serch"><button><strong>搜索</strong></button>
    </div>
    <hr>
    <p>
        中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。
        预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，
        预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
    </p>
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p>
        今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，
        陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。
        大城市中，北京、天津、郑州均迎来高温日。
    </p>
    <p class="picture1">
        <img src="图片/CSS综合案例1.jpg">
    </p>
    <p>
        在阳光暴晒下，地表温度也逐渐走高。
        今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。
        其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
    </p>
    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>
        中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，
        高温强度和范围都将发展到最强。 
        明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
    </p>
    <p>
        不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，
        当地的高温还会天天上岗。
        在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。
        （文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）
    </p>
    <p class="footer">
        本文来源：中国天气网 责任编辑：刘京_NO5631
    </p>
</body>
</html>

Emmet语法

快速生成HTML结构语法

在这里插入图片描述

快速生成CSS样式语法

在这里插入图片描述

快速格式化代码

CSS复合选择器

什么是复合选择器

在这里插入图片描述
在这里插入图片描述

后代选择器

在这里插入图片描述

子选择器

在这里插入图片描述

并集选择器

在这里插入图片描述

伪类选择器

在这里插入图片描述

链接伪类选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

:focus 伪类选择器

在这里插入图片描述

CSS元素显示模式

什么是元素显示模式

在这里插入图片描述
在这里插入图片描述

块元素

在这里插入图片描述

行内元素

在这里插入图片描述

行内块元素

在这里插入图片描述

元素显示模式转换

在这里插入图片描述

案例二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例二</title>
    <style>
        /* 1.把a转化为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        /* 2.鼠标经过链接变换颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#" target="_blank">手机 电话卡</a>
    <a href="#" target="_blank">电视 盒子</a>
    <a href="#" target="_blank">笔记本 平板</a>
    <a href="#" target="_blank">出行 穿戴</a>
    <a href="#" target="_blank">智能 路由器</a>
    <a href="#" target="_blank">健康 儿童</a>
    <a href="#" target="_blank">耳机 音响</a>
</body>

</html>

CSS背景

在这里插入图片描述

背景颜色

在这里插入图片描述
在这里插入图片描述

背景图片

在这里插入图片描述

背景平铺

在这里插入图片描述

背景图片位置

在这里插入图片描述在这里插入图片描述

背景图像固定

在这里插入图片描述

背景复合写法

在这里插入图片描述

背景色半透明

在这里插入图片描述

案例三

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例三</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(图片/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background: url(图片/bg11.png) no-repeat;

        }

        .nav .bg2 {
            background: url(图片/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background: url(图片/bg22.png) no-repeat;

        }

        .nav .bg3 {
            background: url(图片/bg3.png) no-repeat;
        }

        .nav .bg3:hover {
            background: url(图片/bg33.png) no-repeat;

        }

        .nav .bg4 {
            background: url(图片/bg4.png) no-repeat;
        }

        .nav .bg4:hover {
            background: url(图片/bg44.png) no-repeat;

        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" target="_blank" class="bg1">五彩导航</a>
        <a href="#" target="_blank" class="bg2">五彩导航</a>
        <a href="#" target="_blank" class="bg3">五彩导航</a>
        <a href="#" target="_blank" class="bg4">五彩导航</a>
    </div>
</body>

</html>

CSS 的三大特性——层叠性、继承性、优先级

层叠性

在这里插入图片描述

继承性

在这里插入图片描述在这里插入图片描述

优先级

在这里插入图片描述
在这里插入图片描述

CSS盒子模型

盒子模型

网页布局的本质

在这里插入图片描述

盒子模型组成

在这里插入图片描述

边框

在这里插入图片描述
在这里插入图片描述

边框样式

在这里插入图片描述
在这里插入图片描述

表格的细线边框

在这里插入图片描述

内边距

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例四


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例四</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" target="_blank">新浪导航</a>
        <a href="#" target="_blank">手机新浪网</a>
        <a href="#" target="_blank">移动客户端</a>
        <a href="#" target="_blank">微博</a>
        <a href="#" target="_blank">王旭凯</a>
    </div>

</body>

</html>
外边距

在这里插入图片描述

外边距的典型应用

在这里插入图片描述

外边距合并

在这里插入图片描述
在这里插入图片描述

清除内外边距

在这里插入图片描述

案例五

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例五</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            color: #b0b0b0;
            font-size: 12px;
            padding: 0 28px;
            margin-top: 20px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" target="_blank"><img src="图片/img.jpg"></a>
        <p class="review"><a href="#" target="_blank">快递牛，整体不错蓝牙可以说秒连。红米给力</a></p>
        <div class="appraise">
            来自于 王旭凯 的评价
        </div>
        <div class="info">
            <h4><a href="#" target="_blank">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>

</body>

</html>

案例六

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例六</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#" target="_blank">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#" target="_blank">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#" target="_blank">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#" target="_blank">【特惠】9.9元洗一百张照片！</a></li>
            <li><a href="#" target="_blank">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>

</body>


</html>

圆角边框

在这里插入图片描述
在这里插入图片描述

盒子阴影

在这里插入图片描述

文字阴影

在这里插入图片描述

CSS网页布局

传统网页布局的三种方式

在这里插入图片描述

标准流（普通流/文档流）

在这里插入图片描述

浮动

什么是浮动

在这里插入图片描述

浮动特性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

浮动元素的使用

在这里插入图片描述

浮动布局注意点

在这里插入图片描述

清除浮动

在这里插入图片描述

为什么要清除浮动

在这里插入图片描述

清除浮动的本质

在这里插入图片描述

清除浮动

在这里插入图片描述

清除浮动——额外标签法

在这里插入图片描述
在这里插入图片描述

清除浮动——父级添加 overflow

在这里插入图片描述

清除浮动——:after 伪元素法

在这里插入图片描述

清除浮动——双伪元素清除浮动

在这里插入图片描述

CSS定位

在这里插入图片描述

为什么需要定位

在这里插入图片描述

定位组成

在这里插入图片描述

定位模式

在这里插入图片描述

边偏移

在这里插入图片描述

静态定位

在这里插入图片描述

相对定位

在这里插入图片描述

绝对定位

在这里插入图片描述

子绝父相

在这里插入图片描述

固定定位

在这里插入图片描述
在这里插入图片描述

粘性定位

在这里插入图片描述

定位叠放次序

在这里插入图片描述

定位拓展

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

元素的显示与隐藏

在这里插入图片描述

display 属性

在这里插入图片描述

visibility 可见性

在这里插入图片描述

overflow 溢出

在这里插入图片描述

CSS高级技巧

精灵图

为什么需要精灵图

在这里插入图片描述

精灵图的使用

在这里插入图片描述

字体图标

产生原因

在这里插入图片描述

加载原理

在这里插入图片描述
服务器只返回一次请求

优点

在这里插入图片描述

字体图标的下载

在这里插入图片描述

字体图标的引入

在这里插入图片描述
在这里插入图片描述

字体图标的追加

在这里插入图片描述

CSS三角

在这里插入图片描述

CSS用户界面样式

什么是界面样式

在这里插入图片描述

鼠标样式 cursor

在这里插入图片描述

轮廓线 outline

在这里插入图片描述

防止文本域拖拽 resize

在这里插入图片描述

vertical-align 属性应用

图片，表单和文字对齐

在这里插入图片描述
在这里插入图片描述

解决图片底部默认空白问题

在这里插入图片描述

溢出的文字用省略号显示

单行文本溢出显示省略号——必须满足三个条件

在这里插入图片描述

多行文本溢出显示省略号

在这里插入图片描述

常见布局技巧

margin 负值运用

在这里插入图片描述

文字围绕浮动元素
行内块巧妙运用
CSS三角强化

在这里插入图片描述

CSS初始化

不是白羊座
关注
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
CSS盒子模型
m0_74991285的博客
06-01 260
因此我们在布局前，首先要清楚下网页元素的内外边距。对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距1，此时父元素会塌陷较大的外边距值。CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。（3）使a标签转化为行内块元素，设置高度、颜色、字体大小、内边距、鼠标经过时的颜色并且取消下划线。：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
CSS练习
毕业才是起点
04-09 1057
实现效果图 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
【前端-初阶】CSS盒子模型
qq_48234463的博客
03-18 644
【前端-初阶-CSS】页面布局三大核心：盒子模型，浮动、定位。
Java将16进制颜色字符串#4C4C4C转为rgb
weixin_40016627的博客
03-29 118
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础样式
qq_62283164的博客
07-19 1459
CSS基础样式 一、css语法规范 二、CSS选择器 1.类（class）选择器 2.id选择器 3.CSS选择器优先级 三、网页中引入css样式 1.内联（行内）样式 2.内部样式表 3.外部样式表 4.link标签引入外部样式文件 ​编辑 5.CSS样式优先级 四、字体样式 五、文本样式 六、鼠标样式 七、背景样式 八、列表样式 九、CSS伪类 十、CSS练习之美团左侧菜单栏...
CSS基础知识
ashfiqa的博客
01-21 2163
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 4041
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2797
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
《CSS新世界》书评
zhangxueyi的专栏
09-13 409
这本书是“CSS世界三部曲”中的最后一部，全书近600页，内容丰富，涵盖了CSS的全局知识、已有属性的增强、新布局方式、移动开发中的CSS新特性、CSS变量、文本和图像内容的增强、滤镜和混合模式、用户行为相关CSS等多个方面。《CSS新世界》的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，适合具有一定CSS基础的前端开发者阅读。总的来说，《CSS新世界》是一本全面、深入且实用的CSS学习书籍，无论是对于想要深入了解CSS新特性的前端开发者，还是对于希望提升自己CSS技能的读者，都是一本值得一读的好书。
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1371
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 671
【代码】HTML、CSS实现树状图。
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 467
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值