鉴于日前加入了一个python学习小组，本人决定努力学习前端知识，以便成为群里的异类。我的异类之路，无人能挡！
2015年4月6日－4月12日(第一周)：
之前已经在teamtreehouse开始了相对应的课程，选择了前端web开发方向。所以说目前已经有了一些进度，如下图我已经完成第一个how to make a website课(大约有七八个小时的estimation study time)：
美妙实惠的进度表
这一周的目标就是接着完成下边的css basics课程，不多说。能持续学习下去就好。
4月7号笔记与进度更新：
我的小主页
本来想着既然要学习前端技术，最好的练习方式当然是马上能上线个网站是最好的了。但是毕竟水平还略差，于是乎折中选择了利用github pages建立一个小博客(jekyll是个好东西)来记录自己学习的过程（点击这里可以进入我的博客）。说实话，这玩意还挺不容易，尤其是我的mac在安装jekyll过程中出现了一些问题，花了好几个小时都没解决。最后无奈地看着terminal里出现的大量bug提示信息中某一行说下载一个东西安装就好，试了试还真成功了！(因为之前也看到各种人回答说下载某某东西就好但是下载安装了还是没解决，所以本来对这提示信息不抱希望)
简而言之，今天还真没什么笔记，今天动手实际弄出来了一个网站，就算是一个很大的进步吧，也算是一个优秀的进度（就是今天没有浪费时间，解决了很多问题，做出了实际东西的意思）。博客里的美化会慢慢好起来的，这需要看看jekyll的文档。
不过得到的启示就是，不要觉得某件事难就不去做，当真的做起来并解决它的时候，即使花费了不少时间，收获还是很巨大的。
4月8日笔记与进度更新：
昨天的日志里没有和主页统一风格，就只是一个单纯的HTML页面（如下图），一直在想是怎么回事。直到今天又一次看了jekyll的入门教程，发现了我没在文章文件开头写layout的变量格式。感觉一下解决了心病！
一个普通的HTML页面
还有一个问题就是因为昨天看着界面很丑，今天花了大量时间在寻找各种主题。最后却啥也没收获，只是迷乱了双眼，忘却了开启这个博客的本心是为了学习记录，而不是马上就美化它。不过幸好及时醒悟，学习了css basics下两个小节的内容，还有5个小节，每个小节花费的时间是不等的。比如这两个我大约花了2个多小时。
每个小节都有各自侧重点
小节里的内容例子
至于笔记，我这个人说实话不太记笔记，以后得改改。因为突然这里感觉已经不是正常的笔记记录了，而是心情经验吐槽记录。最近有点忙，明天不知道能看多少。
让我们回归这周的CSS任务，争取能学多少是多少。
Understanding Values and Units
Every CSS property has a set of values it can accept. Most properties accept keywords that literally describe a value. Many properties also accept numbers, functions, length values, or a URL.
CSS Data Type
CSS中length变量的Quick Reference:
关于长度变量px的绝对长度部分解释
For high-dpi devices, inches (in), centimeters (cm), millimeters (mm) are defined as their physical counterparts. Therefore the px unit is defined relative to them (1/96 of 1 inch).
- Relative to the viewing device.
- For screen display, typically one device pixel (dot) of the display.
- For printers and very high resolution screens one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96.
Em Units
Relative length units are relative to other length values. The most commonly used relative unit is the em unit. The em is known as a font-relative unit because it's calculated based on a parent element's font size. (Body default font-size is 16px.)
Tools for PX to EM conversion made simple
Rem Units
The rem unit is similar to the em unit. The difference is that rem is relative only to the root element of the page. This gets us around the compounding font size issue we experience with em units.
Quick Reference: Font sizing with rem
Color values
With CSS, we can describe a color value in different ways. The three most common ways are with a keyword, a hexadecimal value, or an RGB function.
Hexadecimal values
.main-header {
background-color: #ff0033;/* equals to #f03 */
}
RGB Values
a:link {
color: rgb(255, 169, 73);
}
RGBa Values(can be transparent)
a:hover {
rgba(255, 169, 73, .4)
}
Text Styles
text-align
Let's us control the horizontal alignment of text.
text-transform
Changes the case of text – whether it's uppercase, lowercase, or capitalized.
text-decoration
Sets the line decoration of elements. We'll commonly use this property to remove underlines in links.
font-weight
Sets how thick or thin the characters are displayed.
Font Properties
Like text properties, font properties let us change the appearance of text by assigning a font family, font size, font style, and more.
CSS Font stack generator for web safe fonts
font-family
Defines a typeface for our text.
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;/* 如果你的电脑没有第一个字体，则显示第二个，第二个也没有就第三个这样。字体名字中有空格的要用""围起来。
font-style
Allows italic or oblique faces to be selected within a font family.
Line Height
With the line-height property, we can increase, or decrease, the vertical gaps between lines of text.
Font
A shorthand property that lets us write all the font properties in one value.
body {
font: normal 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
网友评论