文章目录 一、 CSS 2.0手册使用 1、 按照文档层次查找 2、 搜索关键字查找文档 二、 font-weight 字体粗细设置 1、 语法简介 2、 代码示例 三、 font-style 字体斜体设置...1、 语法简介 2、 代码示例 四、 font 字体样式综合写法 1、 语法简介 2、 代码示例 ① 不使用综合字体样式的代码 ② 使用综合字体样式的代码 ③ 执行效果 一、 CSS 2.0手册使用...---- 1、 按照文档层次查找 CSS 的使用方法可在 CSS 2.0 手册 中查询 ; 这里以 查询 font-weight 字体粗细设置 为例 , 在文档左侧的 " 属性 | 字体 | font-weight...标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ; 在 CSS 中 , 可使用 font-weight 设置 字体粗细 ; font-weight 属性值设置 : normal : 默认不加粗样式..., 可使用 font-style 设置 字体粗细 ; body { font-style:italic; } font-style 属性值设置 : normal : 默认没有斜体的样式 ; italic
类选择器 CSS 中的类选择器用于选取具有特定类名的 HTML 元素。类选择器在 CSS 中使用一个点号（.）后跟类名来定义。 的，因此 ID 选择器通常只能应用于单个元素。 在 HTML 中，每个 id 属性值只能在页面中使用一次，但页面中可以有多个不同的 id 值。...所以通常我们对它进行使用的很少 4.CSS 字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。...font-family font-family 用于设置字体系列。可以为文本指定一种或多种字体，如果浏览器不支持首选字体，会使用后备字体。如果都不支持，则使用通用字体 sans-serif。...（同样这在文本字体的粗细中同样适用） font-weight CSS 使用 font-weight属性设置文本字体的粗细, 常用值： normal: 默认字体粗细 bold: 粗体 数值 (100 -
字体设置 <!...font-size: 80px; } 这是宋体 字体大小...1.直接写颜色的英文单词 color : red ; 2.通过十六进制表示 color : #ff0000 ; 3.通过rgb表示 color : rgb(...225,0,0) ; 其中,第二种和第三种表示的都是三原色:红,绿,蓝 数值越大,表示该颜色的分量越浓. 225,225,225就表示白色 0,0,0就表示黑色 <!...225); } 这是第一段话 这是第二段话 字体粗细
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式 属性和属性值以键值对的形式出现 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等 属性和属性值之间用英文:分开 多个...选择器的分类 css选择器分为基础选择器和复合选择器两个大类，这里是基础选择器 基础选择器是由单个选择器组成的。...，很多不需要 特殊情况使用 *{color:red;} 字体 字体属性 CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体） 字体系列 CSS 使用font-family...属性定义文本的字体系列。...不同浏览器的默认字体大小是不一样的（chrome浏览器默认文字大小为16px），我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体的粗细
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式 属性和属性值以键值对的形式出现 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等 属性和属性值之间用英文:分开 多个...，很多不需要 特殊情况使用 *{color:red;} 字体 字体属性 CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体） 字体系列 CSS 使用font-family...属性定义文本的字体系列。...（chrome浏览器默认文字大小为16px），我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体的粗细。...p { font-style: normal; } 属性值 描述 normal 默认值，显示标准的字体样式 italic 浏览器会显示倾斜的字体样式 字体复合属性 字体系列、大小、粗细、和文字样式
03-CSS字体属性 CSS Fonts（字体）属性用于定义字体系列、大小、粗细、文字样式（如斜体等）。 3.1字体系列 CSS使用font-family属性定义文本的字体系列。... p { font-family: Arial, 'Microsoft Yahei', '微软雅黑'; } 各种字体之间必须使用英文逗号相隔 一般情况下，如果使用了由空格隔开的多个单词组成的字体...，需要加单引号 尽量使用系统默认自带的字体，保证任何浏览器都能正确显示 常见的集中字体：‘Microsoft Yahei’, Tahoma, Arial, ‘Hiragino Sans GB’ 当设置了多个字体时...，根据先后顺序依次查看系统是否支持，若不支持则查看后一个，若全都不支持则使用系统默认的字体显示 实际开发中，字体设置常用于标签来将整个页面中的字体全部修改掉 3.2字体大小 CSS使用 font-size...，我们应尽量给一个明确值，而不要使用默认大小 同样可以通过给设置字号大小来指定整个页面文字的大小（标题标签除外，需要单独设定） 3.3字体粗细 CSS使用 font-weight属性来设置字体粗细
类选择器 3.3 id选择器 3.4 通配符选择器 4、字体样式 4.1 字体大小 4.2 字体粗细 4.3 字体样式（是否倾斜） 4.4 字体系列 5、文本样式 5.1 文本缩进 5.2 文本水平对齐方式...类名可以重复，一个类选择器可以同时选中多个标签； 3.3 id选择器 结构 #id属性值 { css属性名：属性值； } ； 作用 通过id属性值，找到页面中带有这个id属性值的标签，设置样式； 注意点...4.2 字体粗细 属性名 font-weight 取值 关键字： 正常——>normal 加粗 ——>bold纯数字：100~900的整百数：正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细...从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 注意点： 1. 如果字体名称中存在多个单词，推荐使用引号包裹 2....如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3.
scale 是等比例放大缩小一个物体，而仔细观察上述效果，明显是有字体的粗细、字体的字宽的变化。这里，其实用到了 CSS 比较新的特性 -- 可变字体，也就是 font-variation。...（粗体+斜体） 等一系列字体文件。...当然，这个文件可能比常规的单个字体文件大一些。...理解 font-variation-settings 除了直接通过 font-weight 去控制可变字体的粗细，CSS 还提供了一个新的属性 font-variation-settings 去同时控制可变字体的多个属性...那是因为 font-variation-settings 除了支持字体的粗细变化外，还支持上述说的注册轴设定的多个样式属性变化，以及自定义轴的一些字体样式属性变化。
、padding属性 字体和文本样式 字体 字体大小 font-size 浏览器有默认值 16px 字体粗细 font-weight 取值 关键字: 正常normal 加粗 blod 纯数字:...正常400 加粗 800 字体样式 font-style 字体是否倾斜 正常 normal 倾斜 italic 字体系列 font-family 雅黑、宋体、黑体之类的 windows电脑 默认是微软雅黑...一般网页会提供多个字体，用逗号隔开，表示按顺序显示，避免出现用户电脑上没有安装字体的情况 常见字体系列 无衬线字体 sans-serif 均匀 无笔锋 一般网页都用这种类型 衬线字体 serif 不均匀...，只有当选择器优先级相同时，才能通过层叠性判断结果 优先级 最复杂 css三大特性 优先级的介绍 不同的选择器具有不同的优先级，优先级高的选择器样式会夫噶优先级低的样式 优先级公式 继承...官方的联想模型为 苹果电脑的包装盒，个人理解为箱装盒式牛奶 边框 简写为 bd后按tab键 border: 粗细 线条样式 颜色 不分先后顺序 MDN官网上线条的样式如下 可拆分单个属性 border-width
: 12px,color:'red'}CSS基础选择器选择器就是根据不同的需求把不同的标签选出来；CSS就是找的指定的标签，设置标签样式；选择器分为基础选择器和复合选择器两大类；基础选择器又包括：标签选择器...，类选择器，id选择器和通配符选择器;标签选择器是指用html标签名称作为选择器，把某一类标签设置样式；不能对标签进行差异化设置类选择器可以单独选一个或多个标签，进行差异化设置；需要给标签设置class...属性；（不要使用纯数字，中文，标签名作为类名）使用的时候，class前面加符号.语法如下：.类名{ k:v}一个标签页可以使用多个类名；在标签的class属性中，写多个类名，以空格分开；id选择器是通过标签的...Id属性值作为选择器，id以#开始；其他与类选择器类似；相比类选择器，id可以表示一个标签，id只能使用一次；通配符选择器使用*定义，它表示选取页面所有的元素；图片CSS字体属性字体属性用于定义字体系列...，大小，粗细和文字样式等；字体系列：font-family字体大小： font-size; 大小以px(像素)为单位；谷歌浏览器默认的大小为16px; 一般情况下给body添加此属性；标题标签特殊设置字体粗细
CSS字体属性 CSS Font(字体)属性用来定义字体系列:大小,粗细和文字样式(如斜体)....文字字体 CSS使用font-family属性定义文本的字体系列 文字大小 CSS使用font-size属性定义文字大小 文字粗细 CSS使用font-weight 设置文字的粗细效果...,400等价于normal,默认粗细字体,700等价于bold,粗体,注意后面不需要跟单位!!!...文字样式 CSS使用font-style属性设置文本的风格 平时我们很少给文字加斜体,反而要把斜体改为默认不倾斜的字体....,通常是将段落的首行缩进. ⑤行间距 line-height属性用于设置行间的距离(行高).可以控制文字行与行之间的距离.
--实际开发中使用CSS控制文本域宽度高度--> 默认占位文字 CSS代码风格 样式格式书写 紧凑格式 h3...更直观) h3 { color: pink; font-size: 20px; } 样式大小写 一般情况使用小写字母，特殊情况除外 空格规范 冒号后保留空格 选择器和大括号间保留空格 CSS...选择器的作用 根据不同需求选择不同的标签 选择器分类： 基础选择器(由单个选择器组成) 标签选择器(标签名)：快速为页面中同类型的标签统一设置样式，不能设计差异化样式 类选择器(.类名)： 为页面中某一个或某几个标签统一设置样式...文字属性 字体系列(font-family) 各种字体之间使用英文逗号隔开 如果字体是多个单词由空格隔开，需要加引号 尽量使用系统默认自带字体，保证在各种浏览器中都能正确显示 渲染时从前往后逐个查找系统是否安装该字体...字体大小(font-size) px是最常用的单位 谷歌默认16px 不同浏览器默认字号大小不一致，尽量给一个明确值 标题标签比较特殊，需要单独指定大小 字体粗细(font-weight) normal
除了上一节我们讲到的背景以外，字体也是一个我们最常用到的属性，接下来我们就来讲一讲CSS字体。 CSS字体(font)属性定义文本中的字体，我们将从以下几个方面进行介绍。...字体粗细 可以使用font-family属性定义文档采用的优先字体系列。...通用字体系列 CSS定义了5种通用字体系列： a) Serif字体系列的字体成比例，而且有上下短线。成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如，小写i和小写m的宽度就不同。...e) Fantasy字体系列的字体无法用任何特征来定义，包括Western、Woodblock和Klingon。 2. 指定字体系列 a) 除了通用字体系列，还可以设置更具体的字体。...CSS3服务器端字体 在CSS3之前，Web设计师必须使用已在用户计算机上安装好的字体。
font-family 字体设置，需搭配@font-face。 例： 有两种类型的字体系列名称： 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。...(或者自定义的字体) 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace” font-family 可以把多个字体名称作为一个...提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。 注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。...因此，强烈推荐使用一个通用字体系列名作为后路。...; font-style: 字体样式; font-weight: 字体粗细; } text 文字 text-indent 首行缩进 自己设置值 text-align 文字排列（center
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。...华文黑体（STHeiti）、华文细黑（STXihei） 属于同一字体家族系列，MAC OS X 10.6 之前的简体中文系统界面的默认中文字体，正常粗细就是华文细黑，粗体下则是华文黑体。...上图是 Github 代码区块的字体设置，可以看到，默认字体就是 Consolas ，紧接着的几个都是其它等宽字体，如果用户的系统中都没有预装这些字体，则会匹配最后一个 monospace ，它表示等宽字体系列...字体定义顺序 字体定义顺序是一门学问，通常而言，我们定义字体的时候，会定义多个字体或字体系列。...其次很多人都不知道 Android 下没有预装微软雅黑和宋体，那么 Android 机型下的中文字体设置又是很考究的。
一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial; 一类是通用字体族名，它表示一大类字体（并非单个），类似这样：font-family...sans-serif 非衬线字体族 monospace 等宽字体，即字体中每个字宽度相同 cursive 草书字体 fantasy 主要是那些具有特殊艺术效果的字体 新增通用字体族关键字 而在 CSS...math 适用于数学表达式 fangsong 此字体系列用于中文的（仿宋）字体。...font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。...，以字体族系列 serif 和 sans-serif 结尾 当使用一些非常新的字体时，要考虑向下兼容，兼顾到一些极旧的操作系统，使用字体族系列 serif 和 sans-serif 结尾总归是不错的选择
内部样式表 在 标签内通过 标签来声明 CSS。可以通过多个标签进行统一的样式设置，但只能在本页面上进行修饰。...样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。...在CSS中，有两种类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合，如 Serif 或 Monospace。...特定字体系列 - 一个特定的字体系列，如 Times 或 Courier（ 打字机上的一种字体 ）。 font-family 属性设置文本的字体系列。...多个字体系列是用一个逗号分隔指明，如： p{font-family:"Times New Roman", Times, serif;} font-style 属性最常用于规定斜体文本。
CSS第一天 ---- 前言： CSS介绍： CSS：层叠样式表（Cascading style sheets） 作用：给页面中的HTML标签设置样式 结构：HTML（决定了身体） 表现：CSS（决定了样式美观...- CSS引入方式： 引入方式 书写位置 作用范围 使用场景 内嵌式 CSS 写在style标签中 当前页面 小案例 外联式 CSS 写在一个单独的.css文件中 多个页面 项目中 行内式 CSS 写在标签的...在小页面中可能会用于去除标签默认的margin和padding ---- 字体和文本样式： 1️⃣字体大小：font-size（数字 + px） 谷歌浏览器默认文字大小是16px，单位需要设置，否则无效...2️⃣字体粗细：font-weight 正常：normal（400） 加粗：bold（700） 不是所有字体都提供了九种粗细，因此部分取值页面中无变化 实际开发中以：正常、加粗两种取值使用最多4️⃣...center right decoration underline line-through overline none margin line-height wight ---- ---- 常见字体系列
然而，仅仅使用HTML可能无法创建出具有复杂交互性和动态内容的网站，因此通常还需要配合CSS（用于样式设计）和JavaScript（用于添加交互性）的使用。...以下是一些常见的 CSS 属性： 字体和文本属性： font-family：用于设置字体类型。 font-size：用于设置字体大小。 font-weight：用于设置字体的粗细。...CSS3样式表 CSS3是一种用于描述网页样式的标准语言，它提供了许多新的样式特性，包括颜色、字体、布局、动画等。...多列布局（Multicolumn Layout）：允许您创建具有多个列的布局。 圆角矩形（Rounded Corners）：允许您为元素设置圆角矩形样式。...转换（Transformations）：允许您改变元素的大小、位置和形状。 这些只是CSS3的一部分特性，还有许多其他特性，如盒模型改进、颜色函数、字体等。
CSS继承含义 CSS继承是指设置上级（父级）的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。 可以被继承的属性 字体系列属性： font-family:规定元素的字体系列。...font-weight:设置字体的粗细。 font-size:设置字体的尺寸。 font-style:设置字体的风格。...font-variant:设置小型大写字母的字体显示文本，所有的额小写字母都会转换成大写字母，但是与其他文本对比，字体尺寸更小。...font-size-adjust:为某个元素规定一个aspect值，可以保持首选字体的x-height。 文本系列属性： text-indent:文本缩进。 text-align:文本水平对齐。...元素可见属性：visibility 光标属性：cursor 内联元素可以继承的属性： 字体系列属性。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
