CSS-字体和文本

发布于 7 天前  0 次阅读



本文章基于 BV14J4114768 记录

CSS 选择器

CSS 基础选择器

基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

语法:标签选择器 { 属性:属性值; ...}

作用:标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

类选择器

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

语法:·.类名 { 属性1: 属性值1; ...}

结构需要用class属性来调用 class 类的意思

<div class="类名"> 变红色 </div>

  1. 如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
  2. 类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。
  3. 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
  4. 可以理解为给这个标签起了一个名字,来表示。
  5. 长名称或词组可以使用中横线来为选择器命名。
  6. 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
  7. 命名要有意义,尽量使别人一眼就知道这个类名的目的。

多类名选择器

我们可以给一个标签指定多个类名,从而达到更多的选择目的。 这些类名都可以选出这个标签

简单理解就是一个标签有多个名字

多类名的具体使用:<div class="red font20">亚瑟</div>

注意:
1. 在标签 class 属性中写多个类名
2. 多个类名中间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

id 选择器

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

HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。

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

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

id 选择器和类选择器的区别

  1. 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以多个人使用。
  2. id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
  3. id 选择器和类选择器最大的不同在于使用次数上。
  4. 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。

通配符选择器:

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

通配符选择器不需要调用, 自动就给所有的元素使用样式

选择器总结

基础选择器 作用 特点 使用情况 用法
标签选择器 可以选出所有相同的标签,比如 p 不能差异化选择 较多 ·p { color: red; }
类选择器 可以选出 1 个或者多个标签 可以根据需求选择 非常多 .nav { color: red }
id 选择器 一次只能选择 1 个标签 ID 属性只能在每个 HTML 中出现一次 一般和 JS 搭配使用 #nav { color: red; }
通配符选择器 选择所有的标签 选择的太多,有部分不需要 特殊情况使用 * {color: red; }

CSS 字体属性:

字体大小:

CSS 使用 font-size 属性定义字体大小。

语法:p { font-size: 20px; }

  1. px(像素)大小是我们网页的最常用的单位

  2. 谷歌浏览器默认的文字大小为16px

  3. 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小

  4. 可以给 body 指定整个页面文字的大小

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

语法:p { font-weight: bold; }

属性值 描述
normal 默认的(不加粗的)
bold 定义粗体(加粗的)
100~900 400 等同于 normal,而 700 等同于 bold,注意数字后不接单位

实际开发时,更喜欢用数字表示粗细

字体样式

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

语法:p { font-style: normal; }

属性值 作用
normal 默认值,浏览器会显示标准的字体样式
italic 浏览器会显示斜体的字体样式

字体的综合写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

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

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

字体总结

属性 表示 注意点
font-size 字号 通常使用单位为 px(像素)
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 加粗是 700 或者 bold,不加粗是 normal 或者400,数字不要跟单位
font-style 字体样式 倾斜是 italic ,不倾斜是 normal
font 字体连写 1. 字体连写是有顺序的,不能随意换位置。2. 字体和字号必须同时出现

CSS 文本属性

文本颜色

color 属性用于定义文本的颜色。

语法:div { color: red; }

表示 属性值
预定义的颜色值 red, pink, blue
十六进制 #FF0000, #FF6600, #297D74
RGB 代码 RGB(255, 0, 0), RGB(100%, 0%, 0%)

最常用的是十六进制

文本对齐

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

语法:div { text-align: center; }

属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐

修饰文本

语法:div { text-decoration:underline;}

属性值 解释
none 默认,没有装饰线(最常用)
underline 下划线,链接 a 自带下划线(常用)
overline 上划线(几乎不用)
line-through 删除线(不常用)

文本缩进

语法:

div { 
    text-indent:20px;
}
div { 
    text-indent:2em;
}

em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1 个文字大小

行间距:

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

语法:p { line-height: 26px; }

行高的文本:上间距+文本高度+下间距 = 行间距

CSS 样式表

按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:

行内样式表(行内式)

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

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

  1. style 其实就是标签的属性,在双引号中间,写法要符合 CSS 规范
  2. 可以控制当前的标签设置样式
  3. 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
  4. 使用行内样式表设定 CSS,通常也被称为行内式引入

内部样式表(嵌入式)

内部样式表(内嵌样式表)是写到 html 页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个