CSS —— 字体、文本属性

CSS —— 字体、文本属性

 

目录

CSS —— 字体、文本属性

一、CSS简单知识点

二、基础选择器

1. 概述

2. 选择器

三、CSS Fonts（字体属性）

1. 字体系列

2. 字体大小

3. 字体粗细

4. 字体风格

5. font的复合属性

四、文本属性

1. 文本颜色

2. 对齐文本、装饰文本

3. 文本缩进

4. 行间距

#END（部分图源B站pink老师） 

---

 

 

一、CSS简单知识点

1. CSS语法规范： 选择器 { 一条或多条声明 }；

2. CSS：一种标记语言，设置HTML页面中的文本内容、图片外形、版面布局和外观显示样式；

3. CSS的选择器分为基础选择器和复合选择器；

 

 

二、基础选择器

1. 概述

1.1 基础选择器：单个选择器组成；

1.2 基础选择器分类：标签选择器、类选择器、id选择器、通配符选择器；

 

2. 选择器

2.1 标签选择器：HTML标签名作为选择器，能把某一类标签全部选择出来；

① 优点：能快速为页面中同类型的标签统一设置样式；

② 缺点：不能设计差异化样式；

h1 { color = red; }

2.2 类选择器：在HTML中以class属性表示，类选择器以一个点“.”显示；

① 语法结构：

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

例如：
.red {
    color : red;
}

<div class = " red "> 文字 </div>

② 注意：

③ 多类名：

2.3 id选择器：以id属性来设置选择器，CSS中id选择器以“#”定义；

① 语法格式：

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

例：
#red {
    color : red;
}
<div id = "red">文字</div>

② id选择器和类选择器区别：

2.4 通配符选择器：通配符选择器使用“*”定义，表示选取页面中所有的标签；

① 语法格式：

* {
    属性1 : 属性1值;
    ...
}

② 通配符选择器不需要调用，自动给所有元素使用样式；

 

 

三、CSS Fonts（字体属性）

CSS Fonts 属性用于定义字体系列、大小、粗细、文本样式。

1. 字体系列

1.1 font-family：定义文本字体系列；

h2 {
  font-family: '宋体';
}
/* 字体描述可用中文，可用英语 */

1.2 注意点：

 

2. 字体大小

2.1 font-size ：定义文本字体大小；

p {
   font-size: large;
}
/* font-size: 25px;  */

2.2 设置文字大小时，一般设置一个确定的值；（px像素）

 

3. 字体粗细

3.1 font-weight：定义文字粗细；

p {
   font-weight: 700;
}

3.2 属性：

 

4. 字体风格

4.1 font-style：定义字体风格；（如斜体）

p {
  font-style: italic;
}

4.2 属性：

 

5. font的复合属性

5.1 格式：

body {
    font : font-style font-weight font-size/line-height font-famliy;
}

5.2 注意点：

 

 

四、文本属性

CSS文本属性：文本颜色、对齐文本、装饰文本、文本缩进、行高。

1. 文本颜色

1.1 color：（可用预定义颜色方式、十六进制、RGB）

1.2 代码格式：

p {
  color: darkblue;
}

1.3 十六进制、RGB：十六进制用“#”开头，RGB用（，，）里写数字；

 

2. 对齐文本、装饰文本

2.1 对齐文本、装饰文本：text-align（设置水平对齐方式），text-decoration；

2.2 代码格式：

        p {
            text-align: center;
            text-decoration: underline;
        }

2.3 对齐文本属性：

2.4 装饰文本属性：

 

3. 文本缩进

3.1 文本缩进：text-indent（文本第一行缩进）；

3.2 代码格式：

p {
  text-indent: 2em;
}

3.3 当数值为正数，文本第一行右移，否则左移；

3.4 em：相对单位，相对当前元素1个文字的额大小；

 

4. 行间距

4.1 行间距：line-height（上间距+下间距+文本高度=行间距）；

4.2 代码格式：

p {
  line-height: 28px;
}

 

 

#END（部分图源B站pink老师）