CSS之分离-前端小白的探索

写在前面

HTML和CSS是写网页不可缺少的两大利器,HTML是用来写结构,而CSS是用来设计样式的。我看了慕课网的视频和《编写高质量代码》之后我发现他们对于HTML和CSS的分离讲的很一致,下面我就来分析一下什么是把HTML和CSS分离。

分离的真正含义

什么是分离?一说起分离大家一定会想到把HTML和CSS书写到两个不同的文件里,一个命名为index.html 一个命名为index.css。这样的分离是物理上的分离,但是真正的分离不单单指的是物理上的分离,而是思考方式。在书写的时候,我们应该先不考虑如何使用CSS让页面变得美观,而应该先考虑对于结构的书写。

下面我们举个栗子

CSS之分离-前端小白的探索_第1张图片

只单看这张图,通常我们会想


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Tabtitle>
head>
<body>
<div id="box">
    <div class="logo">
        <img src="./pictures/logo.png">
    div>
    <div class="input-frame">
        <input type="text" placeholder="在google搜索或输入网址" class="frame">
        <img class="voice" src="pictures/voice.png"/>
    div>
div>
body>
html>

没有css的样式展现出来的效果是

CSS之分离-前端小白的探索_第2张图片

加上css样式后

CSS之分离-前端小白的探索_第3张图片

通过分离的思想,我们在书写html的时候就不要去想css了,使得大脑的思考减少,减少了书写时的负担。

你可能感兴趣的:(css,css,html,前端,结构)