CSS describes how our structure will look. It is often inside a .css file. Sometimes you will hear me call it the “stylesheet” or simply “our styles/styling”.
CSS决定了我们HTML骨架的样式。CSS往往以.css结尾。所以我们经常叫CSS为样式表。
- In CSS you target the HTML you wrote previously with a ‘selector’.
- 在HTML里面我们使用选择器来定位HTML的区块。
- After the selector, you write your rules inside curly brackets.
- 在选择器之后，我们在大括号{ }里面写HTML的参数。
h1 {
color: blue;
font-size: 30px;
}
Where CSS can be written
CSS添加方式
There are 3 ways to add CSS:
有三种方式添加CSS:
Inline inside a HTML attribute
行内添加：也就是说在HTML属性里面添加，如下
<h1 style=”color: green;”>Patagonia R1 Hoody</h1>
2.Embedded in between HTML <style> tags
内嵌添加：在HTML里面的<style> 标签里面
<h1>Patagonia R1 Hoody</h1>
<p>Other content</p>
<style>
h1 {
color: green;}
p {color: red;}
</style>
3.In a separate file.
单独样式表文件引用添加
Classes and ID
类和ID
Above we are targeting all h1 headings across the website, but most of the time you want to be a bit more specific. So we use classes. This is like a name given to identify a particular html element.
在上面我们定位H1这个元素为全局样式（整个网站通用），但是有时候我们希望某个页面的H1有自己的特有样式。那么我们就用到了类。也就是说我们希望给某个特定的HTML元素一个特定的命名。
First we add the class in HTML, and then target it in CSS.
首先我们在HTML里添加一个class类，然后再CSS里定位这个类。代码如下：
<h1 class=”product-title”>Patagonia R1 Hoody</h1>
To target a class, we use a dot . or period before the class name.
我们在类class前面使用符号.来定位这个class类。
.product-title {
color: blue;
}
We can use dashes or underscores as part of our class name. They don’t affect the code.
在命名类名称的时候，我们可以使用破折号或者下划线，这不会对代码造成影响。
What about id? It’s very similar to classes except written as id=”” and targeted in CSS by using a # instead of a dot.
什么是ID呢？ID和Class类比较相似。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
#para1
{
text-align:center;
color:red;
}
But beware – unlike a class, an ID must be unique!
注意：不像Class，ID必须是第一无二的。
There can only be one of these on a page. So you can’t use it for things that would ever repeat e.g. you have three “column” elements, then you must use classes, not ID’s.
ID在页面上必须是独一无二的。因此面对某些重复的元素，例如这个页面有三个分栏元素，那么我们就必须使用class类，而不是ID。
