CSS详细基础(一)选择器基础

本帖开始,我们来介绍CSS——即,层叠样式表~

        层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

        CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

        CSS的存在意义是:贯彻结构样式行为相分离的思想~即,不同模块采用不同的技术,降低项目整体的耦合度。在代码上的具体体现是,将全部的样式属性均写在head内部的style标签中~

总体来说,CSS具有以下特点:

  • 丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

  • 易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,只需要在样式列表中找到相应的样式声明进行修改。

  • 多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

  • 层叠

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

  • 页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

一.基本结构

在合法的开发中,所有的样式均应该写在style标签中,而style又包含在head内部~如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS初体验</title><style>p       /* 采用标签选择器选用全部的p标签 */{color: red;/* 设置字体颜色为红色 */font-size: 80px;/* 设置字体大小为80像素 */font-style: inherit;/* 属性后面最好补充一个空格 */}</style>
</head>
<body><p>有点意思!</p>  
</body>
</html>

如下是对p内部文本修改后的效果:

二.标签选择器

标签选择器等四大选择器均为基础选择器。

所谓标签选择器,即以标签为单位构建样式——这样一来的话,页面内所有同类标签的样式均保持一致~

    <style>p{color:gold ;}div{color: pink;}/* 使用两个标签选择器 *//* 注意,标签选择器等四大选择器均为基础选择器。 */</style>

三.类选择器

类选择器用于选中一类标签,在Html中具体体现为class属性一致的标签。通常情况下,绝大多数标签均可以设置class属性~

如下是多类标签:

<body><ul><!-- 使用无序标签 --><li class="red big pink">红色</li><!-- 虽然class可以由多个值同时赋予,但是相同属性的值仍然遵守就近原则。 --><li class="yellow">黄色</li><li class="blue">蓝色</li><li class="green">绿色</li><li class="pink">粉色</li></ul>
</body>

如下是类选择器的语法——以.类名来命名~ 

    <style>.red{color: red;}.yellow{color: yellow;}.blue{color: blue;}.green{color: green;}.pink{color: pink;}.big{font-size: x-large;}/* 以上六个均采用类选择器 */</style>

 

给大家展示一个div标签+类选择器做盒子的案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.royalblue{width: 100px;height: 100px;background-color:rgb(14, 48, 148);}.orange{width: 100px;height: 100px;background-color: orange;}div{text-align: center;/* 光是文本对齐法无法让盒子实现居中 */}/* 用类选择器画出两种风格的盒子 */</style>
</head>
<body><div class="royalblue"></div><div class="orange"></div><div class="royalblue"></div><div class="orange"></div><div class="royalblue"></div><div class="orange"></div><div class="royalblue"></div>
</body>
</html>

 

四.通配符与ID选择器

通配符选择器的效果是对全页面的元素均产生效果~

语法格式为:

* {属性1: 属性值1;属性2: 属性值2;
}

而标签选择器,用法上和类选择器高度一致,只不过ID是唯一的,每个标签不能相同~

    <div><span id="one">id选择器效果1</span><span id="two">id选择器效果2</span><span id="three">id选择器效果3</span></div>

语法上以#号开头~

      #one{color: pink;font-size: 30px;}/* 注意id选择器和类选择的语法区别 */#two{color: skyblue;font-size: 30px;}#three{color: tan;font-size:30px;}

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

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

相关文章

Zama的fhEVM:基于全同态加密实现的隐私智能合约

1. 引言 Zama的fhEVM定位为&#xff1a; 基于全同态加密实现的隐私智能合约 解决方案 开源代码见&#xff1a; https://github.com/zama-ai/fhevm&#xff08;TypeScript Solidity&#xff09; Zama的fhEVM协议中主要包含&#xff1a; https://github.com/zama-ai/tfhe-…

2023/10/4 -- ARM

今日任务&#xff1a;QT实现TCP服务器客户端搭建的代码&#xff0c;现象 ser&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);server new QTcpSe…

多线程(pthread库)

POSIX线程库 引言 前面我们提到了Linux中并无真正意义上的线程 从OS角度来看&#xff0c;这意味着它并不会提供直接创建线程的系统调用&#xff0c;它最多给我们提供创建轻量级进程LWP的接口 但是从用户的角度来看&#xff0c;用户只认识线程啊&#xff01; 因此&#xff0c;…

十天学完基础数据结构-第二天(数据结构简介)

什么是数据结构&#xff1f; 在计算机科学中&#xff0c;数据结构是一种组织和存储数据的方式。它定义了数据的布局&#xff0c;以及对这些数据执行的操作。你可以把数据结构看作是计算机内存中的特定组织方式&#xff0c;就像图书馆中书籍的排列一样。 数据结构可以是各种形…

C++算法 —— 动态规划(9)完全背包问题

文章目录 1、动规思路简介2、完全背包【模板】3、零钱兑换4、零钱兑换Ⅱ5、完全平方数 背包问题需要读者先明白动态规划是什么&#xff0c;理解动规的思路&#xff0c;并不能给刚接触动规的人学习。所以最好是看了之前的动规博客&#xff0c;以及01背包博客&#xff0c;才能看完…

Vue11 计算属性

先看不用计算属性的两种方法 插值语法 简单的计算&#xff0c;可以使用插值语法 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>姓名案例_插值语法实现</title><!-- 引入Vue --><script type"te…

软件测试基础学习

注意&#xff1a; 各位同学们&#xff0c;今年本人求职目前遇到的情况大体是这样了&#xff0c;开发太卷&#xff0c;学历高的话优势非常的大&#xff0c;公司会根据实际情况考虑是否值得培养&#xff08;哪怕技术差一点&#xff09;&#xff1b;学历稍微低一些但是技术熟练的…

MATLAB算法实战应用案例精讲-【优化算法】A*算法

前言 A*算法最早于1964年在IEEE Transactions on Systems Science and Cybernetics中的论文《A Formal Basis for the Heuristic Determination of Minimum Cost Paths》中首次提出。 其属于一种经典的启发式搜索方法,所谓启发式搜索,就在于当前搜索结点往下选择下一步结点时…

SpringMVC处理请求核心流程

一、前言 SpringMVC是一个基于Java的Web框架&#xff0c;它使用MVC&#xff08;Model-View-Controller&#xff09;设计模式来处理Web请求。在SpringMVC中&#xff0c;请求处理的核心流程主要包括以下几个步骤&#xff1a; 1、用户发送请求到前端控制器&#xff08;Dispatche…

Linux:minishell

目录 1.实现逻辑 2.代码及效果展示 1.打印字符串提示用户输入指令 2.父进程拆解指令 3.子进程执行指令,父进程等待结果 4.效果 3.实现过程中遇到的问题 1.打印字符串的时候不显示 2.多换了一行 3.cd路径无效 4.优化 1.ll指令 2.给文件或目录加上颜色 代码链接 模…

k8s集群的简单搭建

K8S简单集群搭建 前提条件 windos11电脑&#xff0c;内存16g以上安装vmware虚拟机软件安装三个centos7虚拟机&#xff0c;分配硬盘40g,内存4g,CPU4核心网络均采用NAT模式&#xff08;新建虚拟机默认的模式&#xff09; centos7镜像下载&#xff1a;https://mirrors.tuna.tsi…

Scala第十三章节

Scala第十三章节 1. 高阶函数介绍 2. 作为值的函数 3. 匿名函数 4. 柯里化 5. 闭包 6. 控制抽象 7. 案例: 计算器 scala总目录 文档资料下载

MacOS怎么配置JDK环境变量

1 输入命令看是否配置了JDk 的环境变量&#xff1a;echo $JAVA_HOME 要是什么也没输出 证明是没配置 2 输入命令编辑 sudo vim ~/.bash_profile 然后按 i &#xff0c;进入编辑模式&#xff0c;粘贴下面的代码&#xff0c;注意&#xff1a;JAVA_HOME后面路径需要改成自己的版…

mstsc无法保存RDP凭据, 100%生效

问题 即使如下两项都打勾&#xff0c;其还是无法保存凭据&#xff0c;特别是连接Ubuntu (freerdp server)&#xff1a; 解决方法 网上多种复杂方法&#xff0c;不生效&#xff0c;其思路是修改后台配置&#xff0c;以使mstsc跟平常一样自动记住凭据。最后&#xff0c;如下的…

CentOS7安装Oracle XE记录

本文仅是CentOS7安装Oracle XE记录&#xff0c;供参考 1、下载安装包 oracle-xe-11.2.0-1.0.x86_64.rpm.zip 2、安装 &#xff08;1&#xff09;第一次安装 [rootnode1 opt]# cd Disk1/ [rootnode1 Disk1]# ll 总用量 309884 -rw-r--r-- 1 root root 317320273 9月 28 09…

Android悬浮窗框架

官网 项目地址&#xff1a;Github博客地址&#xff1a;悬浮窗需求终结者 本框架意在解决一些悬浮窗的需求&#xff0c;如果是普通的 Toast 封装推荐使用Toaster 集成步骤 如果你的项目 Gradle 配置是在 7.0 以下&#xff0c;需要在 build.gradle 文件中加入 allprojects {…

2022 年安徽省职业院校技能大赛高职组“软件测试”赛项竞赛任务书

2022 年安徽省职业院校技能大赛高职组 “软件测试”赛项竞赛任务书 有问题可私信我 2022 年 10 月 一、竞赛时间、内容及成绩组成 &#xff08;一&#xff09;竞赛时间 本次竞赛时间共为 5 小时&#xff0c;参赛选手自行安排任务进度&#xff0c;休息、饮水、如厕等不设专门用时…

281_JSON_两段例子的比较,哪一段更简洁、易懂、没有那么多嵌套

《第一份:》//组装Notificationif (bSendAINotification){BOOST_AUTO(iter_flashnotification, documentAll.FindMember("Notification"));if (iter_flashnotification != documentAll.

ARM---实现1-100求和任务

.text .globl _start_start:mov r0, #0x1mov r1, #0x1 给r1加一固定1不变mov r2, #0x64 100判断bl sumcmp r1, r2 sum:addcc r1, r1,#0x1 r1自增addcc r0, r0, r1 r0求和movcc pc,lrstop:b stop.end

day49数据库 索引 事务

一、索引 什么是索引&#xff1a;索引是数据库库中用来提高查询效率的技术&#xff0c;类似于目录 为什么要使用索引&#xff1a;如果不使用索引&#xff0c;数据会零散的保存在磁盘块中&#xff0c;查询数据需要遍历每一个磁盘块&#xff0c;直到找到数据为止&#xff0c;效率…