CSS基础选择器与div布局

基础选择器一

全局选择器

可以与任何元素匹配,优先级最低,不推荐使用

*{margin: 0;padding: 0;}

元素选择器

HTML文档中的元素,p、b、div、a、img、body等。

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”

p{font-size:14px;
}

再比如说,我想让“学完前端,继续学Java”这句话中的“前端”两个变为红色字体,那么我可以用<span>标签把“前端”这两个字围起来,然后给<span>标签加一个标签选择

<p>学完了<span>前端</span>,继续学Java</p>
span{color: red;
}

温馨提示

  1. 所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等
  2. 无论这个标签藏的多深,一定能够被选择上
  3. 选择的所有,而不是一个

类选择器

规定用圆点 . 来定义,针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{width:800px;
}

class属性的特点

  1. 类选择器可以被多种标签使用
  2. 类名不能以数字开头
  3. 同一个标签可以使用多个类选择器。用空格隔开
<h3 class="classone  classtwo">我是一个h3啊</h3>

基础选择器二

ID选择器

针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle{border:3px dashed green;
}

特别强调

  1. ID是唯一的
  2. ID不能以数字开头

合并选择器

语法:选择器1,选择器2,...{ }

作用:提取共同的样式,减少重复代码

.header, .footer{height:300px;
}

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

DIV+CSS布局

优点

  1. 符合W3C标准
  2. 使页面载入得更快
  3. 保持视觉的一致性
  4. 修改设计时更有效率
  5. 搜索引擎友好

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
<style>
.header {height: 100px;background-color: #fcc;
}.content {height: 400px;background-color: #ff9;
}.footer {height: 100px;background-color: #ccf;
}
</style>

<div class="container"><div class="header"></div><div class="nav"></div><div class="content"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="footer"></div>
</div>
<style>
.header {width: 100%;height: 100px;background-color: red;
}
.nav {width: 100%;height: 50px;background-color: pink;
}
.content {width:100%;height: 300px;background-color: yellow;
}
.footer {width: 100%;height: 150px;background-color: deepskyblue;
}
.left {width: 33.33%;height: 300px;background-color: palegoldenrod;float: left;
}
.center {width: 33.33%;height: 300px;background-color: palegreen;float: left;
}
.right {width: 33.33%;height: 300px;background-color: palevioletred;float: left;
}
</style>

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

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

相关文章

npm上传自己封装的插件(vue+vite)

一、npm账号及发包删包等命令 若没有账号&#xff0c;可在npm官网&#xff1a;https://www.npmjs.com/login 进行注册。 在当前项目根目录下打开终端命令窗口&#xff0c;常见命令如下&#xff1a; 1、登录命令&#xff1a;npm login&#xff08;不用每次都重新登录&#xff0…

ODC 如何精确呈现SQL耗时 | OceanBase 开发者工具解析

前言 在程序员或DBA的日常工作中&#xff0c;编写并执行SQL语句如同日常饮食中的一餐一饭&#xff0c;再寻常不过。然而&#xff0c;在使用命令行或黑屏客户端处理SQL时&#xff0c;常会遇到编写难、错误排查缓慢以及查询结果可读性不佳等难题&#xff0c;因此&#xff0c;图形…

Rust学习(六):函数式编程

Rust学习&#xff08;六&#xff09;&#xff1a;函数式编程 我们在前一篇博客中已经介绍了如何通过trait和impl实现Rust的面向对象编程&#xff0c;但是Rust本身实际上并不提倡通过类来解决问题。Rust推崇的是函数式编程&#xff0c;强调将函数作为参数值或者其他函数的返回值…

华为USG5500防火墙配置NAT

实验要求&#xff1a; 1.按照拓扑图部署网络环境&#xff0c;使用USG5500防火墙&#xff0c;将防火墙接口加入相应的区域&#xff0c;添加区域访问规则使内网trust区域可以访问DMZ区域的web服务器和untrust区域的web服务器。 2.在防火墙上配置easy-ip&#xff0c;使trust区域…

三角波生成函数

% 设置时间范围和采样频率 t 0:0.01:2; % 时间从0到2秒&#xff0c;步长为0.01秒% 定义频率 f 和角频率 theta f 5; % 频率为5Hz theta 2 * pi * f * t;% 初始化输出向量 y zeros(size(t));% 根据给定的公式计算 y for k 1:fy y (-1)^(k-1)*(2 /(k * pi)) * sin(k * the…

kafka安装教程

在CentOS 6.5上安装Kafka需要遵循一定的步骤&#xff0c;并确保系统满足Kafka的运行要求。以下是一个详细的安装指南&#xff1a; 一、安装前准备 系统要求&#xff1a; CentOS 6.5操作系统JDK 1.8或更高版本&#xff08;Kafka依赖于Java环境&#xff09;Zookeeper&#xff08…

运维面试题.云计算面试题集锦第一套

运维+网络安全学科基础升就业 测试题(总分100分) 一,单词翻译(10分,直接写在答题卡上) 二,单选题(每题2分,共30题): 1.如下哪个属于管道符?( ) A、|| B、<< C、// D、| 2.有一备份程序mybackup,需要在周一至周五下午1点和晚上8点各运行一次,下面哪条cront…

如何修改 a 链接的样式

在CSS中&#xff0c;你可以使用选择器来针对HTML中的特定元素&#xff08;例如<a>标签&#xff0c;也就是链接&#xff09;进行修改样式。以下是一些常见的修改<a>链接样式的方法&#xff1a; 移除下划线&#xff1a; a { text-decoration: none; } 修改链接的…

Lc70--319.两个数组的交集(二分查找)---Java版

1.题目描述 2.思路 用集合求交集&#xff0c;因为集合里面的元素要满足不重复、无序、唯一。使得集合在去重、查找和集合操作&#xff08;如交集、并集、差集等&#xff09;中非常高效和方便。 3.代码实现 class Solution {public int[] intersection(int[] nums1, int[] nu…

操作系统实验 C++实现生产者-消费者问题

实验目的 1、进一步加深理解进程同步的概念 2、加深对进程通信的理解 3、了解Linux下共享内存的使用方法 实验内容 1、按照下面要求&#xff0c;写两个c程序&#xff0c;分别是生产者producer.c以及customer.c 2、一组生产者和一组消费者进程共享一块环形缓冲区 使用共…

无人机在森林中的应用!

一、森林资源调查 无人机可以利用遥感技术快速获取所需区域高精度的空间遥感信息&#xff0c;对森林图斑进行精确区划。相较于传统手段&#xff0c;无人机调查具有低成本、高效率、高时效的特点&#xff0c;尤其在地理环境条件不好的区域&#xff0c;调查人员无法或难以到达的…

算法学习笔记(二):二分算法

有半闭半开区间(left < right)、开区间(left 1 < right)、闭区间(left < right)&#xff0c;目前就只学习闭区间算法吧&#xff0c;掌握其中之一就行了。 1.在排序数组中查找元素的第一个和最后一个位置 给你一个按照 非递减顺序 排列的整数数组 nums&#xff0c;和…

Android学生信息管理APP的设计与开发

1. 项目布局设计 页面1&#xff1a;学生信息添加页面 采用线性布局&#xff0c;页面中控件包含TextView、editView、Button等。 布局核心代码如下&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http…

AI(12)-飘带

1.【钢笔工具】画第一条曲线 2.【钢笔工具】画第二条曲线 3-全选两条曲线-【对象】-【混合】-【混合选项】-【指定的步数】-【15】 3-1-【对象】-【混合】-【建立】 4-双击打开【渐变工具】 4-1-【类型&#xff1a;线性】 4-2-点击切换【描边】在上方 4-3-关闭【填色】 4-4-点…

智能指针原理、使用和实现——C++11新特性(三)

目录 一、智能指针的理解 二、智能指针的类型 三、shared_ptr的原理 1.引用计数 2.循环引用问题 3.weak_ptr处理逻辑 四、shared_ptr的实现 五、定制删除器 六、源码 一、智能指针的理解 问题&#xff1a;什么是智能指针&#xff1f;为什么要有智能指针&#xff1f;智…

NIST 发布后量子密码学转型战略草案

美国国家标准与技术研究所 (NIST) 发布了其初步战略草案&#xff0c;即内部报告 (IR) 8547&#xff0c;标题为“向后量子密码标准过渡”。 该草案概述了 NIST 从当前易受量子计算攻击的加密算法迁移到抗量子替代算法的战略。该草案于 2024 年 11 月 12 日发布&#xff0c;开放…

使用uniapp开发微信小程序使用uni_modules导致主包文件过大,无法发布的解决方法

在使用uniapp开发微信小程序时候&#xff0c;过多的引入uni_modules的组件库&#xff0c;会导致主包文件过大&#xff0c;导致无法上传微信小程序&#xff0c;主包要求大小不超过1.5MB.分包大小每个不能超过2M。 解决方法&#xff1a;分包。 1.对每个除了主页面navbar的页面进…

WPF窗体基本知识-笔记-命名空间

窗体程序关闭方式 命名空间:可以理解命名空间的作用为引用下面的控件对象 给控件命名:一般都用x:Name,也可以用Name但是有的控件不支持 布局控件(容器)的类型 布局控件继承于Panel的控件,其中下面的border不是布局控件,panel是抽象类 在重叠的情况下,Zindex值越大的就在上面 Z…

【android USB 串口通信助手】stm32 源码demo 单片机与手机通信 Android studio 20241118

android 【OTG线】 接 下位机STM32【USB】 通过百度网盘分享的文件&#xff1a;USBToSerialPort.apk 链接&#xff1a;https://pan.baidu.com/s/122McdmBDUxEtYiEKFunFUg?pwd8888 提取码&#xff1a;8888 android 【OTG线】 接 【USB转TTL】 接 【串口(下位机 SMT32等)】 需…

SpringBoot源码解析(四):解析应用参数args

SpringBoot源码系列文章 SpringBoot源码解析(一)&#xff1a;SpringApplication构造方法 SpringBoot源码解析(二)&#xff1a;引导上下文DefaultBootstrapContext SpringBoot源码解析(三)&#xff1a;启动开始阶段 SpringBoot源码解析(四)&#xff1a;解析应用参数args 目录…