HTML学习心得(4)

最新推荐文章于 2023-09-22 22:19:06 发布

子春十一

最新推荐文章于 2023-09-22 22:19:06 发布

阅读量630

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/Heimdall_vata/article/details/80447956

版权

HTML学习心得(4)

CSS的简单框架结构和元素渲染

什么是CSS

CSS，中文名：层叠样式表。是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

我们可以简单的来理解它的作用，它作为一个可以设定部件风格，色彩，样式，以及调配各部件之间的关系等等一系列的操作，怎么说呢，它能起到的作用比我们想象的要强大。我们可以通过它实现一张网页的大部分美化，也可以使用它使我们的网页不单单局限于一个二维的平面。

CSS编译环境

和HTMl类似的，CSS也可以使用记事本编写，完成后只需要将格式改为.css文件即可。

正常的电脑
支持css的浏览器
记事本
也可使用Sublime text 打开编写

CSS的内链外链

内链

CSS链接到网页上的方式有两种，现在我们先来说一下简单的内链方式。

标签内属性

标签内部的属性设置在我看来也是属于CSS的范畴之内的，所以我把这部分放在这里，做一个总结。

在每个标签里面，我们会发现存在一个style的关键字，通常我们是这样使用它的：

<a style="·····">   </a>

即在标签的其实标签里加入style关键字，然后接=和“ ”，在引号中加入我们想要的属性内容，譬如更改颜色，更改大小，规定元素的位置，设置优先显示级别等等操作。

这样的在标签内部加入的属性设置，我把它归为CSS内链的标签内属性这一类。但很明显的，我们会发现这样有一个问题：虽然这样写可以非常方便看到这个标签携带的属性，但我们在后面使用的时候会发现，抛开文件的长度大大增加这一点不说，我们在后期修改或者维护的时候会变得很麻烦。大量的属性代码占据的大部分的代码页面，会使我们找到目标标签变得麻烦[^18]，所以我们想要一种能将属性设置集中的方法，来简便我们的查找和后期调试。

所以，在<head>内的全局属性定义就出现了。

`<head>`内的全局属性定义

在这里，我们会讲到<head>中<style>的另一个用途：作为全局属性定义存放位置的标签。

我们先来一用一个例子：

<head>


<style>
*{ 
    margin:0; padding:0; list-style:none;
}
.universal{
    background:#E6E6E6;
    width: 1520px;
    height: 525px
}
#top{
    background:#112B46;
    width: 1520px;
    height: 64px;
    position: fixed;
    top: 0;
    z-index:1;
    display:none;

}
#topimg img{
    vertical-align: middle;
    height: 64px;
    width: 109px;

}
#topfor{
    float: right;
    width: 700px;
    vertical-align: middle;
    position: relative;
    text-align: right;
}
#topfor a{
    position:relative;
    color: white;
    text-decoration:none;
    top: 20px;
}
</style>
  </head>

在这段截取的源码中，我们可以看到，在<head>中我们定义了一个<style>的标签，在标签中并不是之前的 为文件规定外链样式表的类型 的作用，而是在标签内加入了描述标签属性的CSS代码。

要注意的是，因为我们是在<head>中定义的CSS代码，所以它的作用范围就不像之前的那样只限于一个标签本身，它的作用范围是整个<body>内及它本身的所有标签和结构。所以我们可以看到，在<style>中的CSS书写要更整齐，更明了。而且它带来了一个非常好的效果：我们可以让像同式的标签公用同一个CSS块，这样就会缩短代码长度，并且加快浏览器的解析速度。

那么现在我们面临的问题就不多了，只有在我们想对这个网页整体换个风格时，才会发现这样一个一个的改属性实在是太要命了。而且在本质上我们并没有让HTML页的长度缩短多少。网页的结构也依然不能很清晰的展现在我们眼前。所以我们需要一种能快速替换绝大部分设置，并且能大幅度缩短代码长度，隐去和主体无关的样式设定的方式，外链就是个不错的选择。

外链

CSS的外链，就是新创建一个文件用来存储CSS代码，然后导入到目标HTML文件中，前面我们已经介绍过外链的好处，在前文我们也介绍过<link>d的用法。那么下面我们来看一看如何将外部的CSS文件导入HTML文件中

我们以一个最简单方便的例子来详细的说明如何导入外部文件：

我们的在HTMl文件放在桌面上名为test的文件夹里，我们在该文件夹里在创建一个文本文档，名字取为teststyle，将该文件的格式改为.css文件，接下来，我们在HTML文件中加入导入外链表的说明。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <style type="text/css">
    </style>
</head>

因为.css文件和HTML文件在一个文件夹下，我们可以省略href要求的文件的全部路径，只需要写出.css文件的名字就可以了，不要忘记加文件的后缀。然后再下面使用<style>声明引用类型为一个CSSS文件就可以了。这样最简单的外部CSS文件导入就完成了，我们在CSS文件中写的属性设置代码浏览器在打开网页之前就会将配置信息全部导入到页面中了。

CSS的ID命名

在了解到了CSS的外链和 <head>内的全局属性定义后，我们不免会有这样一个问题：”怎么让浏览器知道我的属性设置是给谁都写的呢？一张网页里有这么多的标签。”我们在这里使用使用id和class来结局这个问题，下面我们来介绍CSS中的ID命名。

在基本上每个标签中，都有这样一个属性，它不包含在<style>中，它用来命名标签的ID：

<div id="div7">
</div>

命名的格式很简单，在这里就不多叙述了。要注意一个标签只能有一个ID 。那么我们再来看看在CSS文件中是怎么规定ID的。

#div7{

    position: fixed;    
    right: 0;   
    z-index:1;
    bottom: 0;
    margin-bottom: 0px; 
}

可以看到，在CSS文件中，使用一个#来标记说明这是一个控制ID的属性块，#后面接ID的名字。对于该ID下的所有属性设置，我们用一对{}将该ID下的所有属性都包含起来。

特别的，对于CSS的命名，提供了二级命名，也就是我们不只可以命名到ID或者后面的class，我们可以直接命名到该ID或clss下的一类标签。

我们举一个例子来看：

#topfor{
    float: right;
    width: 700px;
    vertical-align: middle;
    position: relative;
    text-align: right;
}
#topfor a{
    position:relative;
    color: white;
    text-decoration:none;
    top: 20px;
}

<div id="topfor">
        <a href="http//www.baidu.com" style="right:0%"><b>百度一下</b></a>
        <a href="http//www.baidu.com" style="right:30%"><b>百度一下</b></a>
    </div>

在这个例子中，我们看到我们为一个<div>命名属性为topfor，但在CSS文件中却有两个含有#topfor的定义。这就是CSS的二级定义，在第二个定义中，其实是直接定义到了ID为topfor的标签下的<a>中。也就是说第二个名称为#topfor a的定义的对象已经不是名称为topfor的<div>了，而是越过了它直接定义到了它内涵的所有<a>标签中。这就是我认为的二级定义。

CSS的class命名

在了解了ID的命名规则后，我们再来说一说CSS的class命名，与ID类似的，我们也是对class进行这样的声明和定义属性：

<div class="div7">
    <a herf="#"></a>
</div>

.div7{

    position: fixed;    
    right: 0;   
    z-index:1;
    bottom: 0;
    margin-bottom: 0px; 
}

与ID不同的，class的属性定义是在名称前面加入.作为class的标记。并且同样的，我们也可以对它进行二级定义：

.div7 a{
    position:relative;
    color: white;
    text-decoration:none;
    top: 20px;
}

同样的，这样代表了该class下的所有标签的属性。

我们在使用clss属性时往往都是使用它搭建一个模板，来让多个对象使用它。是我们的网页中的相似区块的属性渲染更简单方便。而ID一般用来进行单独的标签属性渲染。我们可以配合使用它们来进行网页的渲染。

PS

需要注意的，class、ID、标签内style属性配置是有优先级区分的。在优先级中，标签内属性优先级是最高的，而class的优先级是最低的。所以在我们制作网页时，可以利用优先级的顺序来是我们的代码简化，我们可以使用class来对所有的相似布局进行一个大致的定义，然后使用ID属性来对每个结构进行细的属性设置[^20]或者更改。要注意的，在这三个属性设置中我们可以写入相同类型的属性，然后给他们赋值不同的值或者是同一类型不同属性的定义，在浏览器解析时会根据优先级来自动的覆盖掉这些相同属性，最后只显示优先级最高的属性设置。

CSS属性概况

CSS的属性有非常多的类型和选项设置，我们就不一一举例了，详细的可以参照文末的链接查看，我们来说一下CSS的属性包括哪几个方面：
CSS的属性有非常多的类型和选项设置，我们就不一一举例了，详细的可以参照文末的链接查看，我们来说一下CSS的属性包括哪几个方面：

显式样式：

显式样式就是css用来控制元素的可见属性，例如长，宽，高，颜色，线条，borde的线条宽度，线条颜色等等我们在页面上的可见属性。这些属性往往是用来美化界面，或者是控制排版的可见属性。我们可以利用他们来进行页面的基本样式的操作。
坐标样式：

为什么要把这一类的CSS属性称为坐标样式呢？在我的理解，这一类的样式起到的作用都是在为元素的位置服务的，例如float，top，bottom，position等等都是在使被控制的元素进行位置的变化或者是调整位置的属性值，使元素可以被移动或者是固定位置等等。
显隐样式：

显隐样式就是通过display等属性进行元素标签的显示或者是隐藏的操作。通过display我们可以将标签设置成隐藏，显示或者是块级元素等等。

当然，css的属性分类有很多，它的属性也不只是只有这么一点，在这里我也只是仅仅举例说明css的一些属性。我们可以在文末的链接中进行详细的查看学习。

[1] : http://www.w3school.com.cn/css/index.asp

子春十一

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML学习心得(4)

HTML学习心得(4)CSS的简单框架结构和元素渲染什么是CSS CSS[^17]，中文名：层叠样式表。是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能...
复制链接

扫一扫