CSS from freecodecamp

完整代码in gist:
catApp-CSS
catApp-CSS+bootstrap

html

in CSS style element, classes should start with a period. 如果直接给h，p这样的元素加属性，不需要period

<style>
    .blue-text {
        color: blue;
      }
     p {
        font-size: 16px;
        font-family:Sans-serif;
      }
</style>
.
.
<p class=".blue-text">ppp</p>

import google font

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:

p {
  font-family: Helvetica, Sans-Serif;
}

All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
给img加一个边框

 .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
//这个radius可以设成px，现在这个50%的效果是把方形图片变成圆形很好看
    border-radius: 50%;
  }

Nesting just means putting one element inside of another element.
Make Dead Links using the Hash Symbol

 <a href="#">cat photos</a>

Your placeholder text is what appears in your text input
before your user has input anything.

<input type="text" placeholder="this is placeholder text">

form

<form action="/url-where-you-want-to-submit-form-data"></form>

if you wanted to make a text input field required, you can just add the word required within your input element, you would use:

 <input type="text" required>

radio buttons H5中的单选框吧
for questions where you want the user to only give you one answer.

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

checkbox

<label><input type="checkbox" name="personality"> Loving</label>

checked 就是默认标记吧，有checked的直接默认被选中

<label><input type="checkbox" checked name="personality"> Loving</label>

id 除了class外下一个attr,jquery 的时候很有用,都可以在css中指明位置设置样式，class前面必须有. id前面必须有#
Inherit Styles from the Body Element

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
</style>
<h1>Hello World!</h1>
//helloworld是绿色

如果遇到冲突：
class= “class1 class2” class2（在css style里后设置的）会生效,
class 和id， id不论先设置还是后设置都会生效（ id declarations override class declarations, regardless of where they are declared ）
inline style优先级比id更高
css中!important比inline高

css/style !important>inline style>id>class2>class1

#orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

You can use spans to create inline elements.

Bootstrap

Font Awesome is a convenient library of icons.

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

iatlic 斜体的

CSS from freecodecamp

html

Bootstrap

推荐阅读更多精彩内容