CSS入门零基础教程(一)

206 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第17天,点击查看活动详情

嗨,大家好,我是异星球的小怪同志

一个想法有点乱七八糟的小怪

如果觉得对你有帮助,请支持一波。

希望未来可以一起学习交流。

一、CSS简介

CSS的主要使用场景就是美化网页,布局页面的。

1.HTML的局限性

说起 HTML,这其实是个非常单纯的家伙,他只关注内容的语义。

比如< h1>表明这是一个大标题,< p>表明这是一个段落,< img>表明这儿有一个图片,< a>表示此处有链接。

很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。

虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐……

2.CSS-网页的美容师

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。

有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、 边距等)以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮,让页面布局更简单。

3.总结

1.HTML 主要做结构,显示元素内容。

2.CSS 美化 HTML ,布局网页。

3.CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离。

4.CSS语法规范

使用 HTML 时,需要遵从一定的规范,CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰,首先需要了解 CSS 样式规则。

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。

(1)选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式。

(2)属性和属性值以“键值对”的形式出现。

(3)属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。

(4)属性和属性值之间用英文“:”分开  多个“键值对”之间用英文“;”进行区分。

(5)所有的样式,都包含在< style>标签内,表示的样式表,< style>一般写到< /head>上方。

5.CSS代码风格

以下代码书写风格不是强制规范,而是符合实际开发书写方式。

(1)样式格式书写

① 紧凑格式

② 展开格式

强烈推荐第二种格式, 因为更直观。

(2)样式大小写

强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。

(3)空格规范

① 属性值前面,冒号后面,保留一个空格。

② 选择器(标签)和大括号中间保留空格。

好啦,今天就到这里,下次再更~