如果把网页比作一个人的话，html就是他的骨架，而css是他的皮肤，javascript是神经控制着行动。html，css，javascript都是构建网页的核心技术。

CSS简介

css指的是层叠样式表（Cascading Style Sheet），样式就是定义如何显示html元素，设置它的背景、字体大小颜色、边框等等。通常把样式存储到样式表中，为了代码简洁便于维护，大多数放置在css文件中，引入外部css文件，css文件就是一个外部样式表。

css是如何工作的？

在《HTML元素属性及意义》那一节课程中，我们讲大多数标签都有的style属性，是规定元素的行内样式。现在我们开始设置下hello word 字体大小为40像素

<body style="font-size:40px">

  hello world

</body>

刷新网页，我们发现网页内字明显大了。

css语法介绍

css语法规则集由选择器和声明块组成。选择器指的就是您要设置样式的html元素。如标签名（body ，h1,p,div...）就是一个选择器。

在《 HTML文档结构》中讲过head头部可以添加style样式表。所以上边body标签内的样式可以移出来放到head中，如：

<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

   body{

    font-size:40px

   }

  </style>

 </head>

 <body>

   hello world

 </body>

</html>

css代码注释：用于对代码的注释或者解释代码，以 /* 开始，以 */ 结束。如：

p{

    font-size:16px; /* 设置p标签内的文字大小为16像素 */

}

练习题：如果我们需要写两个各10条数据的列表，第一个列表字体是16px，第二个列字体大小是20px，我们该如何写代码呢?

CSS从入门到喜欢，从喜欢到着魔的更多相关文章

  1. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  2. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  3. CTF---密码学入门第二题 我喜欢培根

    我喜欢培根分值:20 来源: Ph0enix 难度:中 参与人数:3449人 Get Flag:1410人 答题人数:1653人 解题通过率:85% key: CTF{} 解题链接: http://c ...

  4. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  5. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  6. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  7. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  8. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  9. web前端开发分享-css,js入门篇（转）

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

随机推荐

  1. arm，asic，dsp，fpga，mcu，soc各自的特点

    arm,asic,dsp,fpga,mcu,soc各自的特点 人工智能受到越来越多的关注,许多公司正在积极开发能实现移动端人工智能的硬件,尤其是能够结合未来的物联网应用,对于移动端人工智能硬件的实现方 ...

  2. Yolo：实时目标检测实战（上）

    Yolo:实时目标检测实战(上) YOLO:Real-Time Object Detection 你只看一次(YOLO)是一个最先进的实时物体检测系统.在帕斯卡泰坦X上,它以每秒30帧的速度处理图像, ...

  3. .NET平台系列21：云原生时代 .NET5 雄霸天下

    系列目录     [已更新最新开发文章,点击查看详细] 随着互联网持续高歌猛进,相关技术名词也是层出不穷.微服务.容器化.DevOps.ServerLess.FaaS,这两年最火的当属云原生Cloud ...

  4. Redis系列（一）：安装

    本系列介绍Redis,从安装到使用,太简单的使用不介绍了,介绍一些比较有意思的功能,也会介绍一些原理性的东西.本篇先介绍Redis的单实例安装.Redis还可以做到高可用,通过哨兵和集群可以做到高可用 ...

  5. 『言善信』Fiddler工具 — 13、Fiddler断点功能的使用详解

    目录 1.Fiddler断点的应用 2.断点的分类 3.设置全局断点 (1)设置before Requests全局断点: (2)设置After Responses全局断点: 4.设置局部断点 (1)设 ...

  6. .NET Worker Service 作为 Windows 服务运行及优雅退出改进

    上一篇文章我们了解了如何为 Worker Service 添加 Serilog 日志记录,今天我接着介绍一下如何将 Worker Service 作为 Windows 服务运行. 我曾经在前面一篇文章 ...

  7. MySQL的Limit 性能差？真的不能再用了？

    首先说明一下MySQL的版本: mysql> select version();+-----------+| version() |+-----------+| 5.7.17 |+------- ...

  8. 安装Apache、Nginx和PHP-基于Centos7环境

    使用的软件:putty或Xshell都可. 一.搭建Apache 1.编译安装 (1).安装编译器 yum install -y gcc (2)安装Opensll 查询官网得到OpenSSL下载网址h ...

  9. open数据库报错ERROR at line 1: ORA-03113: end-of-file on communication channel Process ID: 3880 Session ID: 125 Serial number: 3

    1.今天打开数据时,失败,报错 ERROR at line 1:ORA-03113: end-of-file on communication channelProcess ID: 3880Sessi ...

  10. 『无为则无心』Python基础 — 9、Python字符串的编码与转义

    目录 1.查看变量类型 2.转义字符 (1)转义字符说明 (2)示例 (3)常用转义字符对照表 3.字符编码 (1)字符编码介绍 (2)Python中的字符编码 (3)编码格式应用于不同场景 提示:上 ...