CSS从入门到喜欢，从喜欢到着魔
如果把网页比作一个人的话，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从入门到喜欢，从喜欢到着魔的更多相关文章
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- CTF---密码学入门第二题 我喜欢培根
我喜欢培根分值:20 来源: Ph0enix 难度:中 参与人数:3449人 Get Flag:1410人 答题人数:1653人 解题通过率:85% key: CTF{} 解题链接: http://c ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- web前端开发分享-css,js入门篇（转）
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
随机推荐
- win系统下如何安装xgboost，开发环境是anaconda，以及这中间需要注意的问题
最近学到了xgboost,但是anaconda并没有这个环境只好自己安装了... 注: (1)并没有测试anaconda在2.x的版本下是如何安装的, 基本上应该是大同小类的,我的anaconda版本 ...
- 无网络的win10电脑之间实现相互共享文档
产生需求的原因: 之前做过在有网的情况下,两台win10的电脑怎么在不使用任何第三方软件的情况下实现两者之间的文件共享,但是在完成之后,我猛然间想到一种情况,那就是如果两台wiin10的电脑如果没有网 ...
- LeetCode 每日一题「判定字符是否唯一」
我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 题目 ...
- JVM系列(五)：gc实现概要01
java的一大核心特性,即是自动内存回收.这让一些人从繁琐的内存管理中解脱出来,但对大部分人来说,貌似这太理所当然了.因为现在市场上的语言,几乎都已经没有了还需要自己去管理内存这事.大家似乎都以为,语 ...
- 即时性能分析工具 Pyroscope
当网站上线后,流量增加或短暂功能故障,都会造成使用者体验相当不好,而这时该怎么快速找到性能的瓶颈呢?通常 CPU 达到 100% 时,有时候也很难复制及找出关键问题点. 本篇文章,我们会介绍一套工具叫 ...
- 【VBA】列号与字母（列名）的相互转换 （自定义函数）
1. '列号转字母(列名) Function Num2Name(ByVal ColumnNum As Long) As String On Error Resume Next Num2Name = & ...
- 深度解密：Java与线程的关系
并发不一定要依赖多线程(如PHP的多进程并发),但在Java中谈论并发,大多数都与线程脱不开关系. 线程的实现 线程是CPU调度的基本单位,Thread类与大部分的Java API有显著的差别,它的所 ...
- 利用 iOS 14 Vision 的手势估测功能 实作无接触即可滑动的 Tinder App
Vision 框架在 2017 年推出,目的是为了让行动 App 开发者轻松利用电脑视觉演算法.具体来说,Vision 框架中包含了许多预先训练好的深度学习模型,同时也能充当包裹器 (wrapper) ...
- 【题解】codeforces 1B Spreadsheets
题意翻译 人们常用的电子表格软件(比如: Excel)采用如下所述的坐标系统:第一列被标为A,第二列为B,以此类推,第26列为Z.接下来为由两个字母构成的列号: 第27列为AA,第28列为AB-在标为 ...
- Pandas高级教程之:处理text数据
目录 简介 创建text的DF String 的方法 columns的String操作 分割和替换String String的连接 使用 .str来index extract extractall c ...