零基础小白前端学习之初始CSS

现在的互联网前端分为三层：

HTML:超文本标记语言。从语义的角度描述页面结构
CSS:层叠样式表。从审美的角度负责页面样式
JS:Javascript。从交互的角度描述页面的行为
css它是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观。比如大家耳熟能详的购物网站：淘宝、京东、小米等等。

1.认识css

CSS全称为“层叠样式表”(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等等。

如下代码：

p {font-size:12px;color:red;font-weight:bold;
}
在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，
不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，
欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。
好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  每天更新最新技术文章干货。

代码解释：

使用css样式的一个好处是可以通过定义某个样式，可以让不同网页位置的文本有着统一的字体、字号或者颜色。比如上面代码就是选中了页面中所有的p标签来设置统一样式。

2.css的优势
那么，在哪里编写我们的css呢？接下来给大家介绍style标签。

style标签包含网页的样式信息。默认情况下，该标签的样式信息通常是CSS的格式。

比如：
我们网页中有一段文字小猿圈，帮助1000w人高效学编程，现在我想让小猿圈，IT技术免费学习平台这两个短语的文本颜色设置为红色，这时我们就可以通过设置样式来作用，而且只需要编写一条css样式语句。

第一步，新建index.html,将整段文字用

标签包括起来。

第二步，在head标签中使用

span{color:red;
}

第三步，用浏览器打开该网页,观察文字的颜色变为了红色

代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title><style type="text/css">span{color:red;}</style></head><body><p><span>小猿圈</span>，帮助1000w人高效学编程</p></body>
</html>

注意：单独将标语用span标签标示出来，不会影响文本的正常显示。如果再给span标签设置了样式，那么该span标签就体现了它的语义。
那么在网页中，尤其是文本，在不影响文本内容变化的情况下，并且将凸显的内容标识出来，我们就可以使用span标签再配合我们的css来修改样式。

效果展示：

3.css的语法

那么上节课咱们讲解完css的优势之后，我们重点来看一下，如果编写我们的css。

css样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符:我们又称为选择器，指明网页中应用样式规则的元素，如上述图中网页的所有§的文本变为蓝色，而其它元素(如ul,ol等等)不会受到影响。

声明：在英文大括号"{}“中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;"分割，如下所示：

p{font-size：12px;color:red;}

再举个例子有助于大家理解什么是选择符、属性、值

比如我家隔壁有三个人，并且有两个人同名，都叫王大大，并且身高是175，年龄都是20岁。还有一个人叫李小小，年龄18岁。那么我就可以这样表示。

王大大{身高:175cm;年龄:20岁;}

那么。王大大，就是选中了隔壁三个中的其中同名的两个人。叫王大大的这个两个人，他们有共同的特征，比如身高和年龄一样。那么这些特征我们称为叫声明。身高和年龄表示属性，175cm和20岁表示值。那么我们就能将这个人表示出来了。那么对比上述的例子，我们来看css的话，是否变得很简单呢？答案是的。

注意：

为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{font-size：12px;color:red;
}

4.css注释
在之前将HTML的注释的时候，我们讲解了它的作用，在这里就不一一阐述了，大家可以翻看html的注释，在css也有注释语句：

用/注释语句/来表明(html中使用)。就像下面代码：

/*设置段落默认样式*/
p {font-size：12px;color: red;
}

注意：css也有注释嵌套

零基础小白前端学习之初始CSS相关推荐

零基础小白怎么学习3D建模？过来人给的一些学习建议，先马后看
零基础小白学3D建模建议从以下三个方面学习: 一是学习软件,了解软件的功能,基本命令和操作.能熟练使用软件来雕刻东西,这方面练习方法就是自己动手去做,然后看相应教程,从别人雕刻全过程的视频中了解软件的 ...
零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
零基础web前端学习路线
很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取. 前端开发入门学习有:HTML.CSS.JavaScript(简称JS)这三个部分.所以在学习之前我们需 ...
零基础web前端学习路线【全新web前端入门视频教程】
零基础怎么学web前端?下面就一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础前端学习路线分享给大家. 适合零基础学员 ...
零基础小白如何学习UI设计
0基础学员小白想学习UI设计,一共有三个步骤,分别是准备阶段,了解阶段和学习阶段. 准备阶段一般来说一个零基础学员想要学习UI设计,就得先准备好软件只有下载好了软件我们才能进入下一步的学习,目前U ...
零基础小白适合学习3D游戏建模嘛？
其实这个是一个误区,以为自己没基础是小白就不合适学这个3D游戏建模, 因为所有的建模大佬都是从小白零基础开始的所以大胆放心的去做自己感兴趣的,或者跨出你想转行进入3D游戏建模行业的第一步就不要纠结 ...
♂【超全超详细】2W字零基础小白黑客学习路线，知识体系（附学习路线图）♂
前言: 这是外网曾经一篇很火的关于如何成为一个黑客的文章,虽然里面提到的一些技术可能有些过时,但就学习方法和思想上,仍然值得我分享给大家. 关注大师的言行, 跟随大师的举动, 和大师一并修行, 领会大 ...
python映射类型-Python 的映射数据类型有哪些？零基础小白入门学习必看
1 映射类关系 Python 的 collections.abc 模块内拥有 Mapping 和 MutableMapping 这两个抽象基类,它们为 dict 和其他类似的类型提供了接口定义. mu ...
零基础小白如何学习角色建模？这些流程步骤你一定要知道！
首先我们要了解下角色建模到底是什么? 第一步肯定是你得知道你要做什么模型?或者是公司指定你做的角色模型,又或者你自己想做的模型. 这就是构思,确定好要做的模型就可以进行下一步了. 3Dmax.Maya ...

零基础小白前端学习之初始CSS

零基础小白前端学习之初始CSS相关推荐

最新文章

热门文章