萌新编程笔记之CSS入门

接上一篇HTML入门，依然是来自Udemy的课程“The Web Developer Bootcamp”，在搭建好网站的骨架之后，就该做皮肤啦！CSS决定了整个网站的style，做好的话能让网站低调奢华上档次，所以……继续愉快的学习吧😉

CSS基础

CSS的全称是Cascading Style Sheets，定义了网页的风格，是网站的皮肤，是“形容词”。比如：”给我紫色的字，给第一张图一个黄色的边儿…”

在开始之前，可以去CSS Zen Garden看看同样的HTML文档，可以有多少种不同的外观~

CSS基本规则

选一个基本元素—选择要赋值的属性——放在{里面}

selector {
    property: value;
    anotherProperty: value;
}

下面举两个例子：

/* Make all h1's purple and 56px font*/
h1 {
    color: purple;
    font-size: 56px;
}
/*Give all img's a 3px red boarder*/
img {
    border-color: red;
    border-width: 3px;
}

CSS Stylesheet

CSS文档和HTML最好分开放，然后通过在HTML文档的<head>里加入link tag把二者连接起来。

1
2
3

<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="todos.css">
</head>

除了将CSS样式定义在外部文件，还有两种不够好的定义方法，分别是定义在页头head里和定义在行内：

Style Tag: 写在html的最开头，<head>里，样式只在当前页面生效

<head>
    <style type="text/css">
    选择器写在这里
    </style>
</head>

Inline: 在元素的行内定义，多用于测试和debug
1
<h3 style="color: pink;">blah blah blah</h3>

CSS中的颜色

CSS种颜色的语法有好几种，最常用的三种为HEX，RGB，和HSL。熟悉PS和AI的小伙伴应该都不会陌生，下面挨个解释一下语法。

HEX Colors

Hex的全程是Hexademical，意思是十六进制的颜色系统。

1	#RRGGBB: 每个位置的取值是从0到F

一般我们会用个颜色拾取器来确定颜色的代码，比如配色网站：coolors.co.

1
2
3

h1 {color: #ff0000;}  /* red */
h2 {color: #00ff00;}  /* green */
h3 {color: #0000ff;}  /* blue */

补充：常用数字系统

Decimal - 十进制，0-9
Binary - 二进制，0和1
Hexadecimal - 十六进制，0-9 + A-F

RGB Colors

红绿蓝。

1	rgb(_, _, _): rgb(red, green, blue)

不同于十六进制颜色，RGB仍然是10进制的。rgb的取值都是0-255。

h1 {color: rgb(255, 255, 255);}  /* white */
h2 {color: rgb(0, 0, 0);}  /* black */
h3 {color: rgb(255, 0, 0);}  /* red */
h4 {color: rgb(0, 255, 0);}  /* green */
h5 {color: rgb(0, 0, 255);}  /* blue */

RGBA Colors

红绿蓝+Alpha透明度。

1	rgba(_, _, _, _): rgba(red, green, blue, alpha)

Alpha的取值是0.0到1.0。

1	h1 {color: rgba(11, 99, 150, 0.6);}

HSL Colors

色相，饱和度，亮度。

1	hsl(hue, saturation, lightness)

色相取值是色环上的数值，取值范围0到360，0或者360是红色，120是绿色，240是蓝色；
饱和度取值是一个百分比，0%是灰色，100%是全彩；
亮度取值也是一个百分比，0%是黑色，100%是白色

h1 {color: hsl(120, 100%, 50%);}  /* green */
h2 {color: hsl(120, 100%, 75%);}  /* light green */
h3 {color: hsl(120, 100%, 25%);}  /* dark green */
h4 {color: hsl(120, 60%, 70%);}  /* pastel green */

HSLA Colors

色相，饱和度，亮度，透明度。

1	hsla(hue, saturation, lightness, alpha)

HTML+CSS预设颜色

有140多种颜色名字是提前预设的，点这里可以查看predefined color names.

背景的设置

背景可以是颜色、图片或者花纹。如果是小图案的重复平铺，可用设置background-repeat来达到目标；如果图片背景足够大，可以用background-size:cover来覆盖全屏。

body {background: #ff0000;}  /* red */
body {
    background: url(http://www.maimi.com/maimi.jpg)
	background-repeat; no-repeat;
	background-size: cover;}

边框的设置

边框的三要素是width线宽、style虚实和color颜色。wsc！

1 2	border: width, style, color; h1 {border: 2px solid #555753;}

CSS选择器

在开始聊CSS选择器之前，先来回顾一下CSS的基本规则：

1 2	selector {property: value;} 选择器 {声明：属性&对应取值}

那么选择器究竟有多少种呢？MDN上的Selector (CSS)页面可以给大家作为参考。常用的选择器主要分为标签（也叫类型）选择器、类选择器和ID选择器。

类型选择器

elementname - type selector，也叫tag selector（标签选择器）。选择某种元素，一起修改生效。比如全部h1，全部div。

1 2	/* 给全部的表单项"红色实线边框，线宽2px" */ li {border: 2px solid red;}

类选择器

.classname - class selector，为元素指定类名，按类选择，给第一类一个效果，第二类另一个效果。文档中的多个元素可以拥有同一个类名。

CSS Demo: text-decoration

/* 把表单中已经完成的项目划掉，未完成的保留 */
/* 在.html中 */
<li class="completed">
	<input type="checkbox">Walk the dog</li>
/* 在.css中 */
.completed {text-decoration: line-through;}

ID选择器

#idname - id selector，通过设置元素的id属性，为元素定制ID，每个ID在文档中必须是唯一的。

<p class="key" id="principal">
.key {
    color:green;
}
#principal {
    font-weight: bolder;
}

属性选择器

[attr=value] - attribute selector，根据所给属性的赋值匹配元素：

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

伪类选择器

又叫pseudo-classes selectors，CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 表示鼠标悬停在选中元素上时应用相应的样式。常用的伪类和伪元素有：

:visited - 浏览历史，是否访问过
:checked - 内容状态
:hover - 鼠标位置

而他的语法也同样跟随CSS类选择器的语法：

1
2
3

selector:pseudo-class {
  property: value;
}

元素样式的层叠和继承

Inheritance & Specificity。在CSS中，我们可以有不同的样式指向同一个元素，真正生效的是最专一指向这个元素的style。层叠机制其实很简单：

Importance > Specificity > Source order

重要性>专用性>源代码次序

内联样式会覆盖外部样式，拥有最高优先级。

如何计算Specificity(权重)？

Specificity Calculator

CSS Specificity: Things You Should Know

MDN - CSS Specificity

小结：30个必须熟记的CSS选择器🙂

选择器是CSS里最重要的部分了，虽然有很多很多选择器，但真正需要熟记的只有30个哦亲！只有30个！好记不好记！想背不想背！然而我并没有熟记呢科科🙃

英文版：https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

简体中文版：https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048

CSS进阶

文字与字体

font-family - 为了确保自己定义的字体在每个人的电脑上都能生效，最好找对Mac和Windows都友好的字体，不然就用自定义上传的字体。用CSS Font Stack可以查到兼容度。

font-size - 用px/em/rem取决于用户的浏览器，rem的适配最好，多数浏览器默认16px=1.0em，更多换算请看这篇文章：EM vs REM vs PX – Why you shouldn’t “just use pixels”. 以及中文版：px、em、rem区别介绍。

font-weight - 范围是100到800，8种从Ultra Light-Regular-Heavy-Black

line-height - 行距，一般都用1.5倍。

text-align - 文字对齐，左/右/居中。

text-decoration - 下划线/划掉/etc…

*用Bacon Ipsum可以生成随意的段落字体

使用Google Font

Google Fonts可以直接选择字体，embed到自己的html文件<head>的最上面。

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
.css-selector {
  font-family: 'Open Sans', serif;
}

引用的链接可以直接从Google Font的购物车里得到，如下图：

Google Font嵌入界面

做出更多字体效果请见Google Fonts API

使用自己的字体方法请见MDN上的@font-face

The Box Model

HTML中的每个元素都在一个长方形的box中，是网页布局的基础，下图可以帮助理解：

The Box Model

四个元素

Four Elements of Box Model

width/height - 决定内容框(content box)的高度和宽度，直接写width和height的时候指的都是element的长宽。

padding - 内边距(inner margin)，可控属性有top, right, bottom, left.

border - 边界，位于内边距的外边缘以及外边距的内边缘之间，默认大小为0，不可见。

margin - 外边距，包围CSS Box，把其他CSS Boxes推开，和padding语法一致。

用百分比赋值支持responsive layout

不用绝对尺寸，而用百分比来赋值。还可以用min-width, max-height.

p {
	width: 50%;
	height: 150%;
	border: 1px solid pink;
}

margin和padding的赋值顺序

上-右-下-左，top-right-bottom-left

1	margin: 20px 50px 100px 150px

margin: 0 auto; 上下为0，左右居中

练习题

1. Tic Tac Toe Board

第一个作业是用表格来做一个九宫格Tic Tac Toe游戏棋盘。简单得来说，就是把中间一列的单元格+左右的border，把中间一行的单元格+上下的border.

Tic Tac Toe

<head>
/* 定义单元格样式和对应的类 */
td {
    width: 100px;
    height:100px;
}
/* 定义上下两条边界线为水平 */
.horizontal {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
/* 定义左右两条边界线为竖直 */
.vertical {
    border-left: 1px solid black;
    border-right: 1px solid black;
}
/* 把表格居中 */
table {
    margin: auto;
}
</head>
<body>
<table>
	<tr>  /* 第一行 */
		<td></td>
		<td class="vertical"></td>
		<td></td>
	</tr>
	<tr>  /* 第二行 */
		<td class="horizontal"></td>
		<td class="vertical horizontal"><td>
		<td class="horizontal"></td>
	</tr>
	<tr>  /* 第三行 */
		<td></td>
		<td class="vertical"></td>
		<td></td>
	</tr>
<table>
</body>

最终效果就是一个无比简单的黑白Tic Tac Toe棋盘，见下图：

最终效果图

2. Image Gallery

第二个作业是做一个极简风格的摄影师作品集，一共由9张图组成。引入的新属性是float，这个属性就像我们以前用word的时候，图片浮动于文字之间的效果，这时候文字就会围绕着图片自行排列。

<head>
/* 定义图片的宽度和排列方式 */
img {
    width: 30%;  /* 每行三张图 */
    float: left;  /* 左对齐挨个排列 */
    margin: 1.66%;  /* 三对左右边缘各自占比 */
}
</head>
/* 九张图片的url引用 */
<body>
<img src="url-1.jpg">
<img src="url-2.jpg">
...
<img src="url-9.jpg">
</body>

最终效果图还是很漂亮滴：

Photography Portfolio

3. CSS Blog From Scratch

这项作业是一个非常综合性的作业，主要新引入的字体大小单位rem，以及<hr>分割线的style。

<div class="post">  /* 给每篇博客用div分隔 */ 
	<div class="date">Nov 23 2015</div>
	<h2>This Is My First Article</h2>
	<p class="quote">  /* Quote是单独的样式，用div */
	Bacon ipsum dolor amet capicola strip steak landjaeger, sirloin pork.</p>

	<p>Bresaola short ribs pastrami, beef ribs spare ribs kielbasa ham tongue kevin landjaeger chicken ball tip. Pork chop beef kevin strip steak, chicken pork belly pastrami ham hock flank shoulder chuck turkey ribeye andouille ball tip.</p>

	<p>Pork pig pork loin prosciutto meatball turkey beef ribs ground round. Rump pork chop t-bone.</p>
	<hr>  /* 分隔线形式在.css文件中自定义 */
</div>
<!-- <hr> -->
/* 以下重复上一段代码即可 */

最终效果图就是一个很简单的博客记录页面啦！

Blog

写在CSS的尾巴

CSS单元的学习让我终于可以给白底黑字的网页赋以好看的样式了，非常开心！

这章的内容还有很多需要在实战中不断练习，比如那30个必须掌握的选择器，以及各种案例中该如何聪明的使用The Box Model。

编程路漫漫，但是我非常开心自己选择了一点点的攻克它，在攻克它的过程中我也获得了很多有趣的感悟和实用的技能。Happy Coding!