大白话css第一章基础入门

了解CSS基本概念

CSS是干啥的：就好比你装修房子，HTML呢是把房子的框架、房间布局都搭好了，像客厅、卧室、厨房都有了，但是房子里面空空的，啥都没装饰。这时候CSS就上场啦，它就是负责给房子做装修的，比如给墙壁刷上喜欢的颜色，给地面铺上漂亮的地板，给房间摆上合适的家具，让整个房子看起来美美的。在网页里呢，CSS就是用来让网页变得好看的，像设置文字的样子、颜色，还有按钮的大小、形状，让网页布局更合理、更美观。
CSS里的一些词是啥意思 ：
- 选择器：就好像你在房子里要选某个东西来装修一样，在网页里，选择器就是用来选你想要设置样式的HTML元素的。比如你想让某个段落的文字变色，就得先选到这个段落，这就靠选择器啦。
- 属性：属性就是你要给选到的东西设置的具体特性。还是拿房子来说，你选了一面墙，那墙的颜色、材质就是它的属性。在CSS里，像文字的颜色、字体大小就是属性。
- 值：值就是属性具体的内容啦。比如墙的颜色属性，值可能是白色、蓝色等；在CSS里，文字颜色这个属性，值可能是red（红色）、blue（蓝色）这些。

学习CSS基础语法

怎么把CSS放到HTML里
- 内联样式 ：就是直接在HTML标签里写CSS样式。就像你在某个HTML标签里直接告诉它"你就长这样啊"。比如<p style="color: red;">这是红色的文字</p>，这里的style属性里写的就是CSS样式，让这个<p>标签里的文字变成红色。
- 内部样式表 ：是在HTML文档的<head>标签里，用<style>标签把CSS样式写在里面。就好像你在房子的一个专门地方（里）统一告诉大家每个房间大概怎么装修。示例代码如下：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

<body>
    <p>这是蓝色的文字</p>
</body>

</html>

复制代码

- **外部样式表**：就是把CSS代码写在一个单独的.css文件里，然后在HTML文件里用`<link>`标签去链接这个CSS文件。这就好比你把装修方案写在另外一个本子上，然后让房子知道按这个本子来装修。假设你有一个`styles.css`文件，里面写着`p { color: green; }`，在HTML里这样引入：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <p>这是绿色的文字</p>
</body>

</html>

CSS选择器怎么用
- 标签选择器 ：就是直接用HTML标签名来选元素。比如p标签选择器，就会选中所有的<p>标签。代码p { font-size: 18px; }会把所有段落的文字大小都设置为18像素。
- 类选择器 ：你可以给HTML元素加一个class属性，然后用这个class名来选元素。比如<p class="special">这是特殊段落</p>，在CSS里用.special { color: yellow; }就能让这个有special类的段落文字变成黄色。
- ID选择器 ：给HTML元素加一个id属性，用#加id名来选。比如<p id="myPara">这是我的段落</p>，CSS里#myPara { font-weight: bold; }会让这个id为myPara的段落文字加粗。
CSS属性和值怎么写 ：属性和值是用冒号:连接，然后放在大括号{}里。比如color: red;就是一个属性和值的组合，color是属性，red是值，这就表示把颜色设置为红色。再比如font-size: 20px;，就是把字体大小设置为20像素。

内联样式在实际开发中有哪些优缺点？

优点

简单直接 ：就像你想给一个特定的东西马上变个样子，直接在它旁边动手就行。在写代码的时候，如果你就想让某个HTML元素有个特别的样式，不想去别的地方找或者设置，直接在这个元素的标签里写内联样式，一下子就能让它变样，特别快。比如你就想让一个<div>里的文字颜色马上变成红色，直接在这个<div>标签里写style="color: red"，它马上就红了，多简单。
针对性强 ：如果你只需要给某一个元素设置独特的样式，不想影响其他类似的元素，内联样式就很厉害啦。比如说你有好多<p>段落，但是只有一个段落你想让它字体变大，那就可以只给这个段落加上内联样式style="font-size: 20px"，其他段落都不会受影响，就它自己的字变大了。
方便临时修改：有时候你突然发现某个元素的样式不太对，或者客户临时提了个小要求，要改某个元素的样式。这时候用内联样式改起来可方便了，直接在对应的标签里改就行，不用去别的地方找样式代码，改完马上就能看到效果，特别适合那种紧急的、小范围的修改。

缺点

代码重复多 ：要是有好多元素都需要同样的样式，你就得在每个元素标签里都写一遍这个样式代码。就像你有10个<div>都要把背景颜色设成蓝色，你就得在每个<div>里都写style="background-color: blue"，这得多麻烦啊，代码看起来也啰嗦，而且以后要是想把蓝色改成别的颜色，你得一个一个去改，特别容易漏改。
不好维护：假如你的网页变得越来越大，里面有好多好多元素都用了内联样式，那以后要统一修改样式就头疼了。你得一个一个地找这些元素，一个一个地改样式代码，很容易出错，也很浪费时间。不像把样式都写在一个地方（比如外部样式表），改一处就都改了。
可读性差：当你的HTML代码里到处都是内联样式的时候，代码看起来就很乱。你很难一下子分清哪些是主要的HTML结构内容，哪些是样式代码，读代码的人可能会看得晕头转向，不利于团队合作和代码的后续开发。
不利于样式复用：内联样式是写在特定元素上的，很难把它用到其他地方。如果其他页面或者其他项目也想用同样的样式，你没办法直接把这个内联样式拿过去用，得重新写，这就浪费了很多时间和精力。

如何使用内部样式表来定义网页的样式？

内联样式的优缺点

优点
- 方便局部修改 ：就像你要给家里某一个小角落做个特别的装饰，不想影响其他地方，内联样式就很合适。在网页里，如果只是想单独给某一个元素设置一个独特的样式，不想让这个样式影响到其他类似的元素，用内联样式直接在这个元素标签里写样式就行，特别方便。比如你就想让某一个<p>段落的文字颜色是金色，直接在这个<p>标签里写内联样式设置颜色，不会影响到其他段落。
- 即时生效：你改了内联样式，马上就能看到效果。就好像你给一个小摆件换个位置，马上就能看到房间的变化一样。在开发的时候，快速调整一个元素的样式，马上就能在页面上看到修改后的样子，能快速判断这个样式是不是你想要的。
缺点
- 代码重复：假如你有很多个段落都想设置同样的样式，用内联样式的话，就得在每个段落标签里都写一遍样式代码，就像你要给每个房间的同一面墙都刷同样的颜色，得在每个房间都刷一遍，很麻烦，而且代码看起来也很乱，以后要是想改这个样式，就得一个一个地改，很容易漏改。
- 难以维护：如果网页很大，有很多元素都用了内联样式，当你想要统一修改某种样式风格时，就需要在很多地方去改代码，很容易出错。就好比你要把家里所有房间的地板都换成另一种材质，每个房间都要单独处理，很容易遗漏某个房间或者出现不一致的情况。
- 不利于代码结构清晰：HTML本来是负责网页结构的，CSS是负责样式的。但内联样式把样式和结构混在一起了，就像你把装修材料和房子的框架混在一起放，会让代码看起来很混乱，别人看你的代码或者你自己以后再来看，都很难快速搞清楚哪里是结构，哪里是样式。

使用内部样式表定义网页样式的方法

在HTML文件中创建内部样式表 ：首先要在HTML文档的<head>标签里面，用<style>标签把CSS样式代码包起来，这就像是在房子的设计蓝图开头部分专门划出一块地方来写装修方案。比如：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 这里面写CSS样式代码 */
    </style>
</head>

<body>
    <!-- 这里是网页内容 -->
</body>

</html>

定义选择器和样式 ：在<style>标签里面，你就可以写CSS代码来选元素和设置样式了。比如你想让所有的<h1>标题都是红色的，字体大小是30像素，就可以这样写：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>这是一个红色的大标题</h1>
</body>

</html>

如果你想让某个类名为special的段落有特殊的样式，比如文字是蓝色，背景是浅黄色，就可以先在HTML里给段落加上class="special"，然后在CSS里这样写：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
       .special {
            color: blue;
            background-color: lightyellow;
        }
    </style>
</head>

<body>
    <p class="special">这是一个有特殊样式的段落</p>
</body>

</html>

要是想给id为myDiv的<div>元素设置样式，比如让它有一个黑色的边框，宽度为2像素，就可以在HTML里给<div>加上id="myDiv"，然后在CSS里像这样写：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
        #myDiv {
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div id="myDiv">这是一个有黑色边框的div</div>
</body>

</html>

外部样式表和内部样式表有什么区别？

存放位置

外部样式表：就好像是一个单独的笔记本，专门用来写样式规则。它是一个独立的.css文件，和HTML文件是分开的。比如你有一个名为styles.css的文件，里面全是各种样式代码，专门负责控制网页的样式。
内部样式表 ：它是把样式规则写在HTML文件的<head>标签里面，用<style>标签包起来。就像是在你写的故事书（HTML文件）开头专门留了几页来写关于故事里场景布置、人物穿着之类的描述（样式代码），这些描述只对这本故事书里的内容起作用。

应用范围

外部样式表：它可以被多个HTML文件使用。假如你有好几个网页，都想使用同样的一套样式风格，就像好几本故事书都想用同一种风格来描述场景和人物，那你把这些样式写在外部样式表里面，然后让每个HTML文件都去引用这个样式表就行，非常方便实现多个页面的样式统一。
内部样式表：只能在它所在的那个HTML文件里起作用。就像刚才说的，它是在某一本故事书里写的样式描述，只对这本故事书里的内容有效，别的故事书就看不到也用不了这些样式。

代码维护

外部样式表：如果要修改样式，只需要在这个单独的.css文件里修改一处，所有引用了这个样式表的HTML文件的样式都会跟着改变。就好比你有一个关于装修风格的手册，所有房子都按照这个手册来装修，要是你想把装修风格里的某个颜色改了，只需要在手册里改一次，所有房子的这个颜色都会变。
内部样式表：要是有多个HTML文件都有各自的内部样式表，当需要修改样式时，就得在每个HTML文件里都去改一遍，比较麻烦，而且容易遗漏。就好像每栋房子都有自己单独的装修记录，你要改装修风格，就得一栋一栋房子去改记录，很容易漏改或者改得不一样。

加载速度

外部样式表：浏览器可以把外部样式表缓存起来，下次再访问使用了这个样式表的其他页面时，就不用再重新下载样式表了，能加快页面的加载速度。就像你去一个地方拿了一份资料，以后再去其他地方需要这份资料时，就可以直接从你保存的地方拿出来用，不用再去原来的地方重新拿。
内部样式表：每次加载包含内部样式表的HTML文件时，都要把样式表的代码加载一遍，没有缓存机制，对于内容较多的页面，可能会稍微增加一点加载时间。

代码结构

外部样式表：能让HTML文件和CSS文件的职责更明确，HTML只负责网页的结构内容，CSS专门负责样式，就像盖房子的时候，一个人专门负责搭框架，另一个人专门负责装修，分工明确，代码看起来也更有条理，更容易理解和管理。
内部样式表：样式代码和HTML结构代码混在一个文件里，会让HTML文件显得比较臃肿，特别是当样式代码比较多的时候，就好像搭房子和装修的工作都在一个地方弄，会有点混乱，不太容易一下子看清楚结构和样式分别是怎么回事。