免费下载!程序员入门系列教程之《零基础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

相关文章
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
53 0
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
12天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
35 2
|
14天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
50 0
|
15天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
41 1
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1
|
2月前
|
前端开发 JavaScript API
|
3月前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
43 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList