如何使用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美化你的页面？相关推荐

第五课 CSS美化网页元素
为什么用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验编辑网页 ...
10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计打开blog文件夹的urls.py文 ...
前段html css部分试卷,CSS美化试卷页面
经CSS美化后的试卷页面使用CSS美化前面做的纯HTML页面,实现如上的效果. *-- 第一步: 使用text-align:center实现将标题居中,width:auto使宽度自适应,height ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
用CSS美化你的滚动条
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用 ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
Form 表单详解：案例、CSS 美化
本文要点: 常见表单表单的性质表单CSS美化使用 radio 实现 Tab 选项卡什么是表单用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
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 ...
html5搜索框美化,CSS美化的漂亮搜索框
CSS美化的漂亮搜索框我要搜索搜索 var $ = function(id){return document.getElementById(id);} var formSubmit = funct ...

如何使用css美化你的页面？

如何使用css美化你的页面？相关推荐

最新文章

热门文章