CSS styles and properties

CSS Styles

css style divided into three types: internal style, the line of formula (inline styles), external style sheet (outer chain)

Internal Style:

css styles in the head

Inline type (inline style):

css styles in the tag

External styles (outside chain):

Create a new style css file, as

Link in the head, enter the Tab key and then press the link to the external style of css

CSS selectors

① tag selector (selector element)

Syntax: tag name {Attribute 1: 1 Property Value; Attribute 2: Property Value 2; ... attribute n: Property Value n;} or

Element name {Attribute 1: 1 Property Value; Attribute 2: Property Value 2; ... attribute n: Property Value n;}

② class selector

Syntax: class name {Attribute 1: 1 Property Value; Attribute 2: Property Value 2; ... attribute n: Property Value n;}　　Note: a class name added to the front of the dot English

③ multi-class name selector

Syntax: <tag name class = "Class Class Name 1 2 ..."> </ tag name>　　Note: a class name with a class name separated by a space 2, and the two different classes

▲ css style display with h unrelated tml element in the sequence of the class name, up and down the order by writing about css styles

④id selector

Syntax: Name #id {Attribute 1: 1 Property Value; Attribute 2: Property Value 2; ... attribute n: Property Value n;}　　Note: id # in front of the name can not be left out, and only allowed to repeat the selector id using once

⑤ wildcard selector

All elements that match the page

css style properties

font-size: 字号大小，常用单位为em或px，一般我们使用px为多
font-family: 字体样式（宋体，微软雅黑等）
font-weight: bold; 字体加粗 也可以写成 font-weight:700;
font-weight: normal; 正常字体 也可以写成 font-weight:400;
font-weight: bolder; 特粗体
font-weight: lighter; 字体变细
font-style: 字体风格
font-style: normal 正常
font-style: italic 斜体
font-style: oblique 倾斜

语法：选择器{font: font-style font-weight font-size/line-height font-family;}

语法顺序是固定的，用空格隔开

用法：例：h1{font: 400 16px "宋体"}

css外观属性

color: 文本颜色
line-height: 行间距 单位为 px、em、%
text-align: 内容水平对齐方式 left、right、center
text-indent: 2em  段落首行缩进两个汉字（1em表示1个汉字）
text-decoration: 文本的装饰
    text-decoration: none; 默认无装饰效果
    text-decoration: underline; 下划线，一般在a链接使用
    text-decoration: overline; 定义文本上的一条线，上划线
    text-decoration: line-through; 穿过文本的一条线，删除线

明日接下去更新