CSS 2

最新推荐文章于 2024-09-27 15:52:57 发布
最新推荐文章于 2024-09-27 15:52:57 发布
阅读量820 收藏 7
点赞数 21
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75859310/article/details/141954349
版权

1.复合选择器

a.后代选择器(包含选择器)可以选择孙子元素

选择某个父元素中的子元素

元素1 元素2 (样式声明) 元素1是父级,只选元素2,不影响元素1

ul li a选择孙子元素

<!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>
        ol li{
            color: red;
        }
        ul li a{
            color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打游戏</li>
        <li><a href="#">孙子元素</a></li>
    </ul>
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打游戏</li>
    </ol>
</body>
</html>

子选择器,与后代选择器类似,但是只能选择子标签,不能选孙子元素

元素1>元素2 {样式声明}

<!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>
       .two>a{

        color:red;
       }
    </style>
</head>
<body>
    <div class="two">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        
        </p>
        <p>
            <a href="#">链接3</a>
        </p>
    </div>
</body>
</html>

 

b.并集选择器

选择多组标签,集体声明

<!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,h2{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        玩游戏
    </div>
    <h1>看电视</h1>
    <h2>做家务</h2>
</body>
</html>

 

 

c.伪类选择器(定义元素状态)

1)链接伪类选择器

a:link 选择未被访问过的链接

a:visited选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动标签 (鼠标按下了但是未弹起)

 默认展示黑色,当鼠标悬停到上面时展示为红色,当鼠标按下去没有弹起展示为绿色

hover和active除了a标签,也适用于其他标签 

要按照LVHA的顺序书写,

<!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>
         a {
            color: black;
        } 
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }

        input{
            color: yellow;
        }
        input:hover {
            color: red;
        }
        input:active{
            color: green;
        }
        
    </style>
</head>
<body>
    <a href="#">不跳转页面</a>
    <br>
    <input type="button" value="按钮">
    <a href="#">小猫</a>

</body>
</html>

2)force伪类选择器

选取获取焦点的input表单元素

<!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>
       .three>input:focus{
        color:red ;
       }
    </style>
</head>
<body>
    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>

 被选中的表单字体会变成红色

2.盒子模型

每一个HTML元素就相当于是一个矩形的"盒子"

有以下几部分组成

边框:border

内容:content

内边框:padding

 外边框:margin

1) 边框

粗细:border-width 样式:border-style  默认没有边框,solid实线边框,dashed虚线边框,dotted点线边框 border-color颜色

可以简写

可以改写四个方向的边框

border-top/bottom/left/right

<!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{
            width: 200px;
            height: 100px;
            /* border-color: black;
            border-width:10px;
            border-style:solid; */
            /* 使边框不在撑大盒子 */
            box-sizing: border-box;
            border: black dashed 10px;


                    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 边框的10个像素会撑大盒子,由原来的200*100,变成220*120,添加属性 box-sizing:border-box,使边框不在撑大盒子。

 

 

div{
            width: 200px;
            height: 100px; 
            box-sizing: border-box;
                border-top:10px red dotted;
                border-left:10px green dashed ;
                    }

 

 

2)内边距

padding设置内容和边框之间的距离        

四个方向加边距

padding-top

padding-bottom

padding-left

padding-right

<!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 {
            width: 200px;
            height: 100px;
            padding-left:10px;
            padding-top:10px;
            
    }

    </style>

</head>
<body>
    <div>
        这是一个div
    </div>
</body>
</html>

 

 没有加padding属性前,内容顶格写。

这是加入padding属性之后,带有一个绿色的内边距

内边距也会影响盒子的大小,使用box-sizing:border-box属性(同上)

复合写法

padding:5px;  /*上下左右*/
padding:5px 10px; /*上下5px 左右 10px*/
padding:5px 10px 20px;/*上边居5px 左右内边距10px 下内边距 20px*/
padding: 5px 10px 20px 30px;/*上 右 下 左(顺时针)*/

3)外边距:控制盒子和盒子之间的距离

四个方向加边距

margin-top

margin-bottom

margin-left

margin-right

<!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{
            border:solid green 10px ;
            /* margin-top:5px;
            margin-right:5px; */

            width: 200px;
            height: 100px;
            /* 居中 */
            /* 文字没有居中，但是盒子居中 */

            margin:auto;
            /* 文字居中 */
            text-align: center;
                /* 去除浏览器默认样式 */
            margin:0px;

        }
    </style>

</head>
<body>
    <div>我爱学习</div>
    <div>这是一个div</div>
    <div>学习使我快乐</div>
</body>
</html>

 border:solid green 10px;

                                                                margin-top:5px;

                                                                margin-right:5px;

 

border:solid green 10px ;

            margin-top:5px;

            margin-right:5px;

              width: 200px;

            height: 100px;

 

 

 

<!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{
            border:solid green 10px ;
            margin-top:5px;
            margin-right:5px; 

            width: 200px;
            height: 100px; 
            /* 居中 */
            /* 文字没有居中，但是盒子居中 */

             margin:auto; 
            /* 文字居中 */
            text-align: center;
                /* 去除浏览器默认样式 */
            /* margin:0px; */

        }
    </style>

</head>
<body>
    <div>我爱学习</div>
    <div>这是一个div</div>
    <div>学习使我快乐</div>
</body>
</html>

 

margin的复合写法和padding一样

margin:auto是块级元素居中

text-align:center是行内元素居中

 

奈葵
关注
three-css2drenderer:threejs正式将CSS2DRender.js与npm一起应用
05-15
三重css2drender threejs正式将CSS2DRender.js与npm一起应用 安装 npm i --save three-css2drender 用法 import * as THREE from 'three' import { CSS2DRenderer , CSS2DObject } from 'three-css2drender' let ...
ss_css2.jar
06-27
ss_css2.jar一个控制器的工具类,自己写的工具类,工具类
css2style:将cssFile规则编译为html内联样式
05-24
> npm install -g css2style //linux or mac > sudo npm install -g css2style 使用： > cts 目标.html文件 //cts命令:css to style的缩写 //如果没有目标.html文件，会在当前目录下寻找index.html
ph-css:Java CSS 2和CSS 3解析器和生成器
05-12
Java CSS 2和CSS 3解析器和生成器。 此版本取代了phloc-css。 用于在构建时压缩CSS文件的Maven插件位于子项目ph-csscompress-maven-plugin中，并在下面进行了介绍。 ph-css没有将CSS应用于HTML元素的逻辑。 该页面...
CSS2 (Chinese).zip
11-05
本规范定义了第2级层叠样式表（CSS2）。CSS2是一种样式表语言，作者和用户可以使用它将样式（如：字体，间距及语音提示等）附加到结构化的文档（如：HTML文档和XML应用）中。由于CSS2将文档呈现的样式和文档的内容...
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
李浩洋
09-24 260
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。up-form组件 :model=“formData” :rules=“rules”要赋初始值
webview2加载本地页面
qq_25160759的博客
09-23 639
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 425
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
前端全屏模式切换
最新发布
yangyanqin2545的博客
09-27 286
【代码】前端全屏模式切换。
apply、call和bind的作用和区别
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 711
javascript中，apply、call和bind的作用和区别介绍。
DC00015基于java web校园网上购物系统
黄昏下的黎明的博客
09-24 654
DC00015【含配套文档】基于java web校园网上购物系统。
grpcweb 客户端请求grpc-java服务器
nddjava的专栏
09-24 390
1. 定义grpc proto文件：HelloWorld.proto。5.grpc-web代理：nginx。3. grpc-web js生成。2. java grpc服务。4. grpc-web代码。
WebGL阴影与后期处理
天涯学馆
09-24 154
在WebGL中实现更复杂的后期处理效果，通常会使用多个步骤，例如使用多个帧缓冲对象进行链式处理。它通过从光源视角渲染场景的深度信息，并在主渲染中使用这个深度信息来判断像素是否在阴影中。DOF（Depth of Field）模拟相机的焦距，使远离焦点的物体变得模糊。色调映射通常用于调整图像的动态范围，使其适应显示器的显示能力。WebGL还可以实现其他高级视觉效果，如SSAO（屏幕空间环境光遮蔽）、DOF（景深）、Bloom（光晕）等。SSAO是一种近似技术，用于模拟物体表面的阴影，增加场景的深度感。
如何使用ssm实现基于java web的防疫工作志愿者服务平台的设计与实现
寒夜
09-25 967
【代码】ssm基于java web的防疫工作志愿者服务平台的设计与实现+jsp
卷轴模式开发的技术架构分析与源代码展示
weixin_43744973的博客
09-24 941
在软件开发中，"卷轴模式"（虽然不是一个广泛认知的术语，在此我们可以理解为一种类似于游戏或应用中内容逐步加载与展示的模式，类似于古代卷轴展开的方式）通常用于处理大量数据或内容，特别是当这些数据或内容不适合一次性加载到内存中时。这种模式在移动应用、网页应用以及游戏开发中尤为常见。本文将分析实现卷轴模式的技术renxb001架构，并通过一个简单的示例代码来展示其基本实现。
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 219
nodejs fs 模块的简介与相关案例
【LLM】Ollama：本地大模型 WebAPI 调用
2303_80346267的博客
09-22 1443
Ollama 是一个基于 Python 的工具，专为本地调用大型语言模型而设计。它提供了用户友好的接口，使开发者能够在本地环境中快速加载和管理模型，简化了大模型的集成与使用流程。Ollama 适用于各种应用场景，包括自然语言处理、对话系统等，旨在提升开发效率和灵活性。
前端html+css+js 基础总结
2301_79706774的博客
09-23 1351
标签分为行级元素与块级元素行级元素占据区域由其显示内容决定，如span，img(图片)，<a></a>基本格式: <a href="链接" target="_blank"></a>用于跳转到其他网站，target="_blank"使其跳转时会打开新窗口 值是下划线blank，否则会在原窗口打开链接），strong（加粗文字），em（斜体文字）等。块级元素会换行显示，并占据整行区域，如div（布局标签），h，p，form（表单标签）等； 属性写在开始标签中，格式是键值对的形式，属性名：键；引号里的：值
java中手动回滚事物
weixin_45650629的博客
09-24 207
1、原因是因为代码中我写了try catch，try catch后异常被catch捕获了，catch后的业务代码还会继续执行，捕获后的异常会在后台的日志中打印，不会把这个异常错误抛给前端了；2、这个时候如果你使用的是事物注解@Transcation，因为你异常被捕获所以它并不会帮你回滚代码了，这时候就需要我们自己在catch中进行手动事物回滚。为什么要手动回滚事物？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值