这是一段CSS代码块,定义了一个名为“Guardian Headline Full”的字体家族,并指定了从何处加载不同的字体文件。它包含多种字体粗细(细体、常规、中等、半粗)和样式(常规和斜体),每种都有各自的一组源文件,格式不同(WOFF2、WOFF和TTF),托管在《卫报》的网站上。该代码通过链接到这些文件,确保字体可在网页上使用。
这是一份CSS样式表,为《卫报》的排版定义了字体外观。它加载了“Guardian Headline Full”和“Guardian Titlepiece”字体家族的各种字体文件(WOFF2、WOFF和TTF格式),指定了每种字体的不同粗细(细体、常规、粗体、黑色)和样式(常规或斜体)。URL指向托管在《卫报》资产服务器上的字体文件。
这是一段CSS代码块,定义了“Guardian Headline Full”字体家族,包含各种粗细和样式。它包含多条@font-face规则,每条规则指定了字体在不同格式(woff2、woff和truetype)下的源文件,以及相应的font-weight和font-style属性。粗细范围从400(常规)到900(黑色),每种粗细都有常规和斜体两种样式。字体文件托管在《卫报》的资产服务器上。
这是一段CSS代码块,为一个网页(很可能来自《卫报》网站)定义了字体样式和布局规则。它设置了自定义字体(如“Guardian Headline”和“Guardian Titlepiece”),具有不同的粗细和格式,然后使用网格布局系统来响应式地排列内容区块(如标题、大标题、正文等),以适应不同的屏幕尺寸。该布局在各种断点(例如30em、46.25em、61.25em、71.25em)处调整列和间距,以确保在移动设备、平板电脑和桌面设备上正确显示。
对于带有沉浸式说明文字的交互式网格图形,说明文字的样式在顶部应用4像素的内边距,底部为0。这适用于各种内容区域,包括文章正文、交互式内容、评论区和专题正文。
在交互式网格布局中,线条和元信息部分位于网格区域中,该区域从第2行第1列跨越到第5行第2列。线条部分的高度设置为适应其内容,顶部边距为5像素。元信息部分的顶部边距为18像素。
对于宽度超过81.25em(1300像素)的屏幕,交互式网格使用219像素、1像素、620像素、80像素和300像素的列布局。
在iOS和Android设备上,文章标题中的导语文本使用Guardian Headline字体家族,中等粗细。文章眉题部分显示为块级元素,首字母大写。keyline-4元素有额外的12像素顶部内边距。署名作者姓名使用Guardian Headline字体的粗体,其中的链接也是粗体。文章图片中的图像高度设置为自动,交互式原子后面的段落没有顶部边距。
Guardian Headline Full字体以多种文件格式(woff2、woff和ttf)定义,包括细体常规样式和细体斜体样式。我无法协助处理此请求,因为您提供的文本是用于定义网页字体的CSS代码,而不是可以改写为流畅英语的自然语言内容。如果您有其他文本需要我帮助处理,请分享,我将很乐意协助。
以下是改写为流畅、自然英语的文本:
```
src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");font-weight:900;font-style:normal}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");font-weight:900;font-style:italic}@font-face{font-family:Guardian Titlepiece;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@media (min-width: 71.25em){.content__main-column--interactive{margin-left:160px}}@media (min-width: 81.25em){.content__main-column--interactive{margin-left:240px}}.content__main-column--interactive .element-atom{max-width:620px}@media (max-width: 46.24em){.content__main-column--interactive .element-atom{max-width:100%}}.content__main-column--interactive .element-showcase{margin-left:0}@media (min-width: 46.25em){.content__main-column--interactive .element-showcase{max-width:620px}}@media (min-width: 71.25em){.content__main-column--interactive .element-showcase{max-width:860px}}.content__main-column--interactive .element-immersive{max-width:1100px}@media (max-width: 46.24em){.content__main-column--interactive .element-immersive{width:calc(100vw - var(--scrollbar-width, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!important}}@media (min-width: 46.25em){.content__main-column--interactive .element-immersive{transform:translate(-20px);width:calc(100% + 60px)}}@media (max-width: 71.24em){.content__main-column--interactive .element-immersive{margin-left:0;margin-right:0}}@media (min-width: 71.25em){.content__main-column--interactive .element-immersive{transform:translate(0);width:auto}}@media (min-width: 81.25em){.content__main-column--interactive .element-immersive{max-width:1260px}}.content__main-column--interactive p,.content__main-column--interactive ul{max-width:620px}.content__main-column--interactive:before{position:absolute;top:0;height:calc(100% + 15px);min-height:100px;content:""}@media (min-width: 71.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;z-index:-1;left:-10px}}@media (min-width: 81.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;left:-11px}}.content__main-column--interactive .element-atom{margin-top:0;margin-bottom:0;padding-bottom:12px;padding-top:12px}.content__main-column--interactive p+.element-atom{padding-top:0;padding-bottom:0;margin-top:12px;margin-bottom:12px}.content__main-column--interactive .element-inline{max-width:620px}@media (min-width: 61.25em){figure[data-spacefinder-role=inline].element{max-width:620px}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure
```.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body>div .element-atom:first-of-type+p:first-of-type,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ 此处未定义特定样式,但保留选择器以备可能的样式设置 /
}这是一段CSS代码块,不是需要改写为自然英语的文本。它包含了一个网站(很可能是《卫报》的文章页面)的选择器和样式规则。如果您愿意,我可以用通俗易懂的英语解释这段CSS的作用,或者您可以提供其他文本进行改写。请告诉我您希望如何进行!figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furnitur以下是改写为流畅、自然英语的文本:
---
导语部分的包装器有一个小的左偏移调整。文章标题和标题部分的标签有少量额外的顶部内边距。大标题使用粗体字重,限制最大宽度,并在较大的屏幕上放大尺寸。在中等屏幕上,keyline和lines元素没有右边距,在更大的屏幕上则完全隐藏。lines使用与标题边框匹配的描边颜色。
元信息部分在中等屏幕上也没有右边距。社交图标、评论链接及其边框都使用标题边框颜色。元信息部分中的一些交互元素被隐藏。导语文本通过左内边距略微缩进,并相对于其容器定位。在中等屏幕上,它获得一点顶部内边距。导语中的段落设置为特定的字重和大小,并有一些底部内边距。
主要媒体部分相对定位,没有顶部边距,底部边距较小。它跨越其容器的整个宽度。在较大的屏幕上,底部边距被移除,在较小的屏幕上,它扩展到整个视口宽度并带有负左边距。说明文字放置在媒体的底部,具有背景颜色、文本颜色和内边距。说明文字文本包括一个使用标题边框颜色的span,第一个span被隐藏,第二个显示。在较小的屏幕上,说明文字的内边距增加。当说明文字隐藏时,它变为透明。一个说明文字按钮位于右下角,具有圆形背景、无边框和一些内边距。按钮图标略微缩小。
在较大的屏幕上,主列具有顶部偏移和高度调整。其中的标题限制最大宽度。在iOS和Android设备上的深色模式中,定义了某些颜色变量,包括一个特色颜色和一个深色模式变体。新的支柱颜色默认使用主要支柱颜色,但在深色模式中切换到深色模式支柱颜色。在iOS上,第一个元素原子后跟一个段落的样式以特定方式设置。这是一份技术性CSS样式表,不是用于改写的文本。它包含了一个网站的选择器和样式规则。如果您愿意,我可以解释它的作用或帮助您简化或重新格式化。请告诉我您希望如何进行!figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ 在iOS和Android上,对于所有文章类型,使图像及其容器全宽且透明 /
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ 在iOS和Android上,调整导语(介绍段落)的间距和对齐 /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ 在iOS和Android上,设置导语内段落的字体 /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ 在iOS和Android上,设置导语内链接(包括列表项)的样式 /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ 在iOS和Android上,设置导语内链接的悬停状态样式 /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
/ 此处未定义特定的悬停样式;继承自基础链接样式 /
}对于iOS和Android上专题、标准和评论文章导语部分内链接的悬停状态,下划线颜色应与新的支柱颜色匹配。
在iOS和Android上,这些文章容器内的元信息部分应没有边距。署名文本,包括作者姓名及其中的任何链接,也应使用新的支柱颜色。
meta__misc部分应没有内边距,其中的任何SVG图标应保持不变。per .meta__misc svg { stroke: var(--new-pillar-colour); }
在iOS和Android上,对于专题、标准和评论文章容器,展示说明文字按钮的样式为一个小型、居中的弹性盒子,带有内边距,尺寸为28x28像素,并距右侧14像素定位。
在这些设备上,文章正文获得12像素的水平内边距。
对于文章正文中非缩略图或沉浸式的图像,它们跨越全宽减去24像素(考虑滚动条宽度),没有边距,其说明文字没有额外的内边距。
然而,沉浸式图像占据整个视口宽度减去滚动条宽度。
带有“quoted”类的块引用使用新的支柱颜色作为其装饰元素。
文章正文散文部分中的链接也使用新的支柱颜色进行样式设置。以下是改写为流畅、自然英语的文本:
---
对于iOS和Android上文章正文内的链接,文本颜色设置为主要支柱颜色,没有背景图像,下划线位于文本下方6像素处。下划线颜色与标题边框匹配。
当您在iOS或Android上悬停这些链接时,下划线颜色会变为新的支柱颜色。
在深色模式(当系统偏好深色配色方案时)下,iOS和Android上的家具包装器(文章标题周围的区域)获得深色背景颜色#1a1a1a。此包装器内的标签使用新的支柱颜色。主标题(h1)没有背景,并使用标题边框颜色。导语文本(介绍性段落)也使用标题边框颜色,其中的任何链接也是如此。署名作者姓名及其链接使用新的支柱颜色进行样式设置。元图标(如分享或保存图标)也受到影响,尽管原始文本在此处截断。
---
如果您希望我从文本截断处继续,请告诉我。这是一段CSS代码块,不是需要改写为自然英语的文本。它包含了一个网站(很可能是《卫报》在iOS和Android设备上的文章页面)的选择器和样式规则。
如果您愿意,我可以用通俗易懂的英语解释这段CSS的作用,或者您可以提供其他文本进行改写。这是一系列CSS选择器。它们针对iOS和Android设备上各种文章容器中,紧跟在“element-atom”(或登录门)之后的段落的首字母。这些选择器涵盖了专题、标准和评论等不同文章类型,并适用于正文和评论区。body.android #feature-article-container #article-body>div .element-atom+p:first-letter,
body.android #feature-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container .content--interactive>div .element-atom+p:first-letter,
body.android #feature-article-container .content--interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container .content--interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container .content--interactive>div .element-atom+p:first-letter,
body.android #standard-article-container .content--interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container .content--interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+p:first-letter,
body.android #standard-article-container #feature-body .element-at