前端三剑客 —— CSS （第三节）

已于 2024-04-03 14:45:55 修改
阅读量1.4k 收藏 22
点赞数 31
文章标签： 前端 css
于 2024-04-03 14:45:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51562484/article/details/137344763
版权
本文详细介绍了CSS的基础知识，包括不同类型的样式（行内、页面、外部）、选择器（ID、标签、类、伪类等）、常用样式如text-shadow和box-shadow，以及变换效果如translate、rotate、scale、skew和matrix的使用方法。同时涉及媒体查询和自定义字体的应用。
摘要由CSDN通过智能技术生成

目录

上节回顾：

1.CSS使用有以下几种样式;

2.选择器

        1.基本选择器

        2.包含选择器

        3.属性选择器 []

        4.伪类选择器 ：

        5.伪元素选择器 ::before :after

3.常见样式的使用

常见样式参考表

一些特殊样式

媒体查询

自定义字体

变换效果

translate（）方法

rotate（）方法

scale（）方法

skew（）方法

matrix（）方法

上节回顾：

1.CSS使用有以下几种样式;

        1.行内样式

        2.页面样式

        3.外部样式（link标签，@import）

2.选择器

        1.基本选择器

                1.ID选择器

                2.标签选择器

                3.类选择器

                4.通用选择器

        2.包含选择器

                1.子选择器 >

                2.后代选择器 空格

                3.并列选择器 ，

                4.交集选择器 选择器.选择器

        3.属性选择器 []

                1.完全匹配 =

                2.包含匹配 *=

                3.以什么开头 ^=

                4.以什么结尾 $=

        4.伪类选择器 ：

        5.伪元素选择器 ::before :after

3.常见样式的使用

常见样式参考表

text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色

box-shadow

border-radio 实现圆角

margin 内边距

padding 外边距

background

样式（CSS）：

body {

    /*background-color: #666666;*/

  }

  .content {

    width: 600px;

    font-family: "微软雅黑","宋体";

    font-size: 16px;

    line-height: 35px;

    /*font-weight: bold;*/

    text-shadow: -5px -5px 2px #317FE5;   /* offset-x | offset-y | blur

  radius | color */

    position: fixed;

    top: 0;

    left: 0;

  }

  .box {

    margin: 30px auto;

    width: 700px;

    height: 100px;

    background-color: grey;

    color: white;

    /*text-align: justify;*/

    word-spacing: 10px;

    letter-spacing: 5px;

    text-transform: lowercase;

    text-decoration: underline;

    direction: inherit;

    box-shadow: 5px 5px 5px #ff0000;   /* offset-x | offset-y | blur-radius |

  color */

    /*border: 2px solid green;*/

    border-width: 2px;

    border-style: solid;

    border-color: green;

    /*border-radius: 5px;*/

    border-bottom-left-radius: 5px;

    border-top-right-radius: 15px;

    /*visibility: hidden;*/

    /*display: none;*/

  }

  input {

    outline: blue 1px solid;

  }

  .box1 {

    margin-top: 30px;

    width: 300px;

    height: 300px;

    /*background-color: #317FE5;*/

    border-radius: 50%;

    background: #317FE5 url("../image/5.jpeg") left top;

  }

  .box2 {

    margin: 30px;

    width: 700px;

    height: 300px;

    border: 1px solid red;

    background: url("../image/mybatis-logo.png") no-repeat 50px 5px;

  }

页面（HTML）:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>常见样式的使用</title>

   <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div class="content">

中新网2月20日电 据香港《明报》报道，澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，被视为“城中

钻石笋盘”，家底丰厚兼遗传了赌王的帅气。2018年农历新年，他公布向内地女友GiGi求婚成功，随后传

媒追问他有关婚礼的安排却低调避谈。

</div>

<div class="box">澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，hello HTML css</div>

<input type="text" name="username" placeholder="姓名">

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

一些特殊样式

媒体查询

有时，我们需要显示的区域根据不同设备显示不一样的效果，这时就可以使用媒体查询。而使用媒体查询我们就需要使用到@media来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>媒体查询</title>

    <style>

        .box{

            width: 100%;

            height: 500px;

            background-color: #317FE5;

        }

        @media screen and (max-width: 500px) {

            .box {

                background-color: red;

            }

        }

        @media screen and (min-width: 768px){

            .box {

                background-color: blue;

            }

        }

        @media screen and (min-width: 1200px){

            .box {

                background-color: #C44F00;

            }

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

自定义字体

由于浏览器默认的使用的字体是微软雅黑，但有时候我们希望使用我们自己指定的字体，这时就需要使用@font-face来实现

变换效果

在CSS中有以下几种变换效果：translate（）移动、rotate（）转换、scale（）缩放、shew（）、mareix（）

translate（）方法

它是一种平移效果，从元素某个位置移动到另一个位置。在使用过程中，需要通过X轴和Y轴来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            z-index: 900000;

        }

        div.box2 {

            background-color: orange;

            /*transform: translate(200px, 30px);*/

            /*transform: translate(100px, -100px);*/

            /*transform: translate(50px);*/

            /*transform: translateX(100px);*/

            transform: translateY(100px);

            z-index: 0;

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

rotate（）方法

这个效果是·让某个元素进行旋转，需要指定旋转的角度。负数为逆时针旋转，正数为顺时针旋转，旋转单位是deg。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rotate</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            transform: rotate(-20deg);

        }

        div.box2 {

            background-color: orange;

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

scale（）方法

这个方法的作用是让某个元素的尺寸增加或者减少，会根据给定的宽度（x轴）和高度（y轴）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            transform: scale(0.5, 0.5);

        }

        div.box2 {

            background-color: orange;

            /*transform: scale(1.5, 1.5);*/

            /*transform: scale(2);*/

            transform: scaleX(2);

        }

        .container {

            position: absolute;

            left: 200px;

            top: 0;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

skew（）方法

这个方法的作用是让元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）来进行变换。

matrix（）方法

这个方法可以实现前面几个效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>matrix</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            color: white;

            text-align: center;

        }

        div.box1 {

            background-color: #317FE5;

        }

        div.box2 {

            background-color: orange;

            transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);  /* matrix(a, b, c, d, tx, ty) */

        }

    </style>

</head>

<body>

<div class="box1">这是第一个块元素</div>

<div class="box2">这是第二个块元素</div>

</body>

</html>

你我的怡宝乐
关注
前端三剑客React框架第一课入门的学习
qq_56248592的博客
04-30 678
React:由facebook贡献，是一个基于javascript的前端库。它主要关注ui组件的构建，通过virtual dom等技术手段实现高效的渲染优化，可以与各种其他库和框架搭配使用，也有丰富的社区和插件生态。
前端三剑客 —— CSS （第六节）
weixin_51562484的博客
04-04 1690
前端三剑客 —— CSS (第六节)
前端三剑客 —— CSS （第二节）
weixin_51562484的博客
03-31 1016
前端三剑客 —— CSS （第二节）
前端三剑客 —— CSS （第一节）
weixin_51562484的博客
03-31 848
前端三剑客 —— CSS （第一节）
前端三剑客 —— CSS （第五节）
weixin_51562484的博客
04-04 938
前端三剑客 —— CSS （第五节）
前端三剑客 —— CSS （第四节）
weixin_51562484的博客
04-04 1641
前端三剑客 —— CSS （第四节）
前端三剑客——CSS
sjp151的博客
07-29 402
从CSS的引入方式，代码风格，选择器，字体属性，文本属性，背景属性，圆角矩形，显示模式，盒子模型，弹性布局了解了CSS
前端三剑客——css 学习笔记
梦想不是挂在嘴边炫耀的空气，而是需要认真实践，等到对的风，就展翅翱翔！
05-28 451
CSS技术简单的阐述 笔记是为了方便复习回顾用 笔记来源是b站尚硅谷讲解的javaweb教程 1、介绍 css是层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 2、语法规则 选择器：浏览器根据“选择器”决定受css样式影响的HTML元素（标签） 属性（property）是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）例如P{color:blue} 多个声明：如果要定义不止一
前端三剑客 —— CSS （ 坐标问题 、定位问题和图片居中 ）
weixin_51562484的博客
04-04 1085
前端三剑客 —— CSS （设置中常见的问题）
前端三剑客 —— JavaScript （第一节）
weixin_51562484的博客
04-05 841
前端三剑客 —— JavaScript （第一节）
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
HTML5、CSS3和JavaScript是现代网页开发的三大核心技术，它们共同构建了互联网上丰富多彩的交互式用户体验。这篇教程结合源代码，旨在帮助初学者快速入门这三门语言，并掌握实际开发技能。 HTML5（HyperText Markup...
前端页面项目——博客系统
m0_59092234的博客
07-31 579
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。并将blog_detail.css引入blog_detail.htm，在上面创建blog_detail.htm时，已经提前引入文件的，现在只需编辑保存即可使用。创建一个common.css用来存放整个博客系统的页面设计代码，同时要将common.css引入blog_list.html。使用伪类选择器.blog.detailhover,实现光标悬停时修改样式的功能....
从零开始学WEB前端——网页的骨架——HTML实战练习
m0_67266171的博客
03-06 320
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 528
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
Vue中的常用指令
m0_62388400的博客
11-12 1185
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
App WebView白屏检测及解决总结，包括Android 和 iOS
LiangGang365的专栏
11-12 767
相对Android上的白屏，ios白屏的出现在app端上大部分为内存占用产生，其他网络、资源、js语言兼容、中文字样ulr等同样也会发生白屏，这类问题需要针对分析。在APP端上除去相关页面元素，加载错误、兼容性，语法错误造成白屏，以上相关方案可以启到检测并尝试重试刷新页面，达到用户无感知，避免白屏的出现和出现白屏瞬间进行切换或者刷新。内存导致的白屏或者其他异常问题，有时白屏显示，有时界面渲染失败等奇怪现象，但是内存白屏是最不好处理，又需要给用户友好体验的问题。
【前端基础】Javascript取整函数以及向零取整方式
警警的博客
11-11 743
在JavaScript中，有多种方式可以对数字进行取整操作，即去掉小数部分，只保留整数部分。在JavaScript中，有多种方法可以对数字进行取整操作。这些方法各有特点，适用于不同的场景。方法会去掉一个数字的小数部分，返回其整数部分，但不进行四舍五入。在处理数字时，会将操作数转换为32位整数，从而截断小数部分。每种方法都有其适用的场景和限制，选择时需根据具体需求进行权衡。也是一种按位取整的方式，效果与。类似，会截断小数部分。
前端文件优化
最新发布
weixin_62668406的博客
11-15 615
对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤⼩⼤概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每个 像素的调⾊板来相应缩⼩图⽚的⼤⼩。
springboot整合websocket实现复制目录进度推送
前人栽树，后人乘凉。
11-14 319
/ 替换为你的WebSocket地址。启动Spring Boot应用程序，然后访问前端页面并触发文件复制操作。例如，通过浏览器访问。你应该能够在前端看到实时的复制进度。创建一个控制器来触发复制操作。
前端三剑客HTML、CSS、JavaScript学习源码包
资源摘要信息:"前端三剑客"是前端开发领域的核心技术，包含HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript。它们是构建和设计网页的基础技术，每一位前端开发者都需要掌握它们的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值