CSS

设置HTML页面中的文本内容，图片的外形以及版面的布局和外观显示样式

可以美化页面，让布局更简单

基础选择器

分为基础选择器和复合选择器

基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

标签选择器

指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名{
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
}

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器

.类名{
   属性1: 属性值1;
}

------

<did class = 'red'> 变红色 </div> //结构需要用class属性来调用class类的意思
.red{
    ...
}

类选择器使用 .进行标识，后面紧跟类名(自定义)
长名词或词组可以使用中横线来为选择器命名

多类名

1
2
3

<div class = "red font35">
    ...
</div>

在标签class属性中写多个类名
多个类名中间必须用空格隔开

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义

1
2
3

#id名{
   属性1: 属性值1;
}

*** id属性只能在每个HTML文档中出现一次***

id和类选择器的区别

类选择器可以被多次使用
id选择器只能被使用一次

通配符选择器

使用*定义，它表示选取页面中所有元素(标签)

1
2
3

* {
   属性1； 属性值1;
}

字体属性

定义字体类型、大小、粗细和文字样式.

字体类型

使用font-family属性定义文本的字体类型

1	p { font-family: "Microsoft Yahei";}

字体粗细

使用font-weight属性设置文字粗细

1	p {font-weight: 700;}

normal是默认值
bold定义粗体
400等同于normal，而700等同于bold，数字后面都不跟单位

文字样式

使用font-style属性设置文本的风格

1	p{font-style: normal;}

normal默认值
italic会显示斜体的字体样式

字体的复合属性

1
2
3

div{
   font: italic 700 16px "Micarosoft yahei";//style->weight->size->family
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性不起作用

文本属性

文本颜色

1
2
3

div{
  color: red;
}

预定义的颜色值: red,green,blue
十六进制: #FF0000, #FF6600
RGB代码: rgb(255,0,0)

对其文本

text-align属性用于设置元素内文本内容的水平对齐方式

1
2
3

div{
   text-align: center;
}

left 左对齐(默认值)
right 右对齐
center 居中对齐

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

1
2
3

div{
    text-decoration: underline;
}

none 默认，没有装饰线
underline 下划线。链接a自带下划线
overline 上划线
line-through 删除线

文本缩进

text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进

1
2
3

div{
  text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
1
2
3
p{
text-indent: 2em;
}
em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

行间距

line-height属性用于设置行间的距离(行高)。可以控制文本行与行之间的距离

1
2
3

p{
  line-height: 26px;
}

引入方式

CSS三种样式表

按照书写的位置(引入的方式)

行内样式表(行内式)
内部样式表(嵌入式)
外部样式表(链接式)

内部样式表

内部样式表是写到HTML内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中

<style>
div{
    color: red;
    font-size: 12px;
}
</style>

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中

行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式

1
2
3

<div style="color: red; font-size: 12px;">
    青春不常在，抓紧谈恋爱
</div>

外部样式表(外链表或链接式引入)

适合样式较多的情况：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
在HTML页面中，使用<link>标签引入这个文件
1
<link rel="stylesheet" href="css文件路径">
- rel 定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet”，表示被链接的文档是一个样式表文件
- href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

Hexo

css

CSS

基础选择器

标签选择器

类选择器

多类名

id选择器

id和类选择器的区别

通配符选择器

字体属性

字体类型

字体大小

字体粗细

文字样式

字体的复合属性

文本属性

文本颜色

对其文本

装饰文本

文本缩进

行间距

引入方式

CSS三种样式表

内部样式表

行内样式表

外部样式表(外链表或链接式引入)