巧妙使用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设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,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属性来设置 ...
最新文章
- Android 文件操作
- 人工智能行业应用之：为建筑工程提供全新解决方案
- 【Java基础总结】IO流
- XSS挑战赛--Writeup（共16题）
- c#屏幕录制(经典)(含源码和AForge.Video.FFMPEG.DLL)及填坑办法
- ocelot 自定义认证和授权
- KindEditor编辑器, 利用ajax动态切换编辑器内容
- memcpy执行效率测试，无效测试
- 万圣节主题海报设计，少不了的素材
- 404 单页应用 报错 路由_详解vue 单页应用（spa）前端路由实现原理
- WPF中的TreeView入门
- vue组件化开发学习笔记-2-组件间的数据交互
- 移动固态硬盘没有连接到计算机,移动固态硬盘装个Win to go，这才是移动固态硬盘正确的打开方式...
- Msm8960(APQ8064)平台的MSM-AOSP-kitkat编译适配(2)：开发环境及相关的使用技巧
- word中插入公式2010和2016两个版本）
- LDO：低压差线性稳压芯片
- 高考倒计时100天，用python看看高三党
- 抖音电商副总裁木青：抖音电商正在成为服饰行业的增量风口
- plc里的二进制 用计算机,PLC中常用数制及如何转换
- 微信小程序iOS使用input输入时placeholder及输入内容消失或隐藏