Web前端基础知识(四)

CSS简介

CSS(层叠样式表),用于定义网页样式和布局的样式表语言。

一般与HTML一起用于构建web页面的。

HTML负责定义页面的结构和内容,CSS负责控制页面的外观和样式。

通过CSS,可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式,从而实现更精确的页面设计。

CSS语法

       选择器{

            属性1:属性值1;

            属性2:属性值2;

        }

选择器的声明中可以写无数条属性。

声明的每一行属性,都需要以英文分号结尾。

声明中的所有属性和值都是以键值对形式出现的。

选择器,选择要应用样式的HTML元素。


CSS导入方式---内部样式表

将CSS样式放在HTML文档的头部。

举例:

<style>

        p {

            color: blue;

            font-size: 20px;

        }

    </style>

.....

  <p>这是一个应用了css样式的文本</p>

效果:


CSS三种导入方式:

     1.内联样式(Inline Styles):把CSS样式直接放在HTML标签中。

     2.内部样式表(Internal Stylesheet):在HTML文档的head标签中,定义。

    3.外部样式表(External Stylesheet):将CSS样式单独放在一个CSS文件中,然后在head标签                                                                  里,使用另一个标签,把它链接到HTML文档中。该方式允许在多个页面上重复使用相同的样式。

      优先级:内联样式>内部样式表>外部样式表。优先级高的,可以覆盖优先级低的。

---------------------------------------------------------------------------------------------------------------------------------

举例:

 <h1 style="color: red;">这是一个一级标题标签,使用内联样式</h1>

效果:


举例:

 <style>

        h2{

            color: green;

        }

    </style>

....

<h2>这是一个二级标题标签,应用内部样式</h2>

效果:


举例:

效果:

---------------------------------------------------------------------------------------------------------------------------------

选择器

    选择器是CSS中的关键部分,它允许 针对特定元素或一组元素定义样式。

    元素选择器

    类选择器(常用)

    ID选择器(常用)

    通用选择器:对所有元素进行选择

    子元素选择器:选择直接位于父元素内部的子元素。大标签嵌套小标签。

    后代选择器(包含选择器)

    并集选择器(兄弟选择器):选择在同一级别下的元素

        注意:后代包含了子代,但,子代不包含后代。

    伪类选择器:选择HTML文档的元素的特定状态或者位置的,不仅仅是这个元素本身的属性。

                        以冒号开头,通常是给用户交互文档结构或者 其他条件下的元素应用样式。

                        满足用户交互,比如,鼠标悬停在一个元素上,可以用伪类选择器实现。

---------------------------------------------------------------------------------------------------------------------------------举例(前四种选择器):

效果:

---------------------------------------------------------------------------------------------------------------------------------

ID>class>标签名。

---------------------------------------------------------------------------------------------------------------------------------

举例:

   <h1 style="font: bolder 40px 'kaiti';">这是一个font复合属性示例</h1>

    <p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>

效果:

---------------------------------------------------------------------------------------------------------------------------------

行内块元素:

水平方向上排列,但可以设置宽度、高度、内外边距等块级元素的属性。

行内块元素可以包含其他行内元素或块级元素。

---------------------------------------------------------------------------------------------------------------------------------

举例:

    <div>这是一个块级元素</div>

    <span>这是一个行内元素</span>

    <img src="./单元格 A1.JPG" alt="">

效果:

---------------------------------------------------------------------------------------------------------------------------------

块元素和行内块元素,都可以定义宽、高。

举例:-

 <style>

        .block{

            background-color: aqua;

            width: 200px;

            height: 1%00px;

        }

        .inline{

            background-color: blue;

            width: 200px;

        }

        .inline-block{

            width: 100px;

            height: 100px;

        }

    </style>

----

 <div class="block">这是一个块级元素</div>

    <div class="block">这是一个块级元素</div>

    <span class="inline">这是一个行内元素</span>

    <img src="./单元格 A1.JPG" alt="" class="inline-block">

    <img src="./单元格 A1.JPG" alt="" class="inline-block">

    <img src="./单元格 A1.JPG" alt="" class="inline-block">

效果:

---------------------------------------------------------------------------------------------------------------------------------

展示的商品列表等,基本都是行内块元素,但商品列表不只是图片,解决办法:将div 、span等一系块元素、行内元素,转换成行内块元素。使用display.

举例:

     <div class="div-inline">这是一个转换成行内元素的div标签</div>

效果:

---------------------------------------------------------------------------------------------------------------------------------

举例:

  <span class="span-inline-block">这是一个转换成行内块的span标签</span>

效果:

---------------------------------------------------------------------------------------------------------------------------------

display属性除了 inline、block、inline-block 这些属性值外,还有 none(表示不显示)

---------------------------------------------------------------------------------------------------------------------------------

后续内容见《Web前端基础知识(五)》

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

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

相关文章

ESP32_h2-创建一个工程后,添加驱动文件并在调用

点击F1或者ctrlshiftP 输入组件名字&#xff1a; 创建好后&#xff0c;可以看到文件目录多了components文件夹和组件文件 &#xff08;文件夹名字uart就是组件名字&#xff09;这里更改了文件名字 在整个工程目录下找到&#xff1a; 添加路径 finish&#xff01; 调用 程…

idea报错:There is not enough memory to perform the requested operation.

文章目录 一、问题描述二、先解决三、后原因&#xff08;了解&#xff09; 一、问题描述 就是在使用 IDEA 写代码时&#xff0c;IDEA 可能会弹一个窗&#xff0c;大概提示你目前使用的 IDEA 内存不足&#xff0c;其实就是提醒你 JVM 的内存不够了&#xff0c;需要重新分配。弹…

PHP高性能webman管理系统EasyAdmin8

介绍 EasyAdmin8-webman 在 EasyAdmin 的基础上使用 webman 最新版重构&#xff0c;PHP 最低版本要求不低于 8.0。基于webman和layui v2.9.x的快速开发的后台管理系统。 项目地址&#xff1a;http://easyadmin8.top 演示地址&#xff1a;http://webman.easyadmin8.top/admin …

《Ceph:一个可扩展、高性能的分布式文件系统》

大家觉得有意义和帮助记得及时关注和点赞!!! 和大多数分布式存储系统只支持单一的存储类型不同&#xff0c;Ceph 同时支持三种&#xff1a; 文件系统&#xff08;file system&#xff09;&#xff1a;有类似本地文件系统的层级结构&#xff08;目录树&#xff09;&#xff0c…

Kafka数据迁移全解析:同集群和跨集群

文章目录 一、同集群迁移二、跨集群迁移 Kafka两种迁移场景&#xff0c;分别是同集群数据迁移、跨集群数据迁移。 一、同集群迁移 应用场景&#xff1a; broker 迁移 主要使用的场景是broker 上线,下线,或者扩容等.基于同一套zookeeper的操作。 实践&#xff1a; 将需要新添加…

“智能控制的新纪元:2025年机器学习与控制工程国际会议引领变革

ICMLCE 2025 | 机器学习与控制工程国际会议 ✨宝子们&#xff0c;今天要为大家介绍的是一个在机器学习和控制工程领域备受瞩目的国际学术盛会——2025年机器学习与控制工程国际会议&#xff08;ICMLCE 2025&#xff09;。本次大会将在美丽的大理举行&#xff0c;旨在汇聚全球顶…

公路边坡安全监测中智能化+定制化+全面守护的应用方案

面对公路边坡的安全挑战&#xff0c;我们如何精准施策&#xff0c;有效应对风险&#xff1f;特别是在强降雨等极端天气下&#xff0c;如何防范滑坡、崩塌、路面塌陷等灾害&#xff0c;确保行车安全&#xff1f;国信华源公路边坡安全监测解决方案&#xff0c;以智能化、定制化为…

pyqt和pycharm环境搭建

安装 python安装&#xff1a; https://www.python.org/downloads/release/python-3913/ python3.9.13 64位(记得勾选Path环境变量) pycharm安装&#xff1a; https://www.jetbrains.com/pycharm/download/?sectionwindows community免费版 换源&#xff1a; pip config se…

在dynadot进行NS域名服务器设置后网站无法访问的可能原因

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 其他索引&#xff1a; Dynadot平台操作教程索引…

【初接触】【学习】编译 Rust 为 WebAssembly

前言 需要先了解以下知识&#xff1a; WebAssemblyRustwasm_bindgenwasm-packjs-sysweb-sysJavaScriptHTMLCSSwebpack 假设您已经了解所有知识点&#xff0c;并且您的环境中已安装了 Node.js和npm 以及 Rust 的完整开发工具链&#xff08;包括 rustc、cargo 和 rustup&#…

探秘仓颉编程语言:使用体验与功能剖析

目录 一、引言&#xff1a;仓颉登场&#xff0c;编程新纪元开启 二、初体验&#xff1a;搭建环境与 “Hello World” &#xff08;一&#xff09;环境搭建指南 &#xff08;二&#xff09;Hello World 初印象 三、核心特性剖析&#xff1a;智能、高效、安全多维解读 &…

AI真的可以“陪伴”吗?

人们普遍渴求陪伴&#xff0c;仅有4.6%的人认为自己的陪伴需求都被满足了&#xff0c;剩下大部分人群都面临着各种各样的社交困境。 “陪伴”有多个层次。最狭义的“陪伴”是在人与人之间发生的&#xff1b;但稍微放宽一些&#xff0c;宠物甚至植物、家具也会让…

基于cobra开发的k8s命令行管理工具k8s-manager

基于cobra开发的k8s命令行管理工具k8s-manager 如果觉得好用&#xff0c;麻烦给个Star!通用配置1 node 分析所有node的资源情况2 analysis 分析Node节点上的资源使用构成3 image 获取指定namespace的所有镜像地址4 resource 获取指定namespace的所有limit 与 Requests大小5 top…

从零开始C++游戏开发之第七篇:游戏状态机与回合管理

在游戏开发的道路上&#xff0c;状态管理是一个无法绕开的重要课题。尤其是在棋牌类游戏中&#xff0c;游戏的进行需要有条不紊地按照回合推进&#xff0c;同时管理多个游戏状态&#xff0c;如“等待玩家加入”、“游戏进行中”、“结算阶段”等。如何优雅且高效地实现这些逻辑…

USB Hub 检测设备

系列文章目录 xHCI 简单分析 USB Root Hub 分析 USB Hub 检测设备 文章目录 系列文章目录一、引言二、hub_eventshub_port_connect_changeusb_alloc_devusb_set_device_statehub_port_initusb_new_device 一、引言 USB Hub 检测设备 一文中讲到&#xff0c;当有 USB 插入时&…

MySQL从入门到入土---MySQL表的约束 (内含实践)---详细版

目录 引入&#xff1a; null 与not null default&#xff1a; comment列描述 &#xff1a; not null 和 default&#xff1a; zerofill &#xff1a; 主键&#xff1a;primary key 复合主键&#xff1a; 自增长:auto_increment 唯一键&#xff1a;unique key 外键&a…

易语言 OCR 文字识别

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…

基于SpringBoot的蜗牛兼职网的设计与实现

一、项目背景 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。人们生活水平的不断提高&#xff0c;日常生活中人们对蜗牛兼职网方面的要求也在不断提高&#xff0c;需要兼职工作的人数更是不断增加&#xff0c;使得蜗牛兼职网的开发成为必需而且紧迫的事情。蜗牛…

shardingsphere分库分表项目实践5-自己用java写一个sql解析器+完整项目源码

前1节我们介绍了 shardingsphere 分表分库的sql解析与重写&#xff1a; shardingsphere分库分表项目实践4-sql解析&重写-CSDN博客 那么shardingsphere sql 解析底层究竟是怎么实现的呢&#xff0c;其实它直接用了著名的开源软件 antlr . antlr 介绍&#xff1a; ANTLR&a…

光谱相机与普通相机的区别

一、成像目的 普通相机&#xff1a;主要目的是记录物体的外观形态&#xff0c;生成人眼可见的、直观的二维图像&#xff0c;重点在于还原物体的形状、颜色和纹理等视觉特征&#xff0c;以供人们进行观赏、记录场景或人物等用途。例如&#xff0c;拍摄旅游风景照片、人物肖像等…