0基础学web----CSS基础

最新推荐文章于 2024-07-25 14:15:14 发布
最新推荐文章于 2024-07-25 14:15:14 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： web前端 文章标签： css3 css web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ675396947/article/details/121933422
版权

02-CSS引入方式

03-选择器-标签

<!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>Document</title>
    <style>
        p{
            /* P标签的颜色 */
            color:red;
        }
    </style>
</head>
<body>
    <p>标签选择器呀呀呀呀！</p>    
</body>
</html>

04-选择器-类

<!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>Document</title>
</head>
<style>
    .one{
        color:red;
    }
    .wyh{
        font-size: 80px;
    }
</style>
<body>
    <!-- 一个class可以存一个类样式和多个类样式 -->
    <!-- 一个样式 -->
    <div class="one">选择器类one</div>
    <!-- 多个样式 -->
    <div class="one wyh">选择器类one</div>
</body>
</html>

05-选择器-id

<!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>Document</title>
    <style>
        #one{
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">这是选择器id</div>
</body>
</html>

06-选择器-通配符

<!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>Document</title>
    <style>
        *{
            color: red;
        }

    </style>
</head>
<body>
    <div>这是选择器通配符div</div>
    <p>这是选择器通配符p</p>
    <span>这是选择器通配符span</span>
</body>
</html>

07-文字基础样式

08-文字-字体

字体大小（font-size）

字体默认像素为：16。

<!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>Document</title>
    <style>
        #one{
            /* 字体默认大小是16px  */
            font-size:60px;
            
        }
    </style>
</head>
<body>
    <div id="one">你看着字体是改变了大小</div>
</body>
</html>

 字体粗细（font-weight）

<!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>Document</title>
    <style>
     
        #weight{
            /* 字体400是正常，700加粗 */
            font-weight: 700;
        }


    </style>
</head>
<body>
 
    <div id="weight">你看字体好像变粗了</div>
</body>
</html>

字体样式（font-style）

<!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>Document</title>
    <style>
 
        /* 字体倾斜italic，正常normal */
        #style{
            font-style: italic;
        }


    </style>
</head>
<body>
 
    <div id="style">你看字体样式它变斜了</div>
</body>
</html>

字体类型（font-family）

<!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>Document</title>
    <style>

        #family{

            font-family:"楷体";
        }


    </style>
</head>
<body>
    <div >原来的字体</div>
    <div id="family">我要改变这个字体类型啦！</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>Document</title>
    <style>

        #family{
            /* 如果电脑没有楷体就显示黑体，没有黑体就显示sans-serif类字体 */
            font-family:楷体,黑体，sans-serif;
        }


    </style>
</head>
<body>
    <div >原来的字体</div>
    <div id="family">我要改变这个字体类型啦！</div>
</body>
</html>

09-拓展-层叠性

<!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>Document</title>
    <style>
        .one{
            color: red;
            color: royalblue;
        }
    </style>
</head>
<body>
    <div class="one">你看我这个被覆盖的字体颜色</div>
</body>
</html>

注意：将原来设置的红色字体替换成了蓝色字体，这就是层叠。在同一个选择器和同一个属性下以最后一个为显示。 

10-font复合属性

<!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>Document</title>
    <style>
        p{
            /*font: 样式  加粗  大小 字体类型*/
            /*font:style weight size famliy*/

            font: italic 700 70px 楷体；
        }
    </style>
</head>
<body>
    <p>你看我这个复合属性的字体</p>
</body>
</html>

11-文本缩进

<!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>Document</title>
    <style>
        p{
            /* text-indent: 32px; */
            /* 1个em等于一个字体的距离 */
            text-indent: 2em;
            
        }
    </style>
</head>
  
<body>
    <p>层叠样式表(英文全称:Cascading Style
        Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS
        能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
</body>

</html>

12-水平对齐方式

<!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>Document</title>
    <style>
        #left1{
            text-align:left;
        }
        #center1{
            text-align: center;
        }
        #right1{
            text-align: right;
            
        }
    </style>
</head>
<body>
    <div id="left1">左对齐是默认的</div>
    <div id="center1">这个居中对齐的</div>
    <div id="right1">这是向右对齐的</div>
    
</body>
</html>

13-文本修饰线

 

<!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>Document</title>
    <style>
        .one1 {
            text-decoration: underline;
        }

        .one2 {
            text-decoration: line-through;
        }

        .one3 {
            text-decoration:overline;
        }

        .one4 {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <p class="one1">下划线</p>
    <p class="one2">删除线</p>
    <p class="one3">上划线</p>
    <a href="">这是不去下划线的A标签</a>
    <br>
    <a href="" class="one4">这是去下划线的A标签</a>
</body>

</html>

14-行高

<!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>Document</title>
    <style>
        .one{
            line-height: 5;
        }
    </style>
</head>
<body>
    <p>没有添加行高1</p>
    <p>没有添加行高2</p>
    <p>没有添加行高3</p>
    <hr>
    <p>添加了行高呀1</p>
    <p class="one">添加了行高呀2</p>
    <p>添加了行高呀3</p>
</body>
</html>

15-谷歌调用工具

按F12会打开网页开发者模式，进行调试模式。

 

可以点击取消网页样式和提示删除线没有实现的样式。 

16-拓展-颜色取值

17-推展-标签居中

<!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>Document</title>
    <style>
        .one{
            width: 250px;
            height: 250px;
            background-color: seagreen;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    
</body>
</html>

实例1-新闻实例

 

<!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>新闻案例</title>
    <style>
        div {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }

        .center {
            text-align: center;
        }

        .color {
            color: #808080;
        }

        .css {
            color: #87ceeb;
            font-weight: 700;
        }

        a {
            text-decoration: none;
        }
        .suojing{
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div>
        <h1 class="center">CSS （层叠样式表）</h1>
        <p class="center color"> 2021年12月15日22时18分 <span class="css"> CSS官方 </span><a href="#">收藏文本</a></p>
        <hr>
        <p class="suojing">其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
        </p>
        <p class="suojing">其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
        </p>
        <p class="suojing">其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
        </p>
    </div>
</body>

</html>

例2-产品图片文字效果实

 

<!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>产品图片</title>
    <style> 
         body{
             background-color:#f5f5f5 ;
         }
         .frame{
             width: 234px;
             height: 300px;
             background-color: #ffffff;
             margin: 0 auto;
             text-align: center;
         }
         .img{
             width: 160px;
         }
         
         .div1{
             font-size: 14px;
             line-height: 25px;
         }
         .div2{
             font-size: 12px;
             line-height: 30px;
             color: #cccccc;
         }
         .div3{
             font-size: 14px;
             color: #ffa500;
         }

    </style>
</head>
<body>
    <div class="frame">
        <img class="img" src="images/che.jpg" alt="图片打不开">
        <div class="div1">九号平衡车</div>
        <div class="div2">成年人的玩具</div>
        <div class="div3">1999元</div>
    </div>
    
</body>
</html>

 

  想要视频教学？

请点击下方链接吧！

https://www.bilibili.com/video/BV1Kg411T7t9?p=1

情绪员Tim
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ESP32-Web-Server编程-CSS 基础 2
wangyx1234的博客
11-26 1214
1）本节主要演示如何使用外部 CSS 文件，在前端代码 html 中通过 link 标签引用指定的 CSS 文件，然后在后端代码中通过增加发送 CSS 文件的 handler 就可以正确应用外部的 CSS 文件。
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 3062
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
CSS基础学习--18 导航栏
yyxhzdm的博客
06-18 2580
如果要在每个选项上添加边框，可以在每个 元素上添加。导航条基本上是一个链接列表，所以使用 和 元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动 元素，并指定为 元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要 元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。
web前端开发--------CSS基础教程
m0_64365419的博客
11-07 2765
为什么要学习CSS？ 在之前的学习中，我们学习了通过html去布局网页，但是html存在非常多的局限性，而它的局限性体现在它只关注内容的语义，html主要做结构，显示元素内容，比如<h1>表名这是一个大的标题，<p>表名这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。 CSS简介： CSS是层叠样式表（Cascading Style Sheets）的简称，有时候我们也会将其称之为CSS样式表或级联样式表。 CSS同样也是一种标记语言，主要用于
WEB前端基础-HTML CSS总结.xmind思维导图
weixin_44833875的博客
06-11 3898
html 总结 web标准 常用的HTML标签 图片路径 字符实体 CSS总结 选择器 css三大特性 常用的css 属性 css高级技巧
CSS 变量 - 2022 年学习 CSS 变量
努力是为了站在万人之中，成为别人的光
03-15 5188
你好家伙👋。希望你过得很好？在今天的文章中，我们将讨论 CSS 变量。所以不要浪费时间，让我们看看它是什么？ 什么是变量？ 变量用于在其中存储数据。把它想象成你有一个盒子，你在里面放了一些书。然后那些书就是数据，而盒子在计算机科学方面是可变的。 好的，但我们为什么要使用它？？ 让我们举个例子来理解为什么我们使用变量？ body { background-color: blue; } h2 { border-bottom: 2px solid blue; } .container { color: w
web——CSS基础
qq_44745063的博客
05-29 1569
作者：小 琛 欢迎转载，请标明出处 文章目录引入方式选择器字体样式文本样式例子1：新闻网页例子2：产品推荐图 css:在web中，用于渲染网页的工具 引入方式 三大引入方式：内嵌、外联、行内 内嵌：在html的head中，定义style，将所有渲染内容写在里面 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件 行间：写在某一个标签内 一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通
Educoder -- Web程序设计基础2021秋--CSS3语法
hannah2233的博客
12-16 2021
Educoder – Web程序设计基础2021秋 --实训作业全总结 web程序设计基础R实验报告 2021年 —太原理工大学 文章标题一、 CSS3选择器-属性选择器第1关：CSS3-属性选择器相关概念1、 题目2、 知识点补充第2关：CSS3-属性选择器编程要求代码展示第3关：CSS3-包含及连字符选择器编程要求代码展示第4关：CSS3-前缀后缀选择器变成要求代码展示二、 CSS3-文本外观样式第1关：文本外观样式相关的概念第2关：CSS-文本空间的设置一、 编程要求二、 代码展示第3关：搜索页面.
web技术基础---网站设计说明书
热门推荐
艳阳如一
05-22 1万+
《Web技术基础》 第1章 网站的规划 1.1.1 网站的定位 品味咖啡店网站整体上给人一种舒适、温馨的氛围，网页整体上呈现咖啡色、白色这种色调能带给人轻松、温暖的感觉，符合咖啡店主题。 1.1.2 网站板块的设置 网站的板块从整体上分为主页和副页。主要分为banner、logo、导航和栏目四个板块。 第2章 设计与制作 2.1 首页设计 2.1.1 Logo设计 Logo背景为咖啡色，右边是盛有...
web前端学习1-45集
weixin_74304806的博客
10-20 2509
千峰web前端1-20集==第一集== 课程划分1.HTML+CSS系列教程1之拨云见日2.HTML+CSS系列教程2之溯本求源3.HTML+CSS系列教程3之风声水起4.HTML+CSS系列教程4之巧夺天工如何学好web前端==第二集== 拨云见日1. 什么是HTML、CSS：2. 代码跟网站的关系：3.写到哪里：4.怎样创建一个.html文件：作业==第三集== 宇宙第一编译器VS Code1.学习编辑器基本使用：（操作方面）练习==第四集== 续上集2.多光标操作：3.搜索图标：4.Chrome浏
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 497
【代码】[css3] 如何设置边框颜色渐变。
flex：1
m0_47999208的博客
07-25 381
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 943
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
css更改图片颜色
最新发布
程序员
07-25 187
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
css 作业 2
没有 bug 的代码是不完美的！
07-25 711
写完了
CSS相关记录
oThrowsException的博客
07-24 779
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
第三十天 CSS的引入方式
out_stand_ing的博客
07-24 254
前端大佬修炼之路 筑基期第八层
常见的CSS属性（一）——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值
weixin_64294248的博客
07-25 1159
元素的继承性是指给父元素设置了某些属性，子元素或后代元素也会有作用。
CSS实现表格无限轮播
像鱼的博客
07-24 271
在React中，用CSS实现表格无线轮播
Web标准与DIV+CSS基础教程：理解Web标准与实战布局
"Web编程基础-CSS、JavaScript、jQuery第一部分-网页基础的PPT教程，包含114张幻灯片，重点讲解了Web标准、DIV+CSS布局和CSS样式设置。" 在Web开发领域，理解和掌握Web标准、CSS以及布局技术是至关重要的。这个PPT...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

情绪员Tim

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值