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 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
随机推荐
- 整数划分——区间dp（石子合并）
这不是将一个数以一来划分,而是把一个整数以位来划分 题目描述 如何把一个正整数N(N长度<20)划分为M(M>1)个部分,使这M个部分的乘积最大.N.M从键盘输入,输出最大值及一种划分方式 ...
- 3D惯导Lidar仿真
3D惯导Lidar仿真 LiDAR-Inertial 3D Plane Simulator 摘要 提出了最*点*面表示的形式化方法,并分析了其在三维室内同步定位与映射中的应用.提出了一个利用最*点*面 ...
- Linux芯片驱动之SPI Controller
针对一款新的芯片,芯片厂商如何基于Linux编写对应的 SPI controller 驱动? 我们先看看 Linux SPI 的整体框架: 可以看到,最底层是硬件层,对应芯片内部 SPI contro ...
- 【VBA】显示所有隐藏的名称管理器中的名称
Excel提示这个 代码: Sub DisplayNames() Dim Na As Name For Each Na In ThisWorkbook.Names Na.Visible = True ...
- 用好idea这几款插件，可以帮你少写30%的代码
Easycode是idea的一个插件,可以直接对数据的表生成entity,controller,service,dao,mapper,无需任何编码,简单而强大. 1.安装(EasyCode) 我这里的 ...
- Redis哨兵的配置和原理
哨兵 在一个典型的一主多从的Redis系统中,当主数据库遇到异常中断服务后,需要手动选择一个从数据库升级为主数据库,整个过程需要人工介入,难以自动化. Redis2.8提供了哨兵2.0(2.6提供了1 ...
- 【模拟7.19】那一天我们许下约定(组合数学，DP)
看了题目名字深切怀疑出题人是不是失恋了,然后出题折磨我们.然后这题就愉快的打了个暴力,最后莫名其妙wa20,伤心..... 其实这题正解不是很难想,如果说把暴力的DP搞出来,正解也差不到哪去了, 我们 ...
- Mysql优化（出自官方文档） - 第六篇
Mysql优化(出自官方文档) - 第六篇 目录 Mysql优化(出自官方文档) - 第六篇 Optimizing Subqueries, Derived Tables, View Reference ...
- （Element UI 组件 Table）去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Docker搭建EFK日志收集系统，并自定义es索引名
EFK架构图 一.EFK简介 EFK不是一个软件,而是一套解决方案,并且都是开源软件,之间互相配合使用,完美衔接,高效的满足了很多场合的应用,是目前主流的一种日志系统. EFK是三个开源软件的缩写,分 ...