WEB前端复习——CSS

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.hqwc.cn/news/690497.html

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

相关文章

JAVA课程设计

一&#xff1a;Java连接mysql数据库 1.1点击进入mysql jar包下载官网 MySQL :: MySQL Community Downloads 将下载好的压缩包进行解压 解压之后下图就是连接数据库所用到的jar包&#xff1a; 将jar包复制到IDEA所用的项目下&#xff0c;放置jar包的目录为lib&#xff0c;需要…

C语言 | Leetcode C语言题解之第83题删除排序链表中的重复元素

题目&#xff1a; 题解&#xff1a; struct ListNode* deleteDuplicates(struct ListNode* head) {if (!head) {return head;}struct ListNode* cur head;while (cur->next) {if (cur->val cur->next->val) {cur->next cur->next->next;} else {cur …

SC-Lego-LOAM建图与ndt_localization的实车实现

参考&#xff1a;https://blog.csdn.net/weixin_44303829/article/details/121524380 https://github.com/AbangLZU/SC-LeGO-LOAM.git https://github.com/AbangLZU/ndt_localizer.git 将建图和定位分别使用lego-loam和ndt来进行&#xff0c;实车上的效果非常不错&#xff0c;…

Seaborn : 超好用的Python可视化工具

1. 引言 说到数据可视化&#xff0c;Seaborn就像一颗隐藏的宝石&#xff01;在进行探索性数据分析时&#xff0c;我们通常从Matplotlib 开始&#xff0c;而对 Seaborn 的探索相对较少&#xff01;但是&#xff0c;只要你了解 Seaborn 的全部潜力&#xff0c;你就会惊奇地发现&…

壹资源知识付费系统源码-小程序端+pc端

最新整理优化&#xff0c;含微信小程序和pc网页。内置几款主题&#xff0c;并且可以自己更改主题样式&#xff0c;各区块颜色&#xff0c;文字按钮等。 适用于知识付费类资源类行业。如&#xff1a;项目类&#xff0c;小吃技术类&#xff0c;图书类&#xff0c;考研资料类&…

EasyImage 2.0源码:简单易用的开源图床解决方案

功能详解 API支持&#xff1a;提供API接口&#xff0c;便于集成与二次开发。登录上传&#xff1a;确保上传的安全性&#xff0c;仅允许登录后的用户进行文件上传。图片质量控制&#xff1a;用户可根据需求设置图片的质量参数。图片压缩&#xff1a;支持调整图片大小&#xff0…

【Win10设备管理器中无端口选项】

计算机疑难杂症分享002 Win10设备管理器中无端口选项1、问题现象2、问题原因3、问题解决3.1、驱动精灵(亲测的此方法)3.2、添加过时硬件3.3、官方的方法 Win10设备管理器中无端口选项 1、问题现象 当我调试串口通信时&#xff0c;发现打开设备管理器没有端口&#xff0c;打开…

树莓派遇到ping的奇葩问题解决办法

首先&#xff0c;先 ping raspberrypi 一下。获得树莓派的ip 然后开始配置静态ip winR后输入命令ipconfig查询当前网关ip 输入命令sudo nano /etc/dhcpcd.conf 在最末尾输入以下信息 -----------------------------------------------------------------------------------…

现代制造之数控机床篇

现代制造 有现代技术支撑的制造业&#xff0c;即无论是制造还是服务行业&#xff0c;添了现代两个字不过是因为有了现代科学技术的支撑&#xff0c;如发达的通信方式&#xff0c;不断发展的互联网&#xff0c;信息化程度加强了&#xff0c;因此可以为这两个行业增加了不少优势…

LaTeX多行公式中\split出现一长一短多行公式无法居中

最近在整理一篇论文时出现了一长一短多行公式的问题无法居中 类似下图的情况&#xff1a; 这部分的代码如下&#xff1a; \begin{equation} \begin{split} \scalebox{0.75}{$X_{n} C$}\\ \scalebox{0.75}{$X_{m} \biggl\{\begin{array}{ll} \sum\limits_{i1}^{n} [X_{i} …

26、Flink 的状态数据结构升级

状态数据结构升级 a&#xff09;概述 Flink 流应用通常被设计为永远或者长时间运行&#xff0c;与所有长期运行的服务一样&#xff0c;应用程序需要随着业务的迭代而进行调整&#xff0c;应用所处理的数据 schema 也会随着进行变化。 升级状态类型的数据 schema &#xff0c…

ppt---C语言

注意某些符号和我们手写的不一样&#xff08;&#xff09;乘法&#xff0c;除法等