前端知识补充—CSS

CSS介绍

什么是CSS

CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式
CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离

基本语法规范

选择器 + {⼀条/N条声明}
1)选择器决定针对谁修改 (找谁)
2)声明决定修改什么. (⼲啥)
3)声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值
CSS 要写到 style 标签中(后⾯还会介绍其他写法)
style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内
CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换)

引入方式

CSS有3种引⼊⽅式,语法如下表格所⽰:
引入方式语法描述示例
行内样式
在标签内使⽤style属性,
属性值是css属性键值对

<div style="color:red">红色</div>

内部样式
定义<style>标签,
在标签内部定义css样式

<style>h1{

       

    }</style>

外部样式
定义<link>标签,
通过href属性引⼊外部css⽂件

<link rel="stylesheet" href="CSS文件目录">

3种引⼊⽅式对⽐:
1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护,所以不常⽤. (此处使用这种方式)
2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式
3. 外部样式,html和css实现了完全的分离, 企业开发常⽤⽅式

规范 

样式⼤⼩写
虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟
空格规范
冒号后⾯带空格
选择器和 { 之间也有⼀个空格

CSS选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性

CSS选择器主要分以下⼏种:

1)标签选择器  通过标签来选择

2)类选择器  通过class来选择(.class

3)ID选择器  通过ID来选择(#ID

4)复合选择器  对元素进行分类,通过class来标识类名

5)通用选择器 (通配符选择器) 对元素进行起名,通过ID来标识(ID不能重复)

     

     

    <style>

         div{

            color:red;

        }                                     //标签选择器

        .center{

            color:red;

        }                                    //类选择器

        #test{

            color:red;

        }                                   //ID选择器

    </style>

        <div>已有账号?</div>

        <sapn class="center">已有账号?</span>

        <span class="center" id="test">已有账号?</sapn>span>

复合选择器——>有多个单选择器组成,选择器之间,使用  空格  隔开

        .order li{

            color:red;

        }

       

    <ol class="order">

        <li style=" color:blue;">1111</li>

        <li>2222</li>

        <li>3333</li>

    </ol>

 通配符选择器

/* 设置⻚⾯所有元素 , 颜⾊为红⾊ */
* {
        color : red;
   }

注意:

1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选
择器的组合, 也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签, 也可以是"孙⼦"标签
3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.
逗号前后可以是以上任意选择器, 也可以是选择器的组合

常见的CSS样式

接下来学习⼀些常⻅的css样式
准备如下html
< div class = "text" > 我是⽂本 </ div >

1)color: 设置字体颜⾊ 

颜⾊有如下⼏种表达⽅式:
       1. 英⽂单词,如red,blue
       2. rgb代码的颜⾊ 如rgb(255,0,0)
       3. ⼗六进制的颜⾊ 如#ff00ff

        .text{

            color:red;

        }

 2)font-size: 设置字体⼤⼩

        .text{

            color:red;

            font-size: 32px;

        }

3)border: 边框

边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断

      .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

        }

分别为边框粗细, 边框样式, 边框颜⾊

       .text{           

            border-width: 1px;

            border-style: solid;

            border-color: purple;

        }                                                        //两处的代码是等价的

4)width / height

width: 设置宽度
height: 设置⾼度
只有块级元素可以设置宽⾼
块级元素是HTML标签的⼀种显示模式, 对应的还有行内元素
常⻅块级元素: h1-h6, p, div 等
常⻅⾏内元素: a span
块级元素独占⼀⾏, 可以设置宽⾼
⾏内元素不独占⼀⾏, 不能设置宽⾼

        .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

            width: 200px;

            height: 100px;

        }

5)padding   margin
padding: 内边距, 设置内容和边框之间的距离
margin: 外边距, 设置元素和元素之间的距离
内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离
padding也是⼀个复合样式, 可以对四个⽅向分开设置
——>                  padding-top          padding-bottom         padding-left         padding-righ
margin也是⼀个复合样式, 可以给四个⽅向都加上外边距
——>                   margin-top           margin-bottom            margin-left           ma rgin-right

        .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

            width: 200px;

            height: 100px;

            margin: 10px 20px 30px 40px;

        }

       .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

            width: 200px;

            height: 100px;

            padding-right: 10px;

            padding-left: 20px;

            margin: 10px 20px 30px 40px;

        }

        html{

            padding: 20px;

        }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elasticsearch 杂记

8.17快速安装与使用 系统&#xff1a;ubuntu 24 下载地址&#xff1a; https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.17.0-linux-x86_64.tar.gz 解压后进入目录&#xff1a;cd ./elasticsearch-8.17.0 运行&#xff1a;./bin/elasticsearch 创…

在git commit之前让其自动执行一次git pull命令

文章目录 背景原因编写脚本测试效果 背景原因 有时候可以看到项目的git 提交日志里好多 Merge branch ‘master’ of …记录。这些记录是怎么产生的呢&#xff1f; 是因为在本地操作 git add . 、 git commit -m "xxxxx"时&#xff0c;没有提前进行git pull操作&…

c# RSA加解密工具,.netRSA加解密工具

软件介绍 名称: c# RSA加解密工具,.netRSA加解密工具依赖.net版本: .net 8.0工具类型: WinForm源码下载 c# RSA加解密工具,.netRSA加解密工具 依赖项 WinFormsRSA.csproj <Project

地理数据库Telepg面试内容整理-如何在数据库中优化大规模空间数据的查询性能

优化大规模空间数据查询的性能是一个复杂但关键的任务,特别是在需要处理海量的地理信息时。空间数据通常涉及复杂的几何对象、空间关系和大范围的查询操作,因此,优化空间数据的查询性能通常需要综合考虑存储、索引、查询方法等多个方面。以下是一些优化大规模空间数据查询性…

GitCode 光引计划投稿|智能制造一体化低代码平台 Skyeye云

随着智能制造行业的快速发展&#xff0c;企业对全面、高效的管理解决方案的需求日益迫切。然而&#xff0c;传统的开发模式往往依赖于特定的硬件平台&#xff0c;且开发过程繁琐、成本高。为了打破这一瓶颈&#xff0c;Skyeye云应运而生&#xff0c;它采用先进的低代码开发模式…

FFmpeg推拉流命令

命令简介 它可以将本地的视频/音频流推送到服务器&#xff0c;也可以将服务器上的音视频流拉到本地。 推流命令的命令格式 ffmpeg -re -i [输入文件] -c:v [视频编码器] -c:a [音频编码器] -f [输出格式] [推流地址] 参数解析 -re 表示采用实时模式&#xff0c;以原始速度…

使用git管理项目版本

Pycharm git-创建本地仓库\创建分支\合并分支\回溯版本\加入git后文件颜色代表的含义_python中git显示不同颜色-CSDN博客 主要几个命令&#xff1a; git status 查看已提交文件 git checkout -b dev 创建并切换到新分支&#xff0c;是各分支的头指针 git symbolic-ref HEAD re…

iOS从Matter的设备认证证书中获取VID和PID

设备认证证书也叫 DAC, 相当于每个已经认证的设备的标识。包含了 VID 和 PID. VID: Vendor ID &#xff0c;标识厂商 PID: Product ID&#xff0c; 标识设备的 根据 Matter 对于设备证书的规定&#xff0c;DAC证书subject应该包含VID 和 PID. 可通过解析 X509 证书读取subject…

关于分布式数据库需要了解的相关知识!!!

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于关于分布式数据库方面的相关内容&a…

【前沿 热点 顶会】AAAI 2025中与目标检测有关的论文

CP-DETR: Concept Prompt Guide DETR Toward Stronger Universal Object Detection&#xff08;AAAI 2025&#xff09; 最近关于通用物体检测的研究旨在将语言引入最先进的闭集检测器&#xff0c;然后通过构建大规模&#xff08;文本区域&#xff09;数据集进行训练&#xff0…

EdgeX Core Service 核心服务之 Core Command 命令

EdgeX Core Service 核心服务之 Core Command 命令 一、概述 Core-command(通常称为命令和控制微服务)可以代表以下角色向设备和传感器发出命令或动作: EdgeX Foundry中的其他微服务(例如,本地边缘分析或规则引擎微服务)EdgeX Foundry与同一系统上可能存在的其他应用程序…

计算机网络安全

网络安全主要用于保证网络的可用性&#xff0c;以及网络中所传输信息的完整性和机密性。 网络安全设计 网络安全防范体系在整体设计过程中应遵循以下9 项原则。 (1)木桶原则。对信息进行均衡、全面的保护。木桶的最大容积取决于最短的一块木板。网络信息系统是一个复杂的计算机…

《计算机组成及汇编语言原理》阅读笔记:p86-p115

《计算机组成及汇编语言原理》学习第 6 天&#xff0c;p86-p115 总结&#xff0c;总计 20 页。 一、技术总结 1.if statement 2.loop 在许多编程语言中&#xff0c;有类种循环&#xff1a;一种是在程序开头检测条件(test the condition),另一种是在程序末尾检测条件。 3.C…

如何给负载均衡平台做好安全防御

在现代网络架构中&#xff0c;负载均衡&#xff08;Load Balancing&#xff09;扮演着至关重要的角色。它不仅负责将流量分配到多个服务器以确保高效的服务交付&#xff0c;还作为第一道防线来抵御外部攻击。为了保护您的应用程序和服务免受潜在威胁&#xff0c;必须对负载均衡…

【ES6复习笔记】生成器(11)

什么是生成器函数 生成器函数是一种特殊的函数&#xff0c;它可以在执行过程中暂停并保存当前状态&#xff0c;然后在需要时恢复执行。生成器函数通过 yield 关键字来实现暂停和恢复执行的功能。 生成器函数的基本用法 定义生成器函数&#xff1a;使用 function* 关键字来定…

nodejs开发命令行工具

一个简单的 Node.js CLI 工具的开发流程 开发一个命令行工具&#xff08;CLI&#xff09;是一个非常有用的技能&#xff0c;Node.js 提供了强大的库和模块来帮助你快速构建 CLI 应用。下面是一个简单的指南&#xff0c;教你如何使用 Node.js 开发一个命令行工具。 第一步&…

WebRTC服务质量(09)- Pacer机制(01) 流程概述

WebRTC服务质量&#xff08;01&#xff09;- Qos概述 WebRTC服务质量&#xff08;02&#xff09;- RTP协议 WebRTC服务质量&#xff08;03&#xff09;- RTCP协议 WebRTC服务质量&#xff08;04&#xff09;- 重传机制&#xff08;01) RTX NACK概述 WebRTC服务质量&#xff08;…

Linux高级--2.4.5 靠协议头保证传输的 MAC/IP/TCP/UDP---协议帧格式

任何网络协议&#xff0c;都必须要用包头里面设置写特殊字段来标识自己&#xff0c;传输越复杂&#xff0c;越稳定&#xff0c;越高性能的协议&#xff0c;包头越复杂。我们理解这些包头中每个字段的作用要站在它们解决什么问题的角度来理解。因为没人愿意让包头那么复杂。 本…

uniapp 微信小程序 数据空白展示组件

效果图 html <template><view class"nodata"><view class""><image class"nodataimg":src"$publicfun.locaAndHttp()?localUrl:$publicfun.httpUrlImg(httUrl)"mode"aspectFit"></image>&l…

BAPI_BATCH_CHANGE在更新后不自动更新批次特征

1、问题介绍 在CL03中看到分类特性配置了制造日期字段&#xff0c;并绑定了生产日期字段MCH1~HSDAT MSC2N修改批次的生产日期字段时&#xff0c;自动修改了对应的批次特性 但是通过BAPI&#xff1a;BAPI_BATCH_CHANGE修改生产日期时&#xff0c;并没有更新到批次特性中 2、BAPI…