免费下载!程序员入门系列教程之《零基础CSS入门教程》重磅推出

简介: 本书由阿里云开发者社区联合乘风者计划专家博主陈文阳共同推出。

免费下载https://developer.aliyun.com/topic/download?id=8268

 

学习 CSS 是离不开 HTMLHTML CSS 的基础。但是,我们也要了解CSS和HTML之间的区别。HTML 用来描述网页的内容,而 CSS 用于给内容添加样式。


如果把网页设计比作房屋装修,HTML 内容就是房子里有哪些家具——沙发、茶几、床、餐桌,都是内容。而 CSS 是对内容的进一步描述——沙发是几座的?茶几的大小?床的颜色?餐桌的高度?沙发和茶几的距离?也就是说,网页上有什么东西,是 HTML 决定的,但是这些东西的外观样式,是 CSS 决定的。


那么,我们该如何学习CSS呢?陈文阳老师撰写的这本书为广大开发者提供了一个很好的思路。


点击免费下载

《零基础CSS入门教程》


《零基础CSS入门教程》-A4书封.jpg


精彩内容抢先看


20220111212100.jpg


零基础 CSS 入门教程(2)--第一段CSS 代码

1. 前言


上一篇介绍了 CSS 的作用,就是用来设置网页的样式的。本篇就用一个最基础的入门实例,来展示 下CSS 是如何将样式设置给网页的。


2. 样式的应用对象


首先明白第一点,CSS 样式的应用对象是什么。

CSS 是用来设置网页样式的,它是给内容添加装饰的,所以 CSS 样式需要设置到网页内容——也就 是要设置到 HTML 元素上的。

一个网页可能有很多元素,例如有 tableformdivspanimg 等等,我们在设置样式的时候, 需要选择设置到具体哪个元素上。

例如下面一段代码,我们希望修改春晓 作者:孟浩然的文本颜色为绿色,那么我们就需要将样式应用到第一个p标签。


<!DOCTYPE html>

<html>

<head>

   <title>CSS第一个实例</title>

   <meta charset="utf-8">

</head>

<body>

   <p>

       春晓 作者:孟浩然

   </p>

   <p>

       春苗不觉晓

   </p>

   <p>

       处处闻啼鸟

   </p>

   <p>

       夜来风雨声

   </p>

   <p>

       花落知多少

   </p>

</body>

</html>


3. 样式的应用方式


好的,现在我们想将绿色这个样式应用到上面的第一个标签,也就是下面这段代码上。


<p>

       春晓 作者:孟浩然

   </p>


那么如何应用呢,其实可以通过 HTML style 属性来实现。也就是说,style 属性的值就是我们要编写的 CSS 代码部分。


通过 style 属性,我们可以将 CSS 样式代码应用到指定的标签上。


看下面的代码,我们给 p 标签设置了 style 样式,style 属性的值color:green;就是 CSS 代码。


<p style="color:green;">

       春晓 作者:孟浩然

   </p>


4. CSS 代码解析


我们已经对 HTML 很熟悉了,HTML 是标签式的语言,它的格式如下代码,其中labelName 为标签名,content为标签内容,propertyName 为属性名,propertyValue 为属性值。


<labelName propertyName="propertyValue">content</labelName>


那么 CSS 的格式时怎么样的呢,我们分析下,如下代码中,color 表示样式名,:用于区分前面名和后面的值,green 表示值,;表示结束符号。


color:green;


这一段代码解释一下,就是将标签内文本颜色(color)设置为绿色(green)


阿里云开发者藏经阁

 

技术人在线图书馆,开发者必读资料库。汇集阿里工程师技术实战精华,点击即可获得海量免费技术精品资料、电子手册、试读图书等。


藏经阁落地页图片.png

相关文章
|
7天前
|
数据采集 存储 前端开发
Puppeteer教程:使用CSS选择器点击和爬取动态数据
本文介绍如何使用Puppeteer结合CSS选择器爬取动态网页数据,以贝壳网的二手房价格为例,通过代理IP提高爬虫成功率。文章详细讲解了Puppeteer的安装和配置、代码实现及数据趋势分析,帮助读者掌握动态网页爬取技术。
Puppeteer教程:使用CSS选择器点击和爬取动态数据
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
256 91
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
64 28
|
2月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
49 15
|
2月前
|
前端开发
|
2月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
3月前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
|
3月前
|
前端开发
CSS3入门
【8月更文挑战第23天】CSS3入门。
34 3
|
3月前
|
前端开发 JavaScript 程序员
后端程序员的前端基础-前端三剑客之CSS
后端程序员的前端基础-前端三剑客之CSS
40 8
|
3月前
|
前端开发 开发者
太惊艳了,这些都是CSS的入门知识!
太惊艳了,这些都是CSS的入门知识!