CSS入门以及<div>排版

最新推荐文章于 2023-07-15 23:02:26 发布

刘文景

最新推荐文章于 2023-07-15 23:02:26 发布

阅读量459

点赞数

分类专栏： css html 文章标签： html css tag 标签

本文链接：https://blog.csdn.net/liutongl_5/article/details/44857967

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

0 篇文章 0 订阅

订阅专栏

HTML的各种标签，提供了更好的网页结构以及更多的功能。

而CSS则提供了（批量）格式编辑的可能。

<body>
    <h1 style="font-size: 6px; text-align: center; color: red;">一级标题</h1>

    <p style="background-color: yellow;">
正文
<a href="www.163.com">网易首页</a>
<br />
<a href="www.sina.com">新浪首页</a>
</p>

</body>

例如对于上面的例子，可以讲繁杂的 style="……" 部分更改为在<head>中先行定义CSS，以保持<body>内部代码的简洁。

更改后：

<head>
    <meta http-equiv = "content-type" content = "charset=utf-8;" />
    <title>测试页</title>
    <style>

</pre><pre name="code" class="html">h1{
    font-size: 6px;
    text-align: center;
    color: red;
}

p{
    background-color: yellow;
}

    <span style="font-family: Arial, Helvetica, sans-serif;"></style></span>

</head>

<body>
<h1>一级标题</h1>
<p>正文</p>
<a href="">链接1</a>
<a href="">链接2</a>
</body>

当然也可以更进一步，把<head><style>中的代码放入一个外部的.css文件，使得整个HTML文档变得更简洁，更方便后期维护。例如，放入下面的：test.css

h1{
    font-size: 6px;
    text-align: center;
    color: red;
}

p{
    background-color: yellow;
}

之后再在刚才的HTML中<head><link>标签添加这个CSS文件（仅截取<head>部分）：

<head>
<meta http-equiv = "content-type" content = "charset=utf-8;" />
<link rel="stylesheet" type="text/css" href="test.css">

<title>测试页</title>
</head>

HTML中的代码瞬间变少了许多。

CSS在对文档进行批量编辑的时候更能大幅减少代码的使用量。为了进行批量编辑，则需要引入HTML标签中class和id的概念。

class就是进行分类，id就是对其中的某一元素进行细化定义。一般来说，一段文件内不能有两个相同的id定义两个不同的部分。在CSS中，影响体现不是很明显，CSS会对所有相同id的区域更改格式，但之后的javascript部分会有较大影响。

那么如何使用class和id呢：

<body>
<div class="testclass">
测试分类
    <div id="testid">测试id</div>
</div>
</body>

这样就可以啦。然后在CSS文件中更改他们的格式。在每个"class"的名字前面加上一个英文的句号"."，在每个ID名字前面加上一个井号"#"。

.testclass{
    color: red;
    font-size: 20px;
    text-align: center;
}

#testid{
    text-align: left;
    font-size: 10px;
    background-color: black;
}

此时testid中的文字颜色应该仍然为红色，这是由于CSS的继承制度。在内部标签没有特殊说明的时候，上一级会自动继承到下一级。

另一种可能遇到的重复性冲突是在CSS文件中、<head>标签、<body>中都有定义，此时以<body>中的优先，<head>中其次，外部引用的CSS文件排在最后。如果在同一部分中不小心对同一元素定义了两次，那么根据HTML和CSS从上到下的读取顺序，在后面的定义将会取代在之前的定义，因此会以后定义的为准。

div+CSS也可以用于，也普遍用于现在的网页框架排版。取代了曾经流行的<table>排版方式（表格<table>排版是将整个网页切分成一个大的表格，利用调整表格的行宽、列高、空白单元格、表格嵌套等来进行排版。缺点在于文件较大？而且层次杂乱不易维护。有点应该是在各个浏览器支持都比较不错？不过现在div+CSS的支持应该也基本没问题了）。好像还有一些<frameset>+<frame>以及<iframe>的排版方式，具体不了解。

下面是<div>+CSS的框模型简介（图片来自W3school.com.cn）：

框模型原理

框模型（Box model）也译作盒子模型，原理就像摆放在商店的礼品盒。margin定义的是礼品盒与礼品盒之间的距离，border是盒子的厚度（HTML中设置为0即隐藏边框线），padding是礼品盒内部包裹着礼品的装饰物/保护垫的厚度，而定义的height和width只是这正内部内容的高度和宽度。内外边距以及边框的颜色和厚度都可以更改。具体示例请参阅W3school。

顺便说一下，大部分标签比如<div>以及<p>都是默认width: 100%的（这个百分比是继承自上一级的宽度，或者是整个页面的宽度），因此排版时如果需要几个<div>并排排列，需要在CSS中更改

width: 50%; display: inline-block; float: left;

其中float是相当于将此元素紧靠某一边排列，以免其占据整行。具体更细节更高级的操作还需要查阅W3School上面的说明，这里也不做详细介绍了。

关于HTML、CSS就先更到这里。接下来计划开始介绍一点javascript 的用法吧。【边学边更】