【freecodecamp】HTML5和CSS知识点

一、CSS选择器

<style>
  选择器 {属性名称: 属性值;}
</style>

1、元素选择器

元素名{属性名称: 属性值;}

2、类选择器

.类名{属性名称: 属性值;}

在HTML元素中声明class="类名"。

3、id选择器

#id名{属性名称: 属性值;}

在HTML元素中声明id="id名"。

二、CSS字体

1、字号font-size ，用px表示

2、字体font-family

3、字体颜色可用color或在HTML中设置属性style="color: 颜色"。

三、CSS边框

1、颜色 border-color

2、宽度 border-width

3、样式 border-style

4、圆角 border-radius，圆形设置为50%

四、超链接

1、死链接href=”#”

五、边距和边框

1、元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

2、元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。如果你将一个元素的 margin 设置为负值，元素将会变大。

3、除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，

举例如下：padding: 10px 20px 10px 20px;这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

 

六、CSS样式的覆盖

声明在下面的类选择器覆盖前面的，元素选择器覆盖类选择器，内联style覆盖其他的。

七、CSS颜色表示

1、六位数的十六进制：#ffffff   红、绿、蓝

2、RGB表示：rgb(0,0,0)  红、绿、蓝

 

八、响应式框架Bootstrap

1、添加代码

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

2、把所有的HTML内容放在class为container-fluid的div下。

3、图片适应宽度：class为img-responsive

4、居中文字：class为text-center

5、bootstrap风格按钮：class为btn

通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。class为btn-block。

深蓝色按钮:btn-primary 浅蓝色：btn-info 红色：btn-danger

6、响应式网格布局

子元素放进<div class="row"> 元素里，每一个子元素都各自被一个 <div class="col-xs或者md-数字"> 元素包裹。

7、通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。例如：<p>Top 3 things cats <span class = "text-danger">hate:</span></p>

九、Font Awesome图标库

Font Awesome 是一个非常方便的图标库。这些图片都是矢量图，以 .svg 文件格式保存。这些图标用起来就像字体一样。你可以使用像素单位来指定他们的大小，它们会继承父级HTML元素的字体大小。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：

<i class="fa fa-info-circle"></i>

使用 Font Awesome 分别为你的 like 按钮中增加一个 fa-thumbs-up 图标， info 按钮添加 fa-info-circle 图标，为你的 delete 按钮添加 fa-trash 图标，为button 提交按钮上添加fa-paper-plane 。