css基础应用进阶

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量47 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_79203970/article/details/133842474
版权

边框样式

使用border的方法

solid表示实线框

dashed表示虚线框

dotted表示点线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width:600px;
            height: 300px;
            border: 1px solid indigo;
            background: rebeccapurple;
        }
        .two{
            width: 60px;
            height: 200px;
            border: 2px dashed red;//*虚线*/
            /* dotted 点线*/
        }
        .three{
            width: 600px;
            height: 200px;
            border-bottom:10px solid palegreen ;
            border-top:10px dashed indianred;
            border-left:10px dotted lawngreen;
            border-right:10px solid orange;
        }
    </style>
    
</head>
<body>
    <div class="one">大盒子</div><br/>
    <div class="two">大盒子</div><br/>
    <div class="three">大盒子</div><br/>

</body>

</html>

css的层叠性

我们的css层叠性就是后写样式会覆盖先写样式(必须保证权重相同的情况下)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color:aquamarine;
            width: 200px;
            height: 200px;

        }
        .box{
            color:rebeccapurple;
        }
        div{
            color: black;
        }
    </style>
</head>
<body>
    <div class="box">看看是什么颜色</div>
    <!-- 总结：我们的css层叠性就是后写样式会覆盖先写样式(必须保证权重相同的情况下) -->
    
</body>
</html>

css的继承性

：我们的css可以实现继承性，子盒子会继承父盒子的样式（一般都是继承文字三属性，字号，颜色，字体）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            color: brown;
            font-size: 90px;
            font-family: "宋体";
            text-align: center;
            border: 10px solid palegoldenrod;
        }
    </style>
</head>
<body>
    <div class="bow">
        <p>我是box的子类</p>
        <span>我是box的子类</span>
    </div>
    <!-- 
        总结：我们的css可以实现继承性，子盒子会继承父盒子的样式（一般都是继承文字三属性，字号，颜色，字体）
     -->
    
</body>
</html>

行高效果

        alt + z 换行

        总结： line-height: 24px;不仅能控制行与行之间的距离，他还有一个大招，可以控制单行文字的垂直居中（高度是多少行高就给多少，就能控制单行文字的垂直居中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border: 2px solid palegreen;
            line-height: 24px;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 2px dotted palegoldenrod;
            line-height: 200px;
            text-align: center;

        }
    </style>
</head>
<body>
    <div class="box1">大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒大家都很棒</div>
    <div class="box2">我是大盒子</div>
   <!-- 
        alt + z 换行
        总结： line-height: 24px;不仅能控制行与行之间的距离，他还有一个大招，可以控制单行文字的垂直居中（高度是多少行高就给多少，就能控制单行文字的垂直居中）
     --> 
</body>
</html>

盒子模型

       我们的盒子模型：宽度，高度，边框，外边距和内边距

        外边距 ----- margin 控制盒子外面的距离

        内边距 ----- padding 控制盒子里面的距离

         

        盒子居中 margin: 0px auto; 公式 简化 margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 500px;
            border: 1px dashed red;
            margin-left:100px;
            padding-left: 100px;
            padding-top: 500px;
            padding-bottom: 200px;
            padding-right: 100px;
        }
    </style>
</head>
<body>
    <div class="box">文字的内容</div>
    <!-- 
        我们的盒子模型：宽度，高度，边框，外边距和内边距
        外边距 ----- margin 控制盒子外面的距离 
        内边距 ----- padding 控制盒子里面的距离
         
        盒子居中 margin: 0px auto; 公式 简化 margin: 0 auto;
     -->
</body>
</html>

内边距的不同值

     1、单值写法：padding: 10px;就是代表了4个值，上下左右都是10px；

        2、双值写法：padding: 10px 30px; 第一个值代表上下，第二个值代表左右;

        3、三值写法：padding: 10px 30px 60px; 第一个值代表上，第二个值代表左右，第三个值代表下；

        4、四值写法：padding: 10px 30px 50px 80px;上右下左---顺时针；

        好消息：内边距和外边距同理

        1、单值写法：margin: 10px;就是代表了4个值，上下左右都是10px；

        2、双值写法：margin: 10px 30px; 第一个值代表上下，第二个值代表左右;

        3、三值写法：margin: 10px 30px 60px; 第一个值代表上，第二个值代表左右，第三个值代表下；

        4、四值写法：margin: 10px 30px 50px 80px;上右下左---顺时针；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border: 2px solid #000;
            display: inline-block;
            padding: 10px;

        }
        .box2{
            border: 1px solid red;
            display: inline-block;
            padding: 10px 30px;
        }
        .box3{
            border: 2px solid orange;
            display: inline-block;
            padding: 10px 30px 20px;
        }
        .box4{
            border: 4px solid palegreen;
            display: inline-block;
            padding: 10px 20px 20px 30px;
        }
        .box5{
            border: 7px solid yellow;
            display: inline-block;
            margin:1px;
        }
        
    </style>
</head>
<body>
    <div class="box1">单值写法</div>
    <div class="box2">双值写法</div>
    <div class="box3">三值写法</div>
    <div class="box4">四值写法</div>
    <div class="box5">iii</div>
</body>
</html>

给body加背景图

        语法格式

        background:可以加背景色，还可以加背景图

        url 图片的路径

        默认的是重复的，如果想不重复，后面加 no-repeat---不平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 100000px;
            background: url("素材/a17.jpg") no-repeat;
        }
    </style>
</head>
<body>
</body>
</html>

给盒子加背景

        语法格式

        background:可以加背景色，还可以加背景图

        url 图片的路径

        默认的是重复的，如果想不重复，后面加 no-repeat---不平铺

        水平位置和垂直位置

        第一个值代表水平位置：左 left 中  center  右 right

        第二个值代表垂直位置：上 top 中  center  下 bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 800px;
            height: 600px;
            border: 8px solid red ;
            margin: 0 auto;
            /*background: url(素材/a17.jpg) no-repeat 100px 200px;*/
            /*扩展写法*/
            /*background-color:red ;*/
            /*background-image: url("素材/a17.jpg");
            background-repeat:no-repeat;
            background-position: 200px 100px;
            background-position:center center;
            */
            background: salmon url("素材/a17.jpg") no-repeat center center;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

后代选择器

空格隔开

打个比方ul  li{

}

如果li在ul里面那么就只会对li起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: blue;
        }
        ol{
            
            color: rgba(0, 0, 0, 0);
        }
        div p{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是无序</li>
        <li>我是无序</li>
        <li>我是无序</li>
    </ul>
    <ol>
        <li>我有无序</li>
        <li>我有无序</li>
        <li>我有无序</li>
    </ol>
    <div>
        <p>我是div的子类</p>

    </div>
</body>
</html>


并集选择器

并集选择器：用的是逗号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,h3,h5{
            color:orange ;
        }
    </style>
</head>
<body>
    <!-- 
        并集选择器：用的是逗号
     -->
    <div>文字</div>
    <span>文字</span>
    <h3>文字</h3>
    <h5>文字</h5>
    <h6>文字</h6>
</body>
</html>

标签指定选择器（交集选择器）

总结：标签选择器，类选择器，id选择器，后代选择器，并集选择器，标签指定选择器

        经典面试题：标签指定选择器（交集选择器） 标签后面直接跟类--不能加逗号和空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.p1{
            color: brown;
        }
    </style>
</head>
<body>
    <!--总结：标签选择器，类选择器，id选择器，后代选择器，并集选择器，标签指定选择器
        经典面试题：标签指定选择器（交集选择器） 标签后面直接跟类--不能加逗号和空格
     -->
    <p>我是第一个</p>
    <p class="p1">我是第二个</p>
    <div class="p1">我是第三个</div>
    
</body>
</html>

基贤
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS的进阶
m0_73198722的博客
08-26 596
CSS的进阶补充
Electron 桌面应用开发从基础到进阶
郊眠寺
03-16 2970
本文介绍了一些 Electron 的进阶知识，包括使用主进程和渲染进程、使用模块、使用开发工具、调试、部署和热更新。通过掌握这些知识，你可以更好地管理和开发 Electron 应用程序，提高开发效率，为用户提供更好的体验。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
CSS 进阶
A626796235的博客
01-07 397
CSS 进阶
CSS基础到进阶：掌握网页布局的艺术
2301_79375313的博客
07-19 492
CSS不仅是样式表，更是实现创意布局和优秀用户体验的强大工具。通过不断学习和实践，你将能够掌握更多高级技巧，创造出令人惊叹的网页作品。
CSS进阶
ma_no_lo的博客
04-28 1025
CSS进阶知识，复合选择器，CSS特性，背景属性，背景图片平铺，显示模式
CSS入门到进阶知识点统计
黄钟飞的博客
03-28 135
CSS入门到进阶知识点统计
HTML + CSS3 基础入门与进阶
weixin_49809163的博客
04-06 1922
HTML + CSS3 基础入门与进阶简介一、HTML 入门与进阶二、CSS 入门与进阶1、CSS 基础入门（1）CSS3简介（2）CSS 的书写位置（3）CSS 的基本语法2、CSS 选择器（1）标签选择器（2）id 选择器（3）class 选择器（4）复合选择器（5）伪类（6）元素关系选择器（7）序号选择器（8）属性选择器（9）CSS3 新增的伪类（10）伪元素（11）层叠性和选择器权重计算3、文本与字体属性（1）常用文本样式属性（2）常用字体属性（3）段落和行相关属性（4）继承性4、CSS 盒模型（1
HTML与CSS进阶
小小前端攻城狮的博客
02-24 1351
查漏补缺」HTML与CSS进阶 前言 本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容，CSS3方面介绍动画及转换。 H5新增内容 「1. 什么是HTML5」 定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。 两个概念： 是一个新版本的HTML语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML5。 「2. HT...
HTML+CSS基础学习
qq_45919348的博客
01-14 6273
HTML+CSS基础学习 HTML 1.VScode+Typora快捷方式 a.Typora： （1）、高亮： == # == ，内敛公式使用：$\textcolor{red}{红色文字} $ （2）、ctrl+shift+K 插入代码块 （3）、 b.vscode ： 无论光标在哪里，ctrl+enter 都会成下一段落，ctrl+shfit都会说上一行 加缩进 tab 减缩进 tab+shfit 快捷书写：！+Enter 自动填充格式：shfit+alt+F *section*6>
CSS基础知识
LYQ
10-20 1820
CSS基础知识
3d旋转相册—css3高级进阶
04-13
在本课程"3d旋转相册—css3高级进阶"中，我们将深入探讨如何利用CSS3的强大功能创建一个令人印象深刻的3D旋转相册。这个项目非常适合那些已经具备一定编程经验，特别是对HTML和CSS有基本理解的开发者。通过学习这个...
CSS相关综合专栏。 计划包含四个方面： ①CSS基础②进阶专题③面试题汇总④一些有意思的奇技淫巧。.zip
03-16
在CSS进阶专题中，可能会涵盖： 1. CSS预处理器（如Sass、Less）的使用，以及它们如何提升工作效率。 2. CSS模块化与封装，如CSS Modules和BEM命名方法。 3. CSS动画和过渡，创建动态效果和用户体验优化。 4. CSS...
css 入门基础教程
09-25
【CSS入门基础】是针对初学者的一门教程，旨在帮助那些有一定HTML编写经验的人开始学习CSS。...掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
pc网页html css基础
03-10
**CSS基础知识** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p {color: red;}`），类选择器（`.class-name {property: value;}`），ID选择器（`#id-name {property: value;}`）。 2. **属性与值...
前端代码学习（HTML+CSS+JS进阶学习全资料）
12-25
学习者还可以通过实际项目和案例学习，包括使用Bootstrap构建的网页示例，JavaScript在项目中的应用，以及响应式设计的案例研究。为了帮助学习者更好地掌握知识，该资料还提供了学习路径和建议，以有组织地进行学习...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1302
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 452
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 233
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 286
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
HTML/CSS基础与进阶知识总结
CSS全称为Cascading Style Sheets，它可以以三种方式应用到HTML：内联样式、内部样式表和外部样式表。CSS语法包括选择符（如元素选择符、类选择符等）和属性声明。权重决定了样式优先级，字体属性包括字体类型、大小...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值