当前位置: 首页 > news >正文

CSS语法、选择器、属性

1.css语法

    * 格式:选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意:* 每一对属性需要使用;隔开,最后一对属性可以不加

 2.选择器:筛选具有相似特征的元素

* 分类:1. 基础选择器1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法:#id属性值{}2. 元素选择器:选择具有相同标签名称的元素* 语法: 标签名称{}* 注意:id选择器优先级高于元素选择器3. 类选择器:选择具有相同的class属性值的元素。* 语法:.class属性值{}* 注意:类选择器选择器优先级高于元素选择器2. 扩展选择器:1. 选择所有元素:* 语法: *{}2. 并集选择器:* 选择器1,选择器2{}3. 子选择器:筛选选择器1元素下的选择器2元素* 语法:  选择器1 选择器2{}4. 父选择器:筛选选择器2的父元素选择器1* 语法:  选择器1 > 选择器2{}5. 属性选择器:选择元素名称,属性名=属性值的元素* 语法:  元素名称[属性名="属性值"]{}6. 伪类选择器:选择一些元素具有的状态* 语法: 元素:状态{}* 如: <a>* 状态:* link:初始化的状态* visited:被访问过的状态* active:正在访问状态* hover:鼠标悬浮状态

 3.属性

    1. 字体、文本* font-size:字体大小* color:文本颜色* text-align:对其方式* line-height:行高 2. 背景* background:3. 边框* border:设置边框,符合属性4. 尺寸* width:宽度* height:高度5. 盒子模型:控制布局* margin:外边距* padding:内边距* 默认情况下内边距会影响整个盒子的大小* box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小* float:浮动* left* right

 示例:

1.基础选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础选择器</title><style>.cls1{color: blue;}div{color:green;}#div1{color: red;}</style>
</head>
<body>
<!--
1. 基础选择器1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法:#id属性值{}2. 元素选择器:选择具有相同标签名称的元素* 语法: 标签名称{}* 注意:id选择器优先级高于元素选择器3. 类选择器:选择具有相同的class属性值的元素。* 语法:.class属性值{}* 注意:类选择器选择器优先级高于元素选择器
--><div id="div1">传智播客</div><div class="cls1">黑马程序员</div><p class="cls1">传智学院</p></body>
</html>

2.扩展选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扩展选择器</title><style>div p{color:red;}div > p {border: 1px solid;}input[type='text']{border: 5px solid;}a:link{color: pink;}a:hover{color: green;}a:active{color: yellow;}a:visited{color: red;}</style>
</head>
<body><div><p>传智播客</p></div><p>黑马程序员</p><div>aaa</div><input type="text" ><input type="password" ><br>    <br>    <br><a href="#">黑马程序员</a></body>
</html>

3.CSS属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css属性</title><style>p{color: #FF0000;font-size: 30px;text-align: center;line-height: 200px;/*border 边框*/border: 1px solid red;}div{border: 1px solid red;/*尺寸*/height: 200px;width: 200px;/*背景*/background: url("img/logo.jpg") no-repeat center;}</style>
</head>
<body><p>传智播客</p><div>黑马程序员</div>
</body>
</html>

4.CSS属性_盒子模型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css属性</title><style>div{border: 1px solid red;width: 100px;}.div1{width: 100px;height: 100px;/*外边距*//* margin: 50px; */}.div2{width: 200px;height: 200px;padding: 50px;/*设置盒子的属性,让width和height就是最终盒子的大小*/box-sizing: border-box;}.div3{float: left;}.div4{float: left;}.div5{float: right;}</style>
</head>
<body><div  class="div2"><div class="div1"></div></div><div class="div3">aaaa</div><div class="div4">bbbbb</div><div class="div5">cccc</div>
</body>
</html>

相关文章:

CSS语法、选择器、属性

1.css语法 * 格式&#xff1a;选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意&#xff1a;* 每一对属性需要使用&#xff1b;隔开&#xff0c;最后一对属性可以不加 2.选择器&#xff1a;筛选具有相似特征的元素 * 分类&#xff1a;1. 基…...

深度学习读取txt训练数据绘制参数曲线图的方法

有一些深度学习模型是并不像yolo系列那样最终输出相应的参数图&#xff0c;有很多训练形成了一个训练log文件&#xff0c;于是需要读取log文件中的内容并绘制成曲线图。 如下实例&#xff0c;有一个log文件的部分截图&#xff0c;需要将其读取出来并绘制曲线图 废话不多说&…...

VB.NET—DataGridView控件教程详解

目录 前言: 过程: 第一步: 第二步: 第三步: 第四步: 第五步&#xff1a; 番外篇: 总结: 前言: DataGridView是.NET FormK中的一个Windows窗体控件&#xff0c;它提供了一个可视化的表格控件&#xff0c;允许用户以表格形式显示和编辑数据。它通常用于显示和编辑数据库…...

MCU测试科普|如何进行MCU芯片测试,具体流程是什么?

MCU芯片测试系统是一种专门用于检测MCU芯片性能和质量的综合性设备。它通常由硬件和软件两部分组成&#xff0c;硬件包括测试仪器、适配器、测试夹具等&#xff0c;用于连接被测MCU芯片和测试机&#xff0c;实现高效高精度的测试。软件部分通常包括测试程序、测试管理软件等&am…...

单向循环代码实现cpp

// 单向循环链表 class CircleLink { public:CircleLink(){head_ new Node();tail_ head_;head_->next_ head_;}~CircleLink(){Node* p head_->next_;while (p ! head_){head_->next_ p->next_;delete p;p head_->next_;}delete head_;}public:// 尾插法 …...

【原创】java+jsp+servlet简单图书管理系统设计与实现

摘要&#xff1a; 图书管理系统是一个专门针对图书馆管理而设计的系统&#xff0c;它可以帮助图书管理员有效的对图书进行管理&#xff0c;在图书管理系统的设计中&#xff0c;首先要考虑的是系统的需求分析&#xff0c;该系统的设计与实现涉及多个方面&#xff0c;包括数据库…...

JVM之jinfo虚拟机配置信息工具

jinfo虚拟机配置信息工具 1、jinfo jinfo&#xff08;Configuration Info for Java&#xff09;的作用是实时地查看和调整虚拟机的各项参数。 使用jps -v 可以查看虚拟机启动时显示指定的参数列表&#xff0c;但是如果想知道未被显示指定的参数的系统默认值&#xff0c;除 …...

软件测试|PO设计模式在 UI 自动化中的实践

PO的思想最早是2013年由IT大佬Martin Flower提出的&#xff1a;https://martinfowler.com/bliki/PageObject.html 没错&#xff0c;就是他 — 没错&#xff0c;就是他 — 在他的文章里有这样一张经典样图,图片中展示了测试代码中直接操作HTML元素和使用PO模式将page对象封装成…...

如何上传自己的Jar到Maven中央仓库

在项目开发过程中&#xff0c;我们常常会使用 Maven 从仓库拉取开源的第三方 Jar 包。本文将带领大家将自己写好的代码或开源项目发布到 Maven中央仓库中&#xff0c;让其他人可以直接依赖你的 Jar 包&#xff0c;而不需要先下载你的代码后 install 到本地。 注册帐号 点击以…...

智能井盖传感器功能,万宾科技产品介绍

在国家治理方面&#xff0c;对社会的治理是一个重要的领域&#xff0c;一定要在推进社会治理现代化过程中提高市政府的管理和工作能力&#xff0c;推动社会拥有稳定有序的发展。在管理过程中对全市井盖进行统一化管理&#xff0c;可能是市政府比较头疼的难题&#xff0c;如果想…...

洛谷P4185 离线+并查集

好题&#xff0c;发现没有强制在线&#xff0c;可以离线操作 排序之后带集合点数的并查集就好了 #include<bits/stdc.h> using namespace std; const int N 1e510; int n,m; int p[N],sz[N];int find(int x){if(x!p[x])p[x] find(p[x]);return p[x]; } struct Node{in…...

遇到java.security.AccessControlException:access denied怎么办?

今天工作中遇到了如下报错&#xff0c;记录一下解决方案。 目录 问题 分析 结论 问题 这个问题出现在openjdk8启动网页端Java应用。 Java Exception:java.security.AccessControlException:access denied("java.net.SocketPermission""22.188.130.11:9000…...

c++对接CAT1400

最近工作中遇到需要对接1400协议,网上搜索不到c/c++的实现,所以记录一下自己的实现。 第一步注册: 1400是在http摘要认证的基础上做的,所以要去了解http摘要认证的流程 说明: 1.视图库通过用户分配,手动分配username,password给三方对接程序 2.三方对接程序第一次请求由…...

Linux基础【Linux知识贩卖机】

偶尔的停顿和修整&#xff0c;对于人生是非常必要的。 --随记 文章目录 Linux目录目录结构磁盘分区相关命令 相对路径和绝对路径 文件权限用户分类umask创建文件权限计算方法粘滞位 总结 Linux目录 目录结构 Linux 操作系统采用了一种层次化的目录结构&#xff0c;常被称为标…...

CSS 边框、轮廓线

一、CSS边框&#xff1a; CSS边框属性允许指定一个元素边框的样式和颜色。 1&#xff09;、边框样式&#xff1a;border-style属性用来定义边框的样式&#xff0c;border-style值&#xff1a; 2&#xff09;、边框宽度&#xff1a;border-width属性用于指定边框宽度。指定变宽…...

Transformer架构 完整的处理流程

Transformer 是由多层的 Encoder 和 Decoder 构成的。每一层的 Encoder 和 Decoder 都包含了多头自注意力机制&#xff08;Multi-head Self Attention&#xff09;、前馈神经网络&#xff08;Feed Forward&#xff09;和添加及归一化&#xff08;Add & Norm&#xff09;。特…...

git and svn 行尾风格配置强制为lf

git CLI配置&#xff1a; // 提交时转换为LF&#xff0c;检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF&#xff0c;检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…...

达梦数据库答案

1、 创建数据库实例&#xff0c;到/dm8/data下&#xff0c;数据库名&#xff1a;DEMO&#xff0c;实例名DEMOSERVER&#xff08;10分&#xff09; [dmdbadmServer ~]$ cd /dm8/tool [dmdbadmServer tool]$ ./dbca.sh1、 簇大小32&#xff0c;页大小16&#xff0c;登录密码&…...

基于SSM的楼房销售系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

Blender做一个小凳子学习笔记

文章目录 创建椅座椅子腿靠背渲染 本文是这个B站视频的学习笔记&#xff1a;【Blender】爆肝两个月&#xff01;拜托三连了&#xff01;这绝对是全B站最用心的&#xff08;没有之一&#xff09;Blender 3D建模零基础入门 创建椅座 首先&#xff0c;需要了解其左上角和右上角的…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...