WEB前端复习——CSS

news2024/11/16 23:52:39

CSS:层叠样式表 将显示样式与内容分开

基本语法:

选择器{

规则;

}

①标签选择器:以HTML标签名为选择

<style>
    p{
        color: red;
    }
</style>
<body>
   <p>你好</p>
</body>

②id选择器:一次性的 以#号定义

<style>
    #p1{
        color: red;
    }
</style>
<body>
    <p>2</p>
   <p id="p1">你好</p>
</body>

③类选择器(单类、多类)用"."标识

<style>
    .p3{
        color: red;
    }
</style>
<body>
    <p>2</p>
   <p class="p3">你好</p>
</body>

(或p.p3{})

④属性选择器 a[href]{} :a标签含href才变色 a[href="URL"] 指定url的a标签才变色

派生选择器:li strong{} li元素中的strong元素样式变色


常用字体属性:

font-size:20px

font-style:italic

font-weight:bold

font-family:宋体

文本属性

text-align

列表属性

list-style-type

背景

color

background-color

background-image


HTML引入CSS

1  在<style>标签内定义

2 <div style="background-color:red"><div>

<head>中引入外部css文件

<head>

    <title>Document</title>

    <link type="text/css" rel="name" href="URL.css">

</head>


 盒子模型: margin border padding content  (top left right bottom)

浮动: float left right 

clean:both

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

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

相关文章

在做题中学习(57):寻找数组的中心下标

724. 寻找数组的中心下标 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a;前缀和后缀和 思路&#xff1a;要看一个数是不是中心下标&#xff0c;就看他前面数的和 与 后面数的和 相不相等。 1.i前面数的和&#xff0c;是[0,i-1] 的前缀和&#xff0c;i后面数的和&am…

音视频入门基础:像素格式专题(2)——不通过第三方库将RGB24格式视频转换为BMP格式图片

音视频入门基础&#xff1a;像素格式专题系列文章&#xff1a; 音视频入门基础&#xff1a;像素格式专题&#xff08;1&#xff09;——RGB简介 音视频入门基础&#xff1a;像素格式专题&#xff08;2&#xff09;——不通过第三方库将RGB24格式视频转换为BMP格式图片 一、引…

STM32-07-STM32_外部中断

文章目录 STM32 中断系统1. 中断2. NVIC3. EXTI4. AFIO5. 中断配置步骤6. 外部中断代码 STM32 中断系统 1. 中断 目的&#xff1a;中断系统是为使CPU具有对外界紧急事件的实时处理能力而设置的。中断过程&#xff1a;当CPU正在处理某事件的时候外界发生了紧急事件请求 &#…

ESP-01S刷固件ESP8266_NonOS_AT_Bin_V1.7.5_1 笔记240510

ESP-01S刷固件ESP8266_NonOS_AT_Bin_V1.7.5_1 笔记240510 固件下载地址 ESP-AT固件页面: https://www.espressif.com.cn/zh-hans/products/sdks/esp-at/resource 直接下载ESP8266 NonOS AT Bin V1.7.5.zip: https://www.espressif.com.cn/sites/default/files/ap/ESP8266_No…

32.768kHz晶振的时间精度问题及其解决方法

32.768kHz晶振因其稳定性高、功耗低&#xff0c;被广泛应用于实时时钟(RTC)、计时电路及低功耗电子产品中。然而&#xff0c;在某些情况下&#xff0c;这些晶振可能出现时间偏差&#xff0c;影响设备正常工作。以下是可能导致32.768kHz晶振时间误差的原因及相应的解决策略。 温…

Snort规则编写

1&#xff09;TCP NULL端口扫描的特征&#xff1a; 扫描者发送一个TCP SYN包到目标主机的某个端口&#xff0c;但不设置任何TCP标志位&#xff08;即flag为NULL&#xff09;。 如果端口关闭&#xff0c;目标主机会回应一个RST&#xff08;复位&#xff09;和ACK&#xff08;确认…

数据结构之图——探索图论的奥秘

前言 在这篇文章中&#xff0c;我们一起来看看我们生活中都会用到&#xff0c;但却不那么熟悉的数据结构——图&#xff08;英语&#xff1a;graph&#xff09;。我们看下百科定义&#xff1a; 在计算机科学中&#xff0c;图&#xff08;英语&#xff1a;graph&#xff09;是一…

py黑帽子学习笔记_网络编程工具

tcp客户端 socket.AF_INET表示使用标准IPV4地址和主机名 SOCK_STREAM表示这是一个TCP客户端 udp客户端 udp无需连接&#xff0c;因此不需要client.connect这种代码 socket.SOCK_DGRAM是udp的 tcp服务端 server.listen(5)表示设置最大连接数为5 发现kill server后端口仍占用…

大模型微调之 在亚马逊AWS上实战LlaMA案例(九)

大模型微调之 在亚马逊AWS上实战LlaMA案例&#xff08;九&#xff09; 代码阅读 src/llama_recipes/inference/prompt_format_utils.py 这段代码是一个Python模块&#xff0c;它定义了几个类和模板&#xff0c;用于生成安全评估的提示文本。以下是对每一行代码的注释和提示词…

Datax数据采集

一、Datax介绍 官网&#xff1a; DataX/introduction.md at master alibaba/DataX GitHub DataX 是阿里云 DataWorks数据集成 的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。 DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、…

MySQL innodb_buffer_pool_size 相关常用语句

对于MySQL速度慢的问题&#xff0c;除了优化 SQL 以外&#xff0c;应该必须优先想到的即使 MySQL 数据库的 innodb_buffer_pool_size 配置问题。 一般来说&#xff0c;innodb_buffer_pool_size 的默认大小都是很小的&#xff0c;尤其是 win 下其默认大小更是只有离谱的 8M。Li…

2024 年最新本地、云服务器安装部署 miniconda 环境详细教程(更新中)

Anaconda 概述 Anaconda 是专门为了方便使用 Python 进行数据科学研究而建立的一组软件包&#xff0c;涵盖了数据科学领域常见的 Python 库&#xff0c;并且自带了专门用来解决软件环境依赖问题的 conda 包管理系统。主要是提供了包管理与环境管理的功能&#xff0c;可以很方便…

土壤墒情自动监测站—墒情异常数据报警提示

TH-TS600土壤墒情自动监测站通常配备有预警提示功能&#xff0c;用于在墒情出现异常情况时及时向用户发出警告。这一功能对于农业生产至关重要&#xff0c;因为它可以帮助农民或农田管理者及时发现土壤墒情的变化&#xff0c;并采取相应的措施来确保作物健康生长。 土壤墒情自动…

Excel实用技巧持续学习

1、Excel高效设置图标格式&#xff1a; 2、饼图可以统一设置数据标签在图外面&#xff01;&#xff01; 环形图不可以&#xff0c;但是可以中间手动加上白色圆形&#xff0c;将饼图变为圆环。 可以设置标签的文本显示&#xff1a; 3、饼图和环形图最好进行排序&#xff01;显得…

睿尔曼机械臂ROS控制

下载git工程 git clone https://github.com/RealManRobot/rm_robot.git安装配置 catkin build rm_msgs source devel/setup.bash catkin build source setup.bash这里注意&#xff0c;如果采用setup.sh多半不会成功&#xff0c;必须要source setup.bash文件&#xff0c;ros才…

云渲染动画300帧需要多久呢?瑞云渲染为你揭秘

在动画制作过程中&#xff0c;渲染的速度非常关键。对于一个项目需要渲染的300帧来说&#xff0c;由于硬件的限制&#xff0c;许多公司的设备可能无法快速完成这项任务。此时&#xff0c;借助云渲染服务的强大计算能力&#xff0c;可以显著减少完成时间&#xff0c;从而提速整个…

使用Python和akshare完成个股信息统计和实时记录

标题:使用Python和akshare完成个股信息统计和实时记录 在金融投资领域,实时获取和记录个股信息对于投资者至关重要。Python 作为一种强大的编程语言,在金融数据分析和处理方面有着广泛的应用。akshare 是一个专门用于获取金融数据的 Python 库,提供了丰富的金融数据接口,可…

抽空学学go

2024年5月9日11:14:24 学习go 看课8小时转职Golang工程师(如果你想低成本学习Go语言)_哔哩哔哩_bilibili 文档[8小时转职Golang工程师 (yuque.com)]( 1.安装go 2024年5月9日11:27:16 2.安装 vscode go配置环境 vs code配置go开发环境 (zhihu.com) vscode里面配置代理&…

Rust使用HashSet对Vec类型的元素进行去重

在Rust语言中&#xff0c;对Vec类型的元素进行去重&#xff0c;一种常见的方法是使用一个HashSet来帮助我们快速检查元素是否已经存在。以下是使用HashSet对Vec进行去重的示例代码&#xff1a; use std::collections::HashSet;fn main() {let vec_numbers vec![1, 2, 2, 3, 4…

大数据比赛-环境搭建(一)

1、安装VMware Workstation 链接&#xff1a;https://pan.baidu.com/s/1IvSFzpnQFl3svWyCGRtEmg 提取码&#xff1a;ukpo 内有安装包及破解方式&#xff0c;安装教程。 2、下载Ubuntu系统 阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 (aliyun.com) 点击下载&#xff…