css学习4(背景)

1、CSS中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:"rgb(255,0,0)"
  • 颜色名称 - 如:"red"

2、background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

3、为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

4、当使用简写属性时,属性值的顺序为::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

5、文本的属性主要有文本的颜色、文本的对齐方式。

6、 text-decoration属性主要是用来删除链接的下划线。

7、CSS字体属性定义字体,加粗,大小,文字样式。

8、font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

9、为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

8、在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景相关</title><style>body{/*background-image:url('A.jpg');background-repeat: no-repeat;background-position: right top;*/background:red url('A.jpg') no-repeat right top;background-attachment: fixed;font-size: 100%;}p{background-color: red;color: yellow;}h1{color: rgb(0, 255, 0);text-align: center;}p.date{text-align: right;}p.main{text-align: justify; font-family: "幼圆";font-style: italic;font-size: 1em;}a {text-decoration: none;}p.capitalize{text-transform: capitalize;text-indent:100px;}</style></head><body><h1>CSS学习</h1><p>PHP是世界上最好的编程语言</p><h1>CSS text-align 实例</h1><p class="date">2015年3月14日</p><p class="main">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”</p><p>链接到:<a href="https://www.baidu.com/">谷歌</a></p><p class="capitalize">phP是世界上最好的编程语言</p></body>
</html>

运行结果:

 

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

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

相关文章

JVM的元空间了解吗?

笔者近期在面试的时候被问到了这个问题&#xff0c;元空间也是Java8当时的一大重大革新&#xff0c;之前暑期实习求职的时候有专门看过&#xff0c;但是近期秋招的时候JVM相关的内容确实有点生疏了&#xff0c;故在此进行回顾。 结构 首先&#xff0c;我们应了解JVM的堆结构&a…

Dockerfile制作Web应用系统nginx镜像

目录 1.所需实现的具体内容 2.编写Dockerfile Dockerfile文件内容&#xff1a; 默认网页内容&#xff1a; 3.构建镜像 4.现在我们运行一个容器&#xff0c;查看我们的网页是否可访问 5.现在再将我们的镜像打包并上传到镜像仓库 1.所需实现的具体内容 基于centos基础镜像…

sql in mac学习记录

鉴于有一段时间没有访问mysql了&#xff0c;最近打算在mac 系统上下载mysql 练习一下sql的使用&#xff0c;于是 First, the mysql download https://dev.mysql.com/downloads/mysql/ Second, Mysql install steps Install the software by normally install one software …

时序预测 | MATLAB实现ELM极限学习机时间序列预测(多指标、相关图)

时序预测 | MATLAB实现ELM极限学习机时间序列预测(多指标、相关图) 目录 时序预测 | MATLAB实现ELM极限学习机时间序列预测(多指标、相关图)效果一览基本介绍程序设计学习总结参考资料效果一览 基本介绍 时序预测 | MATLAB实现ELM极

前端-初始化Vue3+TypeScript

如果使用如下命令初始化项目&#xff0c;项目很干净&#xff0c;很适合了解项目的各个结构。 npm init vitelatest如果使用如下命令初始化项目&#xff0c;是可以选择你需要的组件 npm init vuelatest

vue根据template结构自动生成css/scss/less样式嵌套

vscode搜索安装插件&#xff1a;AutoScssStruct4Vue

十、接口(3)

本章概要 接口适配接口字段 初始化接口中的字段 接口嵌套接口和工厂方法模式 接口适配 接口最吸引人的原因之一是相同的接口可以有多个实现。在简单情况下体现在一个方法接受接口作为参数&#xff0c;该接口的实现和传递对象则取决于方法的使用者。 因此&#xff0c;接口的…

Linux 系统的如何优化(面试题)

Linux 系统的如何优化&#xff08;面试题&#xff09; (1) 禁用不需要的服务 ntsysv 命令最为方便&#xff0c;执行后&#xff0c;把不需要的勾选去掉就行 &#xff08;2&#xff09;避免直接使用root用户&#xff0c;普遍用户通过sudo授权操作 &#xff08;3&#xff09;通过…

wustojc日期格式变化

#include <stdio.h> int main() {char a[10];for(int i0;i<10;i){//用一个耍聪明的方法&#xff0c;全部用数组存储&#xff1b;面向结果编程a[0]getchar();}printf("%c%c%c%c%c%c%c%c%c%c",a[6],a[7],a[8],a[9],a[2],a[0],a[1],a[5],a[3],a[4]);return 0;}…

数据结构:栈和队列

文章目录 一、栈1.栈的概念及结构1.栈的概念及结构2.栈的实现 2.栈的顺序表实现1.栈的结构体和实现的功能函数2.栈的初始化&#xff0c;入栈和出栈操作3.栈的其他操作 3.栈的链表实现1.栈的结构体和实现的功能函数2.栈功能函数的实现 二、队列1.队列的概念及结构1.队列的概念及…

【使用教程】在Ubuntu下运行CANopen通信PMM伺服电机使用教程(NimServoSDK_V2.0.0)

本教程将指导您在Ubuntu操作系统下使用NimServoSDK_V2.0.0来运行CANopen通信的PMM系列一体化伺服电机。我们将介绍必要的步骤和命令&#xff0c;以确保您能够成功地配置和控制PMM系列一体化伺服电机。 NimServoSDK_V2.0.0是一款用于PMM一体化伺服电机的软件开发工具包。它提供了…

Harmony OS教程学习笔记

基础知识 1.如何修改程序启动的第一个页面&#xff1f; 不想使用创建的默认的页面&#xff0c;这时需要修改启动页面&#xff0c;修改的地方在EntryAbility文件中的onWindowStageCreate方法中。 onWindowStageCreate(windowStage: window.WindowStage) {// Main window is cr…

Golang Gorm 更新字段 save update updates

更新和删除操作的前提条件都是要在找到数据的情况下&#xff0c;先要查询到数据才可以做操作。 更新的前提的先查询到记录&#xff0c;Save保存所有字段&#xff0c;用于单个记录的全字段更新它会保控所有字段&#xff0c;即使零值也会保存。 在更新和删除之前&#xff0c;要利…

远程线程注入(简单样例以及原理)

远程线程注入(简单样例以及原理) 注入的目标是将我们的代码注入到目标进程的地址空间中 注入通常可以根据注入的内容分为两种类型&#xff1a; shellcode注入 &#xff1a;这种注入是将我们的代码直接注入到目标内存中&#xff0c;这就要保证我们的代码在贴到其他地址上后仍…

交叉熵--损失函数

目录 交叉熵&#xff08;Cross Entropy&#xff09; 【预备知识】 【信息量】 【信息熵】 【相对熵】 【交叉熵】 交叉熵&#xff08;Cross Entropy&#xff09; 是Shannon信息论中一个重要概念&#xff0c; 主要用于度量两个概率分布间的差异性信息。 语言模型的性能…

Azure静态网站托管

什么是静态网站托管 Azure Blob的静态网站托管是一项功能&#xff0c;它允许开发人员在Azure Blob存储中托管和发布静态网站。通过这个功能&#xff0c;您可以轻松地将静态网页、图像、视频和其他网站资源存储在Azure Blob中&#xff0c;并直接通过提供的URL访问这些资源。 官…

使用VisualStudio制作上位机(一)

文章目录 使用VisualStudio制作上位机(一)写在前面第一部分:创建应用程序第二部分:GUI主界面设计使用VisualStudio制作上位机(一) Author:YAL 写在前面 1.达到什么目的呢 本文主要讲怎么通过Visual Studio 制作上位机,全文会以制作过程来介绍怎么做,不会去讲解具体…

css 实现svg动态图标效果

效果演示&#xff1a; 实现思路&#xff1a;主要是通过css的stroke相关属性来设置实现的。 html代码: <svgt"1692441666814"class"icon"viewBox"0 0 1024 1024"version"1.1"xmlns"http://www.w3.org/2000/svg"p-id"…

操作符详解(1)

1. 操作符分类&#xff1a; 算术操作符 移位操作符 位操作符 赋值操作符 单目操作符 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 2. 算术操作符 - * / % 1. 除了 % 操作符之外&#xff0c;其他的几个操作符可以作用于整数和浮点数。 2. 对…

Redis中的缓存穿透、雪崩、击穿的原因以及解决方案

一&#xff0c;什么是缓存穿透、雪崩、击穿&#xff1f; 1、缓存穿透&#xff1a; 是指用户查询数据&#xff0c;在数据库没有&#xff0c;自然在缓存中也不会有。这样就导致用户查询的时候&#xff0c;在缓存中找不到&#xff0c;每次都要去数据库再查询一遍&#xff0c;然后…