推荐编辑器：Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE)；

Style Master, Dreamweaver or GoLive

For HTML and CSS, we want simple, plain text files.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">DOCTYPE means DOCument TYPEBetween <head> and </head> there is room for various kinds of information that is not shown on screen.<body>里的就是用来显示的了~

'2em' means 2 times the size of the current font.

什么是CSS及使用的好处：

cascading Style Sheet：层叠样式表

控制网页样式、能将样式信息与网页内容分离的、一种标记性语言。

不需要编译，由浏览器执行。为浏览器解释型语言。

作用于：页面布局、字体、颜色、背景、特效等。

相关组织和历史：

1994提出、1996年浏览器支持、W3C（world wide web consortium）的CSS组。

1996、CSS1；

1998、CSS2；目前是CSS2.1；

CSS3 已经开始应用了~

可用于多种设备：手机、电视、打印机、幻灯片等。

比传统HTML的优势（内容老啦，可忽视）：控制、排版（对应：html的标记）；

　　提高网页浏览速度：table全加载完显示？css加载点显示点？

　　可维护性、易维护性、SEO等。

CSS基本语法：

　　a{font-size:12px;font-family:"Microsoft Yahei";display:inline-block;}　

　　.last{}/*类选择符*/

　　#last{}　/*ID选择符，局限性很大。我个人不喜欢在html结构中使用id。*/

　　H1, H2, H3 { font-style: bold }/*合并多个selector*/

　　CSS1 定义了50种。　　CSS2 在CSS1的基础上增加了70种，定义了大概120种属性。

HTML里使用CSS的方式，一般四种：

1. 直接写在标签里。

<span style="display:block;height:20px;">我不喜欢这样写。不建议。</span>

2. 在header头里加一段css代码。

<style type="text/css">/*MIME类型，浏览器不支持CSS，则会过滤掉。一般不建议。*/

　　li{list-style-type:none;}　

</style>

3. 在header头引入一个css文件。一般都用这种方式。

<link rel="stylesheet" type="text/css" href="./t1.css">

4. @import 引入。

浏览器和CSS：

　　兼容性问题；

　　是否支持CSS。<style type="text/css"></style>（现在）| <!--注释-->（过去）

　　<style type="text/css"></style> 告知浏览器引入文件的类型，支持也读文件，不支持忽视之。

树结构与继承:

　　子节点通用样式可以放在父节点写，（代码重构）样式预设；

　　也增加了可读性。（书写规范）

重写：

　　能够重写是因为：更具有指向性。更具体。

　　　　　　　　　　与顺序无关！？

不是所有的属性都可继承！

　　比方说：background...

　　你在body上写个background，再看它的子节点，你会发现。。

　　why？

　　　　There are two reasons: first, transparent backgrounds are faster to display (there is nothing to display!) than other ­backgrounds.

　　　　元素背景默认为 transparent。

　　　　Second, since background images are aligned relative to the element they belong to, you would otherwise not always end up with a smooth background surface.

　　Tips：如果background 属性存在时，记得增设一个 color 值。确保文字和背景不一致~？

问题：需要研究下CSS的继承性~对于每个属性的继承性~

转载于:https://www.cnblogs.com/hanyuxinting/p/4092722.html

仔细学习CSS（一）相关推荐

  1. 仔细学习CSS（二）

    这样学习果然很浪费时间.但是我好像再也找不到其他方式可以系统过一下了.. 1. font 可继承的. H1 {font-size: 36pt;font-family: serif;font-style ...

  2. css flexbox模型_5分钟内学习CSS Flexbox-初学者教程

    css flexbox模型 快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...

  3. 从0学习css开发之 font-size的基本用法

    从0学习css开发之 font-size的基本用法 定义和用法 设置字体的大小. 语法 font-size: 12px; 语言 语法 Javascript object.style.fontSize= ...

  4. html css做网页总结,学习CSS制作网页总结的一些经验

    学习CSS制作网页总结的一些经验 互联网   发布时间:2008-10-17 19:28:20   作者:佚名   我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...

  5. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  6. 学html css之前,学习CSS前必知HTML基础

    对于很多网页设计0基础的初学者而言,刚一接触css都会感觉云里雾里,不知怎样学习与理解.想当初小编也是这样,在什么基础都没有的前提下,直接看CSS.结果感觉好像在看天书一样.后来向大神请教之后才知道, ...

  7. [译] 如何学习 CSS

    原文地址:How To Learn CSS 原文作者:Rachel Andrew 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:Mcskiller 校对者 ...

  8. css知多少（2）——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  9. HTML，css和JavaScript的基础学习—css篇

    HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...

最新文章

  1. PHP读取EXCEL
  2. [译]ChipMunk 教程1 - 设置
  3. android自定义进度条渐变色View，不使用任何图片资源
  4. windows中端口号（port id）和port的区别，如何通过端口查看进程pid，如何通过pid查看程序，如何通过pid查看端口？
  5. ABAP vs Java， 蛙泳 vs 自由泳
  6. c#：细说时区、DateTime和DateTimeOffset在国际化中的应用
  7. 如何使用CSS将文本垂直居中?
  8. 任务驱动在计算机教学中的应用,浅谈任务驱动法在《计算机应用基础》教学中的应用_优秀论文...
  9. 解决微信小程序的video元素层级太高无法遮盖问题
  10. Android 开机动画的制作
  11. Flutter Opacity 不透明度
  12. springcloud Ribbon详解
  13. e4a换行_这个易语言代码用E4A怎么写？
  14. with dlz mysql 条件_BIND+DLZ+MYSQL
  15. Solidworks如何生成爆炸图
  16. python五子棋课程设计报告_算法课程设计：使用Python完成可视化的五子棋AI
  17. 【MM32F5270开发板试用】六、如何用 星辰内核 + 国产RTOS 通过I2S播放 “星辰大海”
  18. 一间计算机教室用英语怎么说,一间电脑室是什么意思
  19. 核查清单-小程序分享功能
  20. WebCollector初学教程

热门文章

  1. Python正则表达式如何进行字符串替换
  2. [react] 在使用react过程中什么时候用HOC？
  3. [react] create-react-app有什么好处？
  4. [react] constructor和getInitialState有不同？
  5. [html] 写html代码时，如果缺少了结束标签，你如何检测及如何预防？
  6. [vue] v-model是什么？有什么用呢？
  7. 前端学习（2672）： vue3.0脚手架路由改变
  8. mybatis学习(41):使用逆向工程
  9. 第三十八期:如何在Windows 10上使用Windows Update目录驱动程序安装打印机
  10. Linux Qt打包应用程序--利用linuxdeployqt