Cascading Style Sheet ( Cascading Style Sheet , referred to as: CSS) is the code that adds styles to web pages.
CSS isn't really a programming language, or even a markup language. It is a style sheet language, which is used to add styles to HTML elements. For example: color, position, font, line spacing, adding borders, etc.
Create a style.css file in the styles folder.
Open the index.html file, and paste the following line into the document head (that is, between the <head> and </head> tags).
<link href="styles/style.css" rel="stylesheet">1. Rulesets:
Selector
The name of the HTML element is at the beginning of the rule set. It selects one or more elements (in this case, the p element) that need to be styled. To add styles to different elements just change the selector.
Declaration (Declaration) = attribute + attribute value
A single rule, such as color: red; is used to specify attributes that add style elements .
Properties
A way to change the style of an HTML element. (Color in this example is an attribute of the <p> element.) In CSS, it's up to the writer to decide which attribute to modify to change the rules.
Property value
On the right side of the attribute, after the colon is the value of the attribute , which selects a value from the many appearances of the specified attribute (we have many attribute values besides red that can be used for color).
Note other important syntax:
Each rule set (except the selector part) should be enclosed in paired curly braces ({}).
A colon (:) is used to separate the attribute from the attribute value in each declaration.
Within each ruleset, separate declarations with semicolons (;).
Multiple attributes: just separate them with semicolons
body {
width: 650px;
margin: 0 auto;
background-color: #BCF7F6;
padding: 0px 20px 0px 20px;
border: 2px solid black;
}Multiple types of elements: Separate different selectors with commas. For example:
h1,li {
color: red;
}Different types of selectors:
There are many different types of selectors. The above only introduces element selectors , which are used to select a given element in an HTML document. But select operations can be more specific. Here are some commonly used selector types:
2. Everything is a box:
Most HTML elements on a page can be viewed as stacked boxes.
CSS layout is mainly based on the box model. Each block occupying page space has properties like this:
padding: That is, the inner margin, the space around the content (such as a paragraph).
border: That is, the border, followed by the line of the padding.
margin: That is, the outer margin, the space around the outside of the element.
still got more
width : the width of the element
background-color : the color underneath the element's content and padding
color : the color of the element content (usually text)
text-shadow : Sets a shadow for the text inside the element
display : Set the display mode of the element (temporarily omitted)
3. Modify the color:
1. Font color
h1,li {
color: red;
}
2. Page color
html {
background-color: #00539F;
}
4. Modify the style:
1. font
The first step is to find the address previously output by Google Font . And add it into the index.html document head ( anywhere between <head> and </head>) in the form of a <link> element. code show as below:
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">The above code downloads the Open Sans font for the current web page so that it can be applied to HTML elements in the custom CSS.
In the second step, delete the existing rules in the style.css file. Although the test was successful, the scarlet letter didn't look too comfortable.
第三步，将下列代码添加到相应的位置，用你在 Google Fonts 找到的字体替代 font-family 中的占位行。（ font-family 意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字号（因为 <html> 是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：
html {
/* px 表示“像素（pixels）”: 基础字号为 10 像素 */
font-size: 10px;
/* Google fonts 输出的 CSS */
font-family: 'Open Sans', sans-serif;
}
2.文档字号 居中 行高 字间距
font-size 字体大小
text-align 文本对齐
line-height 行高
letter-spacing 字母间距
h1 {
font-size: 30px;
text-align: center;
color: #F8584B;
}
p, li , h2 {
font-size: 16px;
/* line-height 后面可以跟不同的参数，如果是数字，就是当前字体大小乘上数字 */
line-height: 1.5;
letter-spacing: 2px;
}
3.文档体格式
body {
width: 650px;
margin: 0 auto;
background-color: #BCF7F6;
padding: 0px 20px 0px 20px;
border: 2px solid black;
}现在是 <body> 元素。以上条声明，我们来逐条查看：
width（宽度）: 600px; —— 强制页面永远保持 600 像素宽。
margin（页边空白）: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考 这里 。
background-color（背景颜色）: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其它颜色。
padding（填充）: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。
border（边）: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。
4.页面主标题样式
h1 {
font-size: 30px;
text-align: center;
color: #9606CC;
}
text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：
第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。
5.图像居中
img {
display: block;
margin: 0 auto;
}
可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 <body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。
内联元素又名行内元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。 内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。
最终效果：
h1,li {
color: red;
}
html {
/* px 表示“像素（pixels）”: 基础字号为 10 像素 */
font-size: 16px;
/* Google fonts 输出的 CSS */
font-family: 'Open Sans', sans-serif;
text-align: center;
}
h1 {
font-size: 30px;
text-align: center;
color: #F8584B;
}
p, li , h2 {
font-size: 16px;
line-height: 1.5;
letter-spacing: 2px;
text-align: center;
}
html {
background-color: #AEC4F4;
}
body {
width: 650px;
margin: 0 auto;
background-color: #BCF7F6;
padding: 0px 20px 0px 20px;
border: 2px solid black;
}
学习来源于：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics