说来也巧最近不知道发点什么文章，在后台测试代码的时候看见网友在文章“修改网页自定义字体的CSS代码+图文教程”反馈，怎么在css里汉字和字母使用不同的字体，应该怎么判断和实现，这个问题问得好，文章有内容了...，哈哈哈，因为没使用过中英文分开设置字体，所以我也得先去补习一下，搜索了下关键字，其实跟上篇文章也差不多，只是多个一个写法，使用 font-family 的调用方法，根据font-family的原则，假如客户终端不认识前面的字体...所以在定义字体的时候把英文的字体写在前面把中文的写在后面。这样，系统就会自动按顺序依次给字用字体，如果当前字体不支持文本，自动换用列表中的下一个字体。...我们来看一看 CSS 中字体的 Fallback 机制： ?...即在这些浏览器（IE7、IE8）下不支持在font-family属性中为英文和中文字体分别使用不同的字体，所以我最终还是选择不区别，毕竟折腾来回意义并不是很大，但是代码却多了很多。
一、文字溢出问题 ---- 在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ; 下面的示例中 , 在 150x25 像素的盒子中 , 显示 骐骥一跃，不能十步;驽马十驾，功在不舍;...; white-space: nowrap; 然后 , 隐藏文本的超出部分 ; overflow: hidden; 最后 , 使用省略号代替文本超出部分 ; text-overflow: ellipsis...; white-space 样式 用于设置 文本显示方式 : 默认方式 : 显示多行 ; white-space: normal; 显示一行 : 强行将盒子中的文本显示在一行中 ; white-space...: nowrap; text-overflow 样式 用于设置 文字溢出处理方案 : 默认方式 - 简单裁切 : 不显示 ......*/ white-space: nowrap; /* 然后 隐藏文本的超出部分 */ overflow: hidden; /* 最后 使用省略号代替文本超出部分 */ text-overflow
匹配任意一个字符，如果设置 s = true，则可以匹配换行符 [字符类] 匹配“字符类”中的一个字符，“字符类”见后面的说明 [^字符类]...类名:] 匹配“ASCII类”外的一个字符，“ASCII类”见后面的说明 \pUnicode普通类名 匹配“Unicode类”中的一个字符(仅普通类)，“Unicode类...等的含义 (默认为 false) ------------------------------ 位置标记： ^ 如果标记 m=true 则匹配行首，否则匹配整个文本的开头...\E 匹配 \Q 和 \E 之间的文本，忽略文本中的正则语法 \\ 匹配字符 \ \^ 匹配字符 ^...、\{、\}、\(、\)、\[、\]、\|（具体含义见上面的说明） 如果在正则表达式中使用了分组，则在执行正则替换的时候，“替换内容”中可以使用 $1、${1}、$name、${name} 这样的
营造一种有随意感的界面，如改变每张图片的旋转角度； 使文章中的图片交替向左向右浮动； 为一篇文章的头一段设置不同的样式，如首字下沉； 为一个定义列表的条上使用交替样式； 制作图表。...伪元素可用于定位文档中包含的文本，但无法在文档树种定位。伪类一般反映无法在CSS中轻松或可靠的检测到某个元素属性或状态；伪元素表示DOM外部的某种文档结构。...::first-letter 用来选择文本块的第一个字母，通常用于给文本元素添加排版细节，如下沉字母或首字母。 实例： 效果如图： 代码： 3.伪元素::before和::after 不是指存在于标记中的内容，而是可以插入额外内容的位置，尽管生成的内容不会成为DOM的一部分，但同样可以设置样式。...CSS3遵循了惯用的编码规则，通配符的使用提高样式表的书写效率 常见通配符如下： 属性选择器方法详解 创建简单的HTML结构，设置默认样式： <!
表示必须输入数值的文本输入框 range 表示必须输入一定范围内数字值的文本输入框 Date Pickers 可供选取日期和时间的新型文本输入框 HTML5废除元素 可以使用CSS代替的元素...离线应用和Web Workers Geolocation地理位置 CSS3 CSS3概述 CSS结合DIV可以方便地控制页面布局 整个网站可以统一风格，只要整个网站使用统一的CSS文件 网站的风格维护起来简单...:after 用来跟content属性一起使用，设置这元素后发生的内容 ::before 用来跟content属性一起使用，设置这元素前发生的内容 ::first-letter 设置元素内的第一个字符的样式...，使用于块元素,内联元素使设置于first-letter一样 ::selection 设置浏览器默认的背景颜色和文字颜色 ::placeholder CSS3样式属性 字体属性 font-style...-upper-alpha 大写英文字母 list-style-position属性 用来定义项目符号这列表中显示的位置，可以继承 -outside 项目符号放置这列表项文本以外 -inside
:is(h1, h2, h3) { color: blue; } 34.CSS变量的计算 在动态样式的 CSS 变量中执行计算。....element { backdrop-filter: blur(10px); } 56.CSS环境变量 使用 env() 函数访问 CSS 中的环境变量。...小型大写字母的字体变体 使用 font-variant 属性将小型大写字母应用于文本。 .small-caps { font-variant: small-caps; } 63....首字母大写字母 使用initial-letter 设置块级元素的第一个字母的样式。...文本下划线位置 text-underline-position 调整下划线相对于文本基线的位置，从而可以精确控制下划线的位置。
CSS编写样式的方式以及应用场景 css有三种常用的编写方式，分别是内联样式、内部样式表和外部样式表 内联样式的应用场景：在Vue的template中某些动态的样式会使用内联样式 内部样式表的应用场景...：Vue开发中，每个组件都有一个style元素，使用的是内部样式表的方式，不过原理并不相同 外部样式表的应用场景：外部样式表是开发中最常用的方式，将所有css文件放在一个独立的文件夹中，然后通过link...CSS属性 - 文本 1.1. text-decoration (常用) text-decoration 用于设置文字的装饰线 decoration 是装饰/装饰品的意思; text-decoration...CSS属性 - 字体 2.1. font-size(高度) 20px; 2em; 200% font-size 决定文字的大小 常用的设置 具体数值+单位 ✓ 比如 100px ✓ 也可以使用...(重要,不过一般仅设置一次) font-family 用于设置 可以设置1个或者多个字体名称; 浏览器会选择列表中第一个该计算机上有安装的字体; 或者是通过 @font-face 指定的可以直接下载的字体
类名:] 匹配“ASCII类”外的一个字符，“ASCII类”见后面的说明 \pUnicode普通类名 匹配“Unicode类”中的一个字符(仅普通类)，“Unicode类...\E 匹配 \Q 和 \E 之间的文本，忽略文本中的正则语法 \\ 匹配字符 \ \^ 匹配字符 ^...、\{、\}、\(、\)、\[、\]、\|（具体含义见上面的说明） 如果在正则表达式中使用了分组，则在执行正则替换的时候，“替换内容”中可以使用 1、{1}、name、{name} 这样的“分组引用符...re 中编译好的正则表达式，并返回所有匹配的位置 // {{起始位置, 结束位置}, {起始位置, 结束位置}, ...} // 只查找前 n 个匹配项，如果 n < 0，则查找所有匹配项 func...re 中编译好的正则表达式，并返回所有匹配的位置 // {{起始位置, 结束位置}, {起始位置, 结束位置}, ...} // 只查找前 n 个匹配项，如果 n < 0，则查找所有匹配项 func
文字描边效果 在 CSS 中可以使用 text-stroke 属性使文本更易读，它会向文本添加轮廓效果。...将文本设为大写或小写 大写或小写字母可以不必在 HTML中设置。可以在 CSS 中使用text-transform熟悉来强制任何文本为大写或小写。...video:paused { opacity: 0.6; } 效果如下： 需要注意，目前仅 Safari 支持该伪类:paused： 毛玻璃特效 可以使用 CSS 中的 backdrop-filter...更写书写方向 通常我们常见的网页文字是从左向右布局的，在CSS中可以使用 writing-mode 属性来指定文本在网页上的布局方式，即水平或垂直。...{ font-size: 200%; color: #8A2BE2; } :first-letter选择器用来指定元素第一个字母的样式，它仅适用于在块级元素中。
css用于网页的风格设计，包括字体，颜色，位置等。 css使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。...： 伪元素名 说明 :first-letter 向文本的第一个字母添加样式 :first-line 向文本的第一行添加样式 :after 在元素之后添加内容 :before 在元素之前添加内容 css...css字体属性 css常用字体属性表： 属性 说明 font-family 定义文本的字体系列 font-size 定义文本的字体尺寸 font-variant 定义是否以小型大写字母的字体显示文本 font-style...font-variant用于设置字体使用小写字体，默认为 normal，一旦设置为 small-caps，将所有小写字母变为大写。...upper-alpha 大写字母 none 无标记 inherit 继承父元素的该设置 css表格属性表： 属性 说明 border-collapse 设置是否合并表格边框 border-spacing
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。 任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。...CSS3对于伪元素的定义 伪元素在DOM中创建了一些抽象元素，这些对象不存在与常文档流中。 伪元素由两个冒号::开头，然后是伪元素的名称。 使用两个冒号::是为了和伪类（CSS2中并没有区别）做区分。...考虑兼容性CSS2中已存在的伪元素仍可以使用单引号:语法。但是CSS3中新增的伪元素必须以使用::。 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后面。...属性值为：lowercase(仅小写字母)、uppercase（仅大写字母）、capitalize（文本中的每个单词以大写字母开头） line-height: 行高 word-spacing: 增加或减少单词间的空白...positoon: relative 相对定位，相对于其正常位置进行定位，遵循常规流。并且设置top，right，bottom，left这4个属性进行偏移时，不会影响常规流中的任何元素。
5.1.2 － 类选择器 类选择器在css样式编码中是最常用到的 .className 以 . 开头，名称可包含字母，数字，-，_，但必须以字母开头。它区分大小写并可出现多次。...ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 可以使用类选择器词列表方法为一个元素同时设置多个样式。...p{color:red;}想当年，我是一个强壮的男人。 输入上面代码，p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。... 最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。...7.1.6 - 字间距（字母间距） letter-spacing: normal | 其用于设置字间距或者字母间距，此属性适用于中文或西文中的字母。
sidebar选择器时，应用在p标签上会使用第一个CSS样式 单独的选择器 id选择器即使不被用来创建 派生选择器，也可以单独使用 #sidebar { border: 1px dottde #00;...保留 不允许 pre-wrap 保留 保留 允许 文本方向： direction属性： 块级元素中的文本书写方向，表中列布局的方向…… unicode-bidi属性：行内元素 文本属性： 属性 描述...line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本。 text-decoration 向文本添加修饰。...text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 text-transform 控制元素中的字母。...border-spacing 设置分隔单元格边框的距离。 caption-side 设置表格标题的位置。 empty-cells 设置是否显示表格中的空单元格。
我们不要着急先来总结一下他们的相同点和不同点： 相同点：可以应用于任何元素不同点： 1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。...important优先级样式是个例外，权值高于用户自己设置的样式。 7-1 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。... 7-9 段落排版--中文字间距、字母间距 中文字间隔、字母间隔设置： 如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码： h1{...了不起的盖茨比 注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。 单词间距设置： 如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。...8.jpg 9-7 层模型--相对定位 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。...CSS伪元素允许设置元素或元素部分的样式，而无需向其添加任何ID或类。当只想为段落的第一个字母设置样式以创建首字下沉效果，或者只想通过样式表在元素之前或之后插入一些内容等情况下，这将非常有用。...例：（规则设置了段落中第一行文本的格式。第一行的长度取决于浏览器窗口或包含元素的大小）。 <!...三、:: first-letter伪元素 ::first-letter伪元素用于将特殊的样式添加到文本的第一行的第一个字母。 例：（规则设置文本段落的首字母格式，并创建类似首字下沉的效果）。...五、伪元素和CSS类 通常，只需要使用这些伪元素设置文本的某个段落或其他块级元素的样式。在那里，向伪元素声明一个类就起作用了。伪元素可以与CSS类组合以产生效果，特别是对于具有该类的元素。
其中选择器也叫选择符 CSS 中注释：/* ... */ 二、在 HTML 中如何使用 css 样式（html 中嵌入 css 的方式） 1....>被修饰的内容 在HTML中如何使用css样式 特点：仅作用于本标签...四、CSS3 中的选择器 1....clip|ellipsis（显示省略标记） *text-align: 文本的位置：left center right text-transform：对象中的文本的大小写...贯穿线 text-decoration-line：[了解]文本装饰线条的位置（浏览器不兼容） *text-shadow: 文本的文字是否有阴影及模糊效果
说明 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。...定义带有小写字母和大写字母的标准的文本。 capitalize | 文本中的每个单词以大写字母开头。 uppercase | 定义仅有大写字母。...说明 这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会 “延伸” 到后代元素中。不要求用户代理支持 blink。...text-align 定义和用法 text-align 属性规定元素中的文本的水平对齐方式。 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。...左侧固定右侧自适应宽度的两列布局 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 我的方法一： 不使用浮动，使用绝对定位，将左上角的块放好位置，右边的块设置
直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。... 如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式： HTML: Hello...CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。...大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
伪元素 CSS 中可以利用伪元素给 DOM 元素添加特殊的样式。比如说，我们可以通过 :before 在一个元素前增加一些文本，并为这些文本添加样式。...虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 CSS3 规范中要求使用双冒号(::)添加伪元素，用以区分伪元素和伪类，比如 ::before 是伪元素，:hover 是伪类。...:first-letter :first-letter 用来获取元素中文本的首字母，被修饰的首字母不在文档树中。注意没有 :last-letter。...注意： 在一个使用了 :first-letter 伪元素的选择器中，只有很小的一部分 css 属性能被使用 ::first-letter :first-line :first-line 用来获取 块状元素...::placeholder (试验性质) :placeholder 匹配占位符的文本，只有元素设置了 placeholder 属性时，该伪元素才能生效。
直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。... 如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式： HTML: Hello World...CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。...3 ::first-letter/:first-letter :first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。...该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。 在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
