CSS + HTML

目录

一.CSS(层叠样式表)

二. CSS 引入方式

三.选择器

3.1 标签选择器

3.2 类选择器

3.3 id选择器

3.4 通配符选择器

3.5 画盒子

四.文字控制属性

4.1字体大小

4.2字体粗细

4.3 字体倾斜

4.4行高

4.5行高--垂直居中

4.6 字体族

4.7 字体复合属性

4.8 文本缩进

4.9文本对齐

4.10 文本修饰线

4.11 文字颜色

五.谷歌浏览器调试工具

六.综合案例--新闻详细

七.综合案例--CSS简介


一.CSS(层叠样式表)

二. CSS 引入方式

三.选择器

3.1 标签选择器

特点:选中同名标签设置相同的样式, 无法差异化同名标签的样式

3.2 类选择器

差异化

3.3 id选择器

3.4 通配符选择器

通配符选择器一般用于在初期清除默认样式(比如清楚间距,用通配符选择器使间距为0)

3.5 画盒子

四.文字控制属性

4.1字体大小

可以通过谷歌浏览器的调试窗口来查看详细信息(右键,检查)

4.2字体粗细

4.3 字体倾斜

4.4行高

4.5行高--垂直居中

注意事项:只能单行文字垂直居中

4.6 字体族

4.7 字体复合属性

4.8 文本缩进

4.9文本对齐

图片对齐:

4.10 文本修饰线

4.11 文字颜色

十六进制表示法:#RRGGBB相同的各为一组,同一组数相同,可以只写一个,比如#112233 可写为 #123

五.谷歌浏览器调试工具

六.综合案例--新闻详细

​​

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻详情</title><style>h1 {text-align: center;font-weight: 400;font-size: 30px;color: #333;}.p-time {font-size: 14px;color: #999;text-align: left;}.p-1 {font-size: 18px;color: #333;text-indent: 2em;}.p-2 {font-size: 18px;color: #333;text-indent: 2em;}div {text-align: center;}.p-3 {font-size: 18px;color: #333;text-indent: 2em;}.p-4 {font-size: 18px;color: #333;text-indent: 2em;}</style>
</head>
<body><h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1><p class="p-time">来源:央视网 | 2222年12月12日 12:12:12</p><p class="p-1"><strong>央视网消息:</strong>眼下,湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成,玉米收割七成。湖北省通过大力推广新品种水稻,建高标准农田等一系列措施,为秋粮稳产提供有力支撑</p><p class="p-2">中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市,370万亩中稻已经收割四成以上。</p><div><img src="./image.png" alt="收粮"></div><p class="p-3">王化林说的新品种,是湖北省研发的杂交水稻“华夏香丝”,不仅产量高,还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内,像“华夏香丝”这样抗旱节水的品种还有20多个,这些水稻新品将在荆门全面推广,确保来年增产增收。</p><p class="p-4">此外,湖北还大力推进高标准农田建设。截至今年6月,已建成3980万亩高标准农田。目前,湖北全省仍有1800多万亩中稻正在有序收割中,预计10月中旬收割完毕。</p></body>
</html>

七.综合案例--CSS简介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS简介</title><style>h1 {color: #333;}p {color: #444;font-size: 14px;line-height: 30px;text-indent: 2em;}a {text-decoration: underline;color: #0069c2;}li {color: #444;font-size: 14px;line-height: 30px;}span {text-decoration: underline;color: #0069c2;}</style>
</head>
<body><h1>CSS(层叠样式表)</h1><p><strong>层叠样式表</strong> (Cascading Style Sheets,缩写为 CSS),是一种<a href="#">样式表</a>语言,用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的XML 分支语言)文档的星现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p><p><strong>CSS是开放网络的核心语言之一</strong> ,由 W3C 规范 实现跨浏览器的标准化。CS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上缩辑布局的麻烦,CSS 被分为不同等级:CSS1现已度弃,CSS2.1是推荐标准,CSS3 分成多个小模块目正在标准化中。</p><ul><li>CSS 介绍 如果你是 Web 开发的新手,请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li><li>SS 教程 我们的 CSS 学习区 包含了丰富的教程,它们要养了全部基础知识,能使你在 CSS 之路上从初出茅庐到游刃有余</li><li>CSS 参考 针对资深 Web 开发者的<span>详细参考手册</span> ,描述了 CSS 的各个属性与概念。</li></ul>
</body>
</html>

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

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

相关文章

使用mmdetection来训练自己的数据集(visdrone)(四)结果分析

测试 python tools/test.py <your-config-file> <your-model-weights-file> --out <save-pickle-path>关于test.py 的命令行 parser.add_argument(--out,typestr,helpdump predictions to a pickle file for offline evaluation)计算量、参数量计算脚本 pyth…

考研数学精选题目016

题目 ∫ x 4 x 6 1 d x \int {{{{x^4}} \over {{x^6} 1}}dx} ∫x61x4​dx 来源 魏姐姐的积木法 思考 在做积分题时&#xff0c;若遇到不会积分的&#xff0c;我们可以考虑先积简单&#xff08;形式和原式一样&#xff09;的积分&#xff1a; ∫ x 6 1 x 6 1 d x x C ( 1 …

【自然语言处理】Word2VecTranE的实现

作业一 Word2Vec&TranE的实现 1 任务目标 1.1 案例简介 Word2Vec是词嵌入的经典模型&#xff0c;它通过词之间的上下文信息来建模词的相似度。TransE是知识表示学习领域的经典模型&#xff0c;它借鉴了Word2Vec的思路&#xff0c;用“头实体关系尾实体”这一简单的训练目…

【Linux】dlopen: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29‘ not found

[30116] Error loading Python lib /tmp/_MEIlvdUu6/libpython3.8.so.1.0: dlopen: /lib/x86_64-linux-gnu/libm.so.6: version GLIBC_2.29 not found (required by /tmp/_MEIlvdUu6/libpython3.8.so.1.0)1 cd到指定路径 cd /usr/local 2 下载 wget http://ftp.gnu.org/gnu/gl…

Ant Design助力:实现用户列表的优雅展示与管理

文章目录 概要前端讲解登录组件注册组件用户列表组件 后端讲解连接数据库db.js路由routes.jsexpress应用app.js 启动项目小结 概要 在上一篇博客&#x1f6aa;中&#xff0c;我们已经成功实现了登录注册系统的基本功能。现在&#xff0c;我们将进一步完善系统&#xff0c;实现…

大型语言模型:奇迹背后的未知哲学,人类智慧的边界探索

大型语言模型可以做出令人瞠目结舌的事情。但没有人确切知道原因。 这是一个问题。弄清楚它是我们这个时代最大的科学难题之一&#xff0c;也是控制更强大的未来模型的关键一步。 多长时间才能学会加法&#xff1f; 两年前&#xff0c;旧金山 OpenAI 公司的研究人员尤里布尔…

ABAP Visual Code 新建sap系统连接

本文主要介绍如何新建SAP前端系统链接 前提是你已经都扩展完了 1.点击SAP fiori--》点击新建 2.选择 abap on premise 3.输入如下信息 4.这里介绍下URL 如何获取 SMICM-->点击service 明细里面可以看到你的host name 和 port 当然你也可以随便找一个你的odata 服务看下ur…

C++之const

const是C中的关键字&#xff0c;又叫常量限定符&#xff0c;作用是告知编译器const修饰的变量是不可修改的。 1、const修饰常量 1.1、修饰常量 #include <iostream> using namespace std;int main(int argc, char argv[]) {// 在修饰常量时&#xff0c;int const和con…

C++奇迹之旅:类和对象const成员static关键字友元内部类

文章目录 &#x1f4dd;const成员&#x1f320; const 成员函数是什么&#xff1f;&#x1f320; 取地址及const取地址操作符重载 &#x1f309;static成员&#x1f320;概念&#x1f320;static特性&#x1f309;static小题 &#x1f320;友元&#x1f309; 友元函数&#x1f…

标准版/开源版 移动端新增页面使用文档

在标准版开发的实际使用中&#xff0c;随着用户移动端的产品和信息内容不断增多&#xff0c;新增页面来展示对应的产品详情、模块等内容。针对一些概念或者步骤较多的内容&#xff0c;可以新增子页面构建多级模块结构&#xff0c;帮助用户快速定位。 下面就如何新增页面做一讲…

掩码讲解,以及生成

掩码生成模块的原理主要基于特定的算法和规则&#xff0c;用于生成一个掩码矩阵&#xff0c;该矩阵与输入序列的长度相同&#xff0c;由0和1组成。这个掩码矩阵的作用是控制模型在处理序列数据时忽略无效部分。 在自注意力机制中&#xff0c;掩码被用来屏蔽无效的位置&#xff…

新一代大数据平台,为什么选择中国移动梧桐数据库?

个人介绍&#xff1a;艺名司镜233&#xff0c;是中国移动梧桐数据库研发团队成员&#xff0c;从事相关的技术开发近5年了。最让我觉得自豪的不是在研发这款数据库&#xff0c;而是我们用代码&#xff0c;切实地帮助企业解决数据的困扰&#xff0c;切实地解决社会的问题。 本篇文…

软件工程的介绍

软件工程 这一章的内容其实还是蛮多的,大概一共有10个章节,分别是下面的一些内容,但是呢,这一章的内容其实是比较偏向文科类的,也就是说,记忆的内容其实占有很大的篇幅,在该考试科目当中呢,其实也是主要影响上午题部分的选择题的考察,基本的分值呢,在10分左右,分值占…

windows ubuntu:sed,awk,grep篇:4.执行 sed

目录 23.单行内执行多个 sed 命令 24.sed 脚本文件 25.sed 注释 26.把 sed 当做命令解释器使用 27.直接修改输入文件 23.单行内执行多个 sed 命令 第一章内已经讲过&#xff0c;单行内执行多个 sed 命令有多种方法。 1. 使用多命令选项 –e 多命令选项-e 使用方法如…

Mybatis-Plus自定义dataScpoe拦截器实现数据权限

使用AOP切面&#xff0c;自定义注解&#xff0c;自定义mybatisplus拦截器&#xff0c;使用 JSqlParser 自定拼接where条件。 1、自定义注解DataScope&#xff1b;注解一般用于Service层或者DAO层(Mapper) import java.lang.annotation.*;/*** 数据权限过滤注解**/ Target(Elem…

7-云原生监控体系-PromQL-函数功能和示例

Prometheus支持几个函数来操作数据。 文章目录 1. 函数语法解释2. count(v instant-vector)3. topk(n, v instant-vector)4. bottomk(n, v instant-vector)5. increase(v range-vector)6. rate(v range-vector)7. rate 和 increase8. irate(v range-vector)9. predict_linear(…

Dockerfile: ENTRYPOINT和CMD的区别

CMD&#xff1a;The main purpose of a CMD is to provide defaults for an executing container. CMD的主要用途是为正在执行的容器提供默认值。也就是指定这个容器启动的时候要运行的命令。 ENTRYPOINT&#xff1a;也是指定这个容器启动的时候要运行的命令。 ———————…

docker菜鸟教程

Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用及其依赖打包到一个可移植的容器中&#xff0c;然后发布到任何Linux机器上。以下是Docker的一些基本概念和操作指南&#xff1a; 镜像(Image)&#xff1a;Docker镜像是一个文件系统&#xff0c;它包含了应用程序及…

Golang基础1-基本类型、if、switch、string

基本类型 bool 整数&#xff1a;byte(相当于uint8), rune(相当于int32), int/uint ,int8/uint8 ,int16/uint16 ,int32/uint32 ,int64/uint64 浮点数: float32 ,float64, complex64 ,complex128 array&#xff08;值类型&#xff09;、slice、map、chan&#xff08;引用类型…

【Android】 网络技术

前言 本文用于记录Android网络技术的使用&#xff0c; 包括我们如何发起一条HTTP请求、解析XML、JOSN格式的数据以及最好用的网络库Retrofit。 使用HTTP协议访问网络 关于HTTP协议的工作原理&#xff0c;我们只需要知道客户端向服务器发起一条HTTP请求&#xff0c;服务器接收…