CSS的基础

  • CSS美化HTML,布局网页

  • CSS最大的价值:由HTML专注去做结构呈现,样式给CSS,结构(HTML)与样式(CSS)相分离

  • CSS主要由选择器以及一条或多条声明

  • 在<head></head>中实现CSS在<body></body>实现HTLM

  • 语法格式:选择器{做什么}

  • <head>
    <style>p {color: red;//冒号是小写的,分号是大写的font-size: 12px;//冒号是小写的,分号是大写的.字体的大小}
    <style>
    </head>
    <body><p>有点意思</p>
    </body>
  • 空格规范

  • 属性值前面,冒号后面,保留一个空格

  • 选择器和大括号中间保留空格

  • 选择器分为基础选择器和复合选择器

  • 基础选择器分成标签选择器,优点是能快速为页面中同类型的标签统一设置样式

  • 类选择器可以单独选一个或几个标签

<style>
.red{color: red;//color: #ccooff;变成16进制的颜色双击可任意选取颜色
}
</style>
<body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
</body>
  • 可以理解为这个标签起了一个名字,来表示

  • 长名称或词组可以使用中横线来为选择器命名

  • 不能使用纯数字、中文等命名,尽量使用英文字母来表示

  • 多类名的使用方式

 <style>.red{color: red;}.green{font-size: 100px;}</style><body><p class="red green">是看得见</p>//可以同时使用red和green两个类。注意两个类中间要空格分开<p>是看得见</p><p>是看得见</p></body>
  • 使用多类名可以将宽长放一个类,颜色放一个类

  • id选择器样式#定义,结构id调用,只能调用一次,有标签使用了,别的标签不能使用

  • #pink{color: red;
    }
    ​
    <div id="pink"></div>
  • 同配符选择器

  • *{color: red;
    }
    <body></body>里面的所有的内容自动变成红色
  • CSS的字体系列

  • font-family属性定义文本的字体系列

  • <head>
    <style>p{font-size: '微软雅黑';font-weight: bold;//给字体加粗font-weight: 700;//开发的时候写数字。700等于加粗font-weight;400;//400等于不加粗等于normal开发写数字}p{font-family: 'Micorsoft YaHai', Arial,Helvetica;}
    </style>
    </head>
    <body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
    </body>
  • px是像素的意思

  • 字体之间必须使用英文状态下的逗号隔开

  • 空格隔开的多个的单词组成的字体,加引号

  • 使用系统默认的字体

  • 可以直接给body直接输入字体

  • 如果是标题的话,就算是在body{ font-size=12px;}标题部分也要自己在重新定义

  • <head>
    <style>em {font-style: normal;}
    <style>
    </head>
    <body><em>有点意思</em>
    </body>
  • 上述的代码可以复合起来,顺序是

  • font:斜体 粗细 字体大小 字体样式

  • 注意不能颠倒顺序

  • 复合字体可以没有斜体和粗细但不能没有字体大小和字体样式

  • CSS提供了背景颜色半透明的效果

  • background: rgba(0,0, 0, 0.3);//0.3也可以将.3
  • r代表红,g代表绿色,b代表蓝色,a代表alpha透明度

  • 盒子背景半透明,不会影响盒子里面内容的

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

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

相关文章

Docker部署Nginx-常用命令

1.拉取 docker pull nginx 2. 查看镜像 docker images 3.保存镜像 docker save -o nginx.tar nginx:latest 4.删除镜像 docker rmi nginx:latest 5. 加载镜像 docker load -i nginx.tar 6. 运行Nginx docker run -d --name nginx -p 80:80 nginx 7.停掉Nginx容器 docker stop n…

Blender 导出 fbx 到虚幻引擎中丢失材质!!!(使用Blender导出内嵌材质的fbx即可解决)

目录 0 引言1 Blender导出内嵌纹理的fbx模型 0 引言 我在Blender处理了一些fbx模型后再次导出到UE中就经常出现&#xff0c;材质空白的情况&#xff08;如下图所示&#xff09;&#xff0c;今天终于找到问题原因&#xff0c;记录下来&#xff0c;让大家避免踩坑。 其实原因很简…

弧度、圆弧上的点、圆的半径(r)、弧长(s)之间的关系

要计算弧度和圆弧上的点&#xff0c;需要知道以下几个要素&#xff1a; 圆的半径&#xff08;r&#xff09;&#xff1a;即圆的中心到圆周上任意一点的距离。 弧长&#xff08;s&#xff09;&#xff1a;从圆周上的一个点到另一个点所经过的弧长。 弧度&#xff08;θ&#x…

【chainlit】使用chainlit部署chatgpt

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

HCQ1-1300-D【高速输入】

因为我的PLC固件比较旧。所以有些限制。【比如&#xff1a;编译不报错&#xff0c;下载PLC程序就报故障】我的PLC的高速输入类型只能是【hsi_ref】 所以&#xff0c;程序添加的高速输入模块只能是【1.0.1.0】版本 如果固件版本低&#xff0c;看下固件能支持的类型。选错的话&am…

centos安装conda python3.10

最新版本的conda自带python3.10,直接安装即可。 手动创建一个conda文件夹&#xff0c;进入该文件夹&#xff0c;然后执行以下操作步骤。 1.下载 curl -O https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh2.安装 sh Miniconda3-latest-Linux-x86_64.…

串口数据包收发

数据包 把属于同一批的数据进行打包和分割&#xff0c;方便接收方进行识别 HEX数据包 思路&#xff1a;一个数据规定四个字节&#xff0c;以0xFF为包头&#xff0c;0xFE为包尾&#xff0c;当检测到0xFF时&#xff0c;接下来四个数据就是数据&#xff0c;接收到0xFE时&#x…

FFMPEG 视频类过滤器学习整理

addroi 作用 在视频帧上标记一块感兴趣的区域。 帧数据被原封不动地传递&#xff0c;但元数据被附加到帧&#xff0c;指示可能影响后续编码行为的感兴趣区域。可以通过多次应用过滤器来标记多个区域。 参数 qoffset: 应用在此区域的量化偏移。 参数范围&#xff1a;-1 ~ …

【JVM】第五篇 垃圾收集器G1和ZGC详解

导航 一. G1垃圾收集算法详解1. 大对象Humongous说明2. G1收集器执行一次GC运行的过程步骤3. G1垃圾收集分类4. G1垃圾收集器参数设置5. G1垃圾收集器的优化建议6. 适合使用G1垃圾收集器的场景?二. ZGC垃圾收集器详解1. NUMA与UMA2. 颜色指针3. ZGC的运作过程4. ZGC垃圾收集器…

开发中的前端和后端

一、引言 前端和后端是Web开发中两个不同的领域。 前端开发主要负责实现用户界面的设计和功能&#xff0c;包括网页的布局、样式和交互效果。前端开发使用HTML、CSS和JavaScript等技术来构建用户在浏览器中直接与之交互的界面。前端开发人员需要关注网页的可视化效果和用户体验…

【软件测试】自动化测试selenium(一)

文章目录 一. 什么是自动化测试二. Selenium的介绍1. Selenium是什么2. Selenium的特点3. Selenium的工作原理4. SeleniumJava的环境搭建 一. 什么是自动化测试 自动化测试是指使用软件工具或脚本来执行测试任务的过程&#xff0c;以替代人工进行重复性、繁琐或耗时的测试活动…

MySQL进阶_查询优化和索引优化

文章目录 第一节、索引失效案例1.1 数据准备1.2 全值匹配我最爱1.3 最佳左前缀法则 第一节、索引失效案例 可以从以下维度对数据库进行优化&#xff1a; 索引失效、没有充分利用到索引–索引建立关联查询太多JOIN (设计缺陷或不得已的需求)–SQL优化服务器调优及各个参数设置…

排序算法之【希尔排序】

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…

[管理与领导-112]:IT人看清职场中的隐性规则 - 9 - 付出与回报的关系:先付出,后回报,不行就止损,这才是职场价值交换的本质

目录 一、职场中付出与回报的先后关系 二、付出与回报四象限模型 三、职场专业性的本质 一、职场中付出与回报的先后关系 在职场中&#xff0c;个人的付出和回报之间存在着先后关系。以下是按照先后关系划分的四种类型&#xff1a; 先付出后回报型&#xff0c;不回报&#…

【数据结构和算法】--N叉树中,返回某些目标节点到根节点的所有路径

目录 一、前言二、具体实现及拓展2.1、递归-目标节点到根节点的路径数据2.2、list转换为tree结构2.3、tree转换为list结构 一、前言 这么多年工作经历中&#xff0c;“数据结构和算法”真的是超重要&#xff0c;工作中很多业务都能抽象成某种数据结构问题。下面是项目中遇到的…

华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gogs服务器

华为云云耀云服务器L实例评测&#xff5c;云耀云服务器L实例部署Gogs服务器 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点 二、Gogs介绍2.1 Gogs简介2.2 Gogs特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、远程登录华为云云耀云…

基于Java的无人仓库自动补货管理平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

【DRAM存储器九】SDRAM介绍-read、write、Precharge、DQM、Power down、Clock Suspend命令

&#x1f449;个人主页&#xff1a;highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 参考资料&#xff1a;《镁光SDRAM数据手册》、《PC SDRAM specification》 目录…

面试常用排序查找算法

文章目录 1 二分查找2 冒泡排序3 堆排序4 插入排序5 快速排序6 选择排序7 希尔排序 1 二分查找 定义两个变量left和right&#xff0c;分别表示数组的左边界和右边界&#xff0c;初始值分别为0和len - 1&#xff0c;其中len是数组的长度。计算数组的中间位置mid&#xff0c;公式…

[Linux] 5.Linux虚拟机和Windows文件共享

一、拖拽 如果安装了VMware Tool可以从Windows直接拖进Linux中共享文件&#xff0c;通过拖拽的方式可以把文件从Linux 传输到Windows 二、 文件共享 需要安装VMware Tool点击添加&#xff0c;选择Windows文件的路径&#xff0c;名称作为Linux访问的路径 cd什么都不加&#xff…