【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 。