CSS学习日志一

在开始CSS之前，那么我们先来说一下 CSS 和 HTML 之间的关系以及什么是CSS吧。

HTML与CSS的联系

HTML的主要功能是编写网页的整体框架以及主要的内容。但是根据我们前面所学到的HTML知识不难看出如果只有HTML编写的网页是比较枯燥甚至可以说整体外观较丑。。。那么我们怎么能让它变得炫酷一些呢？

这时候 CSS 就该出场了，CSS英文全称 **Cascading Style Sheets 意思是 层叠样式表 它的主要作用是就是修饰网页。也就是**CSS可以静态的修饰HTML编写的网页，可以根据需求或者个人喜好对网页进行美化。如果想要深入了解学习CSS知识的话，可以去
菜鸟教程
W3C
等专业网站学习。由于我是立志要做后端软件工程师的男人，对于前端的网页设计等内容也就浅尝辄止啦，我今天给大家分享的是 CSS的代码编写思路 和 怎么用CSS来修饰HTML网页。咸话不多说，我们开始冲浪吧~

CSS的编写思路

首先，在编写CSS的语法中我们需要了解它的语法结构：

1. html中每一个标签都有一个 style 属性，将CSS代码直接写到style属性值中就可以实现对html的修饰，但缺点是只能对一个标签进行修饰，不能实现代码的复用。如：

<h1 style="font-size: 20px; color: red">你好!h1>

即可实现对

标签的修饰字体大小，字体颜色等。

2.第二种就比较厉害，它既可以实现对多组标签进行修饰也可以对单个标签进行修饰。 我们可以在 Hbiulder 的 Web 项目 中的 CSS 目录 下新建一个 CSS文件 进行编写。但修饰HTML时需要引入到HTML文件头部中。如何引入下文细说。编写CSS文件如图：

语法结构如下:

选择器{
    属性；属性值；
    属性；属性值：
    ...}

选择器我们会在下文细说。
另外，我们也可以在编写好的 HTML文件头部 中编写CSS代码，此时就不用在html文件头部引入CSS文件。
是在html文件中编写CSS代码的标签。
具体实例如下：

选择器

所谓选择器就是一种模式，功能就是选择需要进行修饰的元素（说白了就是进行选择作用）。在CSS中最主要的选择器有3种：

1. 标签选择器
   标签选择器以HTML文件中定义的标签名为选择器名，其语法如下：

标签名{
属性；属性值；
属性；属性值；
...}

注意：在css代码中样式属性与属性值之间用； 隔离。样式属性与样式属性之间也是用； 隔离。如果一个样式属性有多个属性值，则属性值与属性值之间用， 分隔。

1. 类选择器
   类选择器以标签中class（基本html中每一个标签都有class属性）标签属性的属性值为选择器名，其语法如下：

.class属性的属性值{
属性；属性值；
属性；属性值；
...}

注意：代码前面的. 一定得有，这是类选择器的标志。

3.ID选择器
id选择器以标签中id标签属性的属性值为选择器名，其语法如下：

#id属性的属性值{
属性；属性值；
属性；属性值；
...}

注意：代码开头的# 不能省略，是id选择器的标志。

除了主要的3种选择器以外，还有一些其他选择器，如：
后代选择器，分组选择器，通配符选择器等等。
那么具体的 属性 和 属性值 就不再多说了都是很固定的代码，可以去专业的网站学习哦~如果你想成为一个专业的web前端设计工程师，那么这些是必须掌握的哦，可不能像我一样的浅显哈。

如何将编写好的css代码适用于HTML

在这里我只针对第一种CSS编写方法做讨论，第二种就像上文提到的，直接在标签内添加style 元素和 属性；属性值；就可以。不多说了，那么怎样将编写好的CSS文件引入HTML文件中呢？
我们只需要在HTML文件的头部 中添加一行代码：

<link href="编写好的CSS文件名" rel="stylesheet" />

即可，意思就是将编写好的CSS文件适用于此HTML文件。
当然这些只是进行CSS编写的时候的一些思路，方法。真正能让你的静态网页更为美观的还是那些繁琐的CSS属性代码以及你的创造力啦，如果想要动态的效果就需要用到JAVAscript喽~以后会给大家分享的哦~在这里给大家分享一个菜鸟教程的CSS参考手册，
CSS参考手册
那么今天就到这了，明天见哦~