如何使用css美化网页?

news2024/12/23 12:22:19

转自:微点阅读  https://www.weidianyuedu.com

相信大家通过上一篇文章的学习已经成功的创建了自己的第一个网页。虽然只有一句话,但这个仍然是一个网页。但是我相信你,一定觉得这个页面不好看,想自己美化一下,今天就可以实现这个愿望,让我们来认识一下CSS

什么是css呢?

css是指层叠样式表 (Cascading Style Sheets),简单来说就是帮你美化页面的。

如上图所示,在head标签下面写一对"style"标签。这个"style"标签就是用来写css样式的,把你写的样式放到这对标签里他才会生效。格式就像“选择器{样式名1:样式;样式名2:样式;}”这样。 咱们的网页都是要经过浏览器渲染的,才会出现不同的样式,所以你得告诉浏览器你要给哪个地方添加样式,“选择器”就是用来做这件事的。仔细看你会发现,我写的选择器名称和标签名一样,这就叫做“标签选择器”,我选择的是“h1”标签。

大括号里写的是具体样式。其中这几个样式都是用来设置字体的,“color”是用来设置字体颜色的,“font-size”是用来设置字体大小的,“font-weight”是用来设置字体粗细程度的。字体颜色你可以设置“red”、“blue”等英文单词,当然有其他写法,这个咱们以后再说。字体大小可以设置“数字+px”,"px"就是像素。

什么是像素呢?

像素是指由图像的小方格组成的,这些小方块都有一个明确的位置和被分配的色彩数值,小方格颜色和位置就决定该图像所呈现出来的样子。比如,你得手机或者电脑显示器都有分辨率吧,比如“736*128”就是分辨率,这代表着你得设备每一行有736个像素,共有128行。你拿着放大镜或者滴一滴水在你的显示屏上,就会发现一个一个小方块,每个方块有三种颜色组成“红绿蓝”(光的三原色),这一个方块就是一个像素。咱们设置12px,意思就是一个字站的面积是“12像素*12像素”。

“font-weight”可以设置100-800不同的数值,但是要注意必须是100的整数倍,比如100,200……这样。当然你可以不设置字体粗细,怎这个字默认粗细是400,由于"h1"标签自身的特性,在这个标签中的字体已经被加粗了,可以设置400,看看有什么不同。

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

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

相关文章

深度学习---确保每次训练结果一致的方法

每次训练结果不一致的原因: 神经网络特意用随机性来保证,能通过有效学习得到问题的近似函数。采用随机性的原因是:用它的机器学习算法,要比不用它的效果更好。 在神经网络中,最常见的随机性包含以下几个地方&#xf…

[黑马程序员C++笔记]P174-P184模板-类模板

视频地址:黑马程序员匠心之作|C教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibili 目录 P174模板-类模板基本语法 P175模板-类模板和函数模板区别 P176模板-类模板中成员函数创建时机 P177模板-类模板对象做函数参数 P178模板-类模板与继承 P179模板-类模板…

什么是MES制造执行系统?MES的优势,架构和核心功能

随着科技的飞速发展,企业要想增强自身的竞争力,在市场竞争中立于不败之地,只有这样才是唯一的出路。在过去30年中,对社会影响最大的技术进步是信息技术,它改变了我们的日常生活,改变了企业的管理方式。在信…

Kubernetes v1.25 源码编译

下载源码并切换到需要debug的分支 git clone gitgithub.com:kubernetes/kubernetes.git git checkout -b v1.25 remotes/origin/release-1.25 cd kubernetes编译源码 执行:make clean && KUBE_BUILD_PLATFORMSlinux/amd64 make all DBG1会编译所有的组件 网…

java 之泛型详解

1 什么是泛型 引入: 关于泛型,先来说几句集合。都知道集合是可以存储任意对象,当我们创建一个集合时如果没有声明它的存储类型,那该集合便自动提升为Object类型 提示:在我们创建对象的时候,如果没有明确指…

构建全真互联数字地图底座 腾讯地图产业版WeMap重磅升级

前言 :伴随着地理信息产业的不断演进,以及LBS、大数据、5G、云、AI等新技术的持续应用,数实融合发展呈现出加速态势,数字地图也从移动互联网时代向产业互联网时代进化。 WeMap腾讯地图产业版重磅升级!12月1日&#xff…

AD入门学习—元件库的创建2

目录 1.3 IC芯片类元件创建 1.4 晶体类元件创建 1.5 接插件座子元件创建 学习目录 1.3 IC芯片类元件创建 填写ID放置在原理图上才会有名字。 STM32F103VET6芯片: 主要用到的还是阵列式粘贴,先复制,然后向上粘贴是正的,向下粘贴…

(附源码)ssm学生考勤管理系统 毕业设计 260952

摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存…

C++日期和时间编程总结

一,概述二,C-style 日期和时间库 2.1,数据类型2.2,函数2.3,数据类型与函数关系梳理2.4,时间类型 2.4.1,UTC 时间2.4.2,本地时间2.4.3,纪元时间 2.5,输出时间和…

射频识别|计算机网络|第九讲数据通信和编码技术|奈氏准则和香农定理

1.数据通信概述 2.数据传输方式 3.传输介质 4.数据编码技术 (1)什么是比特率,什么是波特率,它们之间有何换算关系式? (2)数据通信系统的技术指标有哪些? (3)什么是信道容量,香农定理其中的各个参数的意义是什么&a…

Linux学习-76-LAMP环境搭建和LNMP环境搭建-前期准备

17 LAMP环境搭建和LNMP环境搭建-环境准备 LAMP是协同工作的一整套系统和相关软件,能够提供动态Web站点服务以及应用开发环境,是目前最为成熟也是比较传统的一种企业网站应用模式。 LAMP 环境搭建指的是在 Linux 操作系统中分别安装 Apache 网页服务器、…

社交礼仪,商务礼仪,酒桌上需注意的细节

目录 酒桌上需注意的细节 宴会酒桌上的注意事项 酒桌上的礼仪 一、敬酒要先​​​​​​​敬领导和长辈 二、学会聆听,不要夸夸其谈 三、主动倒酒 酒桌上需注意的细节 细节一:领导相互喝完才轮到自己敬酒。敬酒一定要站起来,双手举杯。…

uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式

qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端、PC端、开发者工具) 2.其他平台暂未测试兼容性未知 3.支持功能: 1.自定义裁剪尺寸 2.定点等比例缩放:移动端以双指触…

resnet(1)------像素与卷积

文章目录1. 像素2. 色彩3. 图片大小1. 像素 众所周知,图像是由像素构成的,像素越多,图片就越清晰,我们能获取到的信息就越多,不然那么多手机大厂疯狂宣传自己的像素有多高有多高干啥呢。 但是我们人对于图像的识别&am…

读取s3图片并保存至excel

1. 构建Client类,实现图片读取 1.1 导包&config client.py import os import numpy as np import pandas as pd import cv2 import boto3 # boto3安装: pip3 install opencv-python boto3config {"region_name": "us-east-1","end…

k8s安装使用教程 ingress

k8s安装使用教程ingressk8s安装使用教程ingressk8s安装使用教程ingressk8s安装使用教程ingressk8s安装使用教程ingress 注意 1 .服务器配置 大于等于 2核 4 G 2.服务器之间内网必须可以ping通 3.系统是CentOS-7.9.2111-x64 hostnamectl set-hostname xuegod1 设置主机名 每台机…

一个基于.Net高性能跨平台内网穿透工具

作为一名程序员,我们平常需要调试远程API(如公众号回调)、远程操作公司内部、家里的电脑,我们都会用到内网穿透的工具。 今天给大家推荐一个高性能跨平台内网穿透工具的开源项目。 项目简介 一个基于.Net开发的内网穿透工具&am…

Linux虚拟化网络之链路聚合

一、bond链路聚合技术 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在生产场景中是一种常用的技术。 目前网卡绑定mode共有七种(0~6)bond0、bond1、bond2、bond3、bond4、bond5、bond6。 常用的有三…

JNI技术解析

一、JNI是什么? JNI是Java Native Interface的缩写,译为Java本地调用。JNI是一种技术。 二、JNI技术的用途? Java程序中的函数调用Native程序中的函数。Native一般指使用C/C++编写的函数。Native程序中的函数调用Java程序中的函数。三、注册JNI函数 静态注册Java层函数通过…

window和linux的nacos安装

Nacos注册中心 Nacos是阿里巴巴的产品,现在是SpringCloud中的一个组件。相比Eureka功能更加丰富,在国内受欢迎程度较高 Nacos的下载 在Nacos的GitHub页面,提供有下载链接,可以下载编译好的Nacos服务端或者源代码: …