静态网页入门讲解,制作属于你自己的网页(四)

写在开始

上一次的博客讲了CSS样式的四种引用方法,如果不会的小伙伴可以先去看下上次的博客哦,链接为:静态网页入门讲解,制作属于你自己的网页(三)

这次的博客讲解CSS样式的属性与书写的规则。

CSS样式格式

简单来说,格式可以概括为:选择符{ 规则 }

选择符: 就是HTML标记,在一个标记对中的内容将会全部继承规则。

规则: 就是设计的CSS样式内容。

选择符还分成是HTML标记、class、id三种。
在这里插入图片描述
class与id的区别:

id一般用来定义一个页面中比较大的样式,比如栏目的划分,顶部,正文,底部等等。

class用来定义比较细节的样式,比如具体的一个菜单,一行文字等等。

常用CSS属性

1.文字样式属性
在这里插入图片描述
2.颜色背景属性
在这里插入图片描述
3.长度单位属性
在这里插入图片描述
4.curosr(光标)属性
在这里插入图片描述
5.定位属性
在这里插入图片描述

应用案例

1.选择符应用

<!DOCTYPE html>
<html>
<head>
    <title>选择符应用</title>
    <style type="text/css">
        h2{
            color: green;
            font-family: 楷体;
        }
        .redfont{
            font-family: 华文彩云;
            color: red;
        }
        h4.bluefont{
            font-family: 隶书;
            color:blue;
        }
        #id_olivefont{
            font-family: 楷体;
            color: olive;
        }
        h4#purplefont{
            font-family: 仿宋;
            color: purple;
        }
    </style>
</head>
<body>
   <h2>显示楷体绿色</h2>
   <h3 class=redfont>显示华文彩云红色</h3>
   <h4 class=bluefont>显示隶书蓝色</h4>
   <h3 id=id_olivefont>显示楷体橄榄绿</h3>
   <h4 id=purplefont>显示仿宋紫色</h4>
</body>
</html>

显示界面
在这里插入图片描述
2.定位属性应用

<html>
<head>
    <title>定位属性应用</title>
    <style type="text/css">
        span{
             font-size:28pt;
            font-family:"隶书";
        }
        span.level2{
            position:absolute;
            z-index:2;
            left:100px;
            top:100px;
            color:green;
        }
        span.level1{
            position:absolute;
            z-index:1;
            left:103px;
            top:103px;
            color:red;
        }
        span.level0{
            position:absolute;
            z-index:0;
            left:106px;
            top:106px;
            color:yellow;
        }
        p.lev1{
            position:absolute;
            z-index:2;
            left:50px;
            top:50px;
            font-size:20pt;
            color:blue;
        }
        p.lev2{
            position:absolute;
            z-index:-2;
            left:52px;
            top:52px;
            font-size:20pt;
            color:darkred;
        }
    </style>
</head>
<body>        
    <span class="level2">Web技术应用基础</span> 
    <span class="level1">Web技术应用基础</span>
    <span class="level0">Web技术应用基础</span>
    <p class="lev1">欢迎学习</p>
    <p class="lev2">欢迎学习</p>
</body>
</html> 
    

在这里插入图片描述

总结

好啦,这次博客就先讲这么多,CSS最难的不是记住那么多的属性,而是怎么把他们组合起来变成一个完善的页面。下次的博客,博主就用CSS写几个案例,看看CSS样式组合起来能做出什么吧!

结语

如果说这篇文章有让你学到一定的知识的话,不妨点个赞和关注,让博主能够看到。如果讲解中有什么错误和疏忽,也劳烦在评论中指出或提问,博主会第一时间进行更新和答复,谢谢!

版权声明:本文为weixin_44018540原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44018540/article/details/104115769

智能推荐

08-Vue实现书籍购物车案例

书籍购物车案例 index.html main.js style.css 1.内容讲解 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。 结果如下: 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下: 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。 结果如下: 为每个移除按钮添加...

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

猜你喜欢

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...

解决Ubuntu中解压zip文件(提取到此处)中文乱码问题

在Ubuntu系统下,解压zip文件时,使用右键--提取到此处,得到的文件内部文件名中文出现乱码。 导致此问题出现的原因一般为未下载相应的字体。 解决方案: 在终端中使用unar命令。 需要注意的是系统需要包含unar命令,如果没有,采用如下的方式解决: 实例效果展示: 直接提取到此处: 使用 unar filename.zip得到的文件...

centos7安装mysql8.0.20单机版详细教程

mysql8.0之后与5.7存在着很大的差异,这些差异不仅仅表现在功能和性能上,还表现在基础操作和设置上。这给一些熟悉mysql5.7的小伙伴带来了很多困扰,下面我们就来详细介绍下8.0的安装和配置过程。 mysql在linux上的多种安装方式: 1.yum安装 由于centos默认的yum源中没有mysql,所以我们要使用yum安装mysql就必须自己指定mysql的yum源。在官网下载mysq...

Python自学记录——调用函数和定义函数

对于函数,我的理解是 抽象的方法。你不需要它是内部结构是什么样子的,只要遵从它给你的规则来使用,就能得到想要的效果。 调用函数 在 Python 中,有很多内置的函数供我们调用,常用的函数如下: help(obj) 帮助,解释传入的obj type(obj) 查看传入obj的类型 callable(obj) 查看obj是否可以像函数被调用 isinstance(obj,cls) 查看obj的数据类...