如何使用css美化网页？
转自：微点阅读 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，看看有什么不同。
如何使用css美化网页？相关推荐
- 在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
- CSS 美化网页元素
文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...
- CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
- 第五课 CSS美化网页元素
为什么用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验 编辑网页 ...
- 巧妙使用css美化网页
转自:微点阅读 https://www.weidianyuedu.com 相信大家通过上一篇文章的学习已经成功的创建了自己的第一个网页.虽然只有一句话,但这个仍然是一个网页.但是我相信你,一定觉得这 ...
- CSS美化网页元素大全
< span>标签 作用:能让某几个文字或者某个词语凸显出来 1.CSS 字体属性 属性 描述 font 简写属性.在一条声明中设置所有字体属性,简写顺序:字体风格→字体粗细→字体大小→字 ...
- 【CSS—美化网页元素】
1. 字体样式 span变迁:重点要突出的字,用span套起来 <!DOCTYPE html> <html lang="en"> <head>& ...
- 小张张带你学习css美化网页，让你在学习的道路上不再孤单
html里如何使用css来修饰 前言 一.行类式 二.内嵌式 三.外链式 总结 前言 html相当于骨架,css才能给html灵魂和肉体. 一.行类式 行内式又称之为内联式,是通过style属性来设置 ...
- 第五章 CSS美化网页元素
练习1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
最新文章
- Python计算机视觉——照相机模型与增强现实
- CentOS7防火墙服务（Firewalld）关闭实战
- mysql 免安装重装_MYSQL的免安装的重装
- 推荐算法--时效性(05)
- vue 列表更改排序，不刷新问题
- github项目提交失败 master - master (non-fast-forward)
- 拓端tecdat|用Rapidminer做文本挖掘的应用：情感分析
- Yii Framework2.0开发教程（10）配合mysql数据库实现用户登录
- 【生信进阶练习1000days】day2-学习summarized experimental data与Down stream analysis
- 如何把二维表转成一维表
- android studio红色下划线,如何在Android Studio中为文字加下划线？
- WiFi认证—分析从连接WiFi到上网的全过程(一)
- 键盘右边数字键不能用，只能当方向键使用
- 元旦节快乐，新的一年新的福利，给大家准备了高清无码的白虎图
- vscode在报错时候自动格式化代码
- 99%的人看了它都会说这是一篇很全的tomcat服务❤️❤️[⭐建议收藏⭐]
- C# 修改本地以太网ip地址
- 复旦Moss团队：Moss参数规模约是ChatGPT的1/10；贾跃亭再获FF执行官身份；PowerToys新版发布|极客头条
- Python让Excel飞起来—批量处理工作薄和工作表
- php斯芬克斯,找回自我 走出斯芬克斯之谜