- CSS 菜鸟教程
- CSS - 教程
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 度量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - border-block 属性
- CSS - 边框内联
- CSS - 边距
- CSS - 列表
- CSS - Padding 属性
- CSS - 光标
- CSS - 轮廓
- CSS - 维度
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉列表
- CSS - visibility 属性
- CSS - Overflow 属性
- CSS - 清除修复
- CSS - float(浮点)
- CSS - 箭头
- CSS - resize 属性
- CSS - quotes 属性
- CSS - order 属性
- CSS - Position 属性
- CSS - hypens 属性
- CSS - :hover(悬停)
- CSS - display(显示)
- CSS - focus 属性
- CSS - zoom(缩放)
- CSS - translate 属性
- CSS - Height 属性
- CSS - hyphenate-character 属性
- CSS - Width 属性
- CSS - opacity 属性
- CSS - z-index 属性
- CSS - bottom 属性
- CSS - 导航栏
- CSS - 覆盖
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - Atrribute 选择器属性
- CSS - 运算器
- CSS - root
- CSS - 盒子模型
- CSS - 计数器
- CSS - Clip (Obsolete) 属性
- CSS - writing-mode 属性
- CSS - Unicode-bidi 属性
- CSS - min-content 属性
- CSS - 全部
- CSS - inset 属性
- CSS - isolation 属性
- CSS - overscroll-behavior 属性
- CSS - justify-items 属性
- CSS - justify-self 属性
- CSS - tab-size 属性
- CSS - pointer-event 属性
- CSS - place-content 属性
- CSS - place-items 属性
- CSS - place-self 属性
- CSS - max-block-size 属性
- CSS - min-block-size 属性
- CSS - mix-blend-mode 属性
- CSS - max-inline-size 属性
- CSS - min-inline-size 属性
- CSS - offset 属性
- CSS - accent-color 属性
- CSS - user-select 属性
- CSS 高级
- CSS - grid 属性
- CSS - Grid 布局
- CSS - flexbox
- CSS - vertical-align 属性
- css - positioning
- css - layers
- css - pseudo_classes
- CSS - 伪元素
- CSS - @ 规则
- CSS 滤镜 - text-effect 属性
- CSS 分页媒体
- CSS 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS - 圆角
- CSS - 边框图像
- CSS - 多种背景
- CSS - 渐变
- CSS - box-shadow 属性
- CSS - box-decoration-break 属性
- CSS - caret-color 属性
- CSS - text-shadow 属性
- CSS - 2D 转换
- CSS - 3D 变换
- CSS - transition 属性
- CSS - 动画
- CSS - 多列布局
- CSS - 盒子大小调整
- CSS - 工具提示
- CSS - buttons
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 值函数
- CSS - 数学函数
- CSS - Mask 属性
- CSS - shape-outside 属性
- CSS - 样式图像
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS - 响应式网页设计 (RWD)
- CSS - 响应式设计视口
- CSS - 响应式网格视图
- CSS - 响应式媒体查询
- CSS - 响应式图像
- CSS - 响应式视频
- CSS - 响应式框架
- CSS 引用
- CSS - 所有属性列表
- CSS - 颜色引用
- CSS - 浏览器支持参考
- CSS - 网页字体
- CSS 工具
- CSS - PX 到 EM 的转换
CSS - Content 属性
CSS Content 属性用于将元素或伪元素的内容替换为生成的值,以便更改显示的输出。
- 它管理元素的正常呈现方式,或者何时使用图像和相关的 alt 文本代替元素。
- 它将内容定义为图片、文本、两者兼而有之,或者在伪元素和边距框的情况下根本不是,从而决定元素是否呈现。
- 匿名替换的元素是使用 content 属性引入的元素。
可能的值
- none - 当直接应用于元素时,它不起作用;当用于伪元素时,它不会生成伪元素。
- normal - 页面边距框和普通元素的默认值为 contents,但伪元素(如 ::before 和 ::after )的计算为零。
- <string> - 字符串是封装在匹配的单引号或双引号中的字符序列。在 CSS 中可以连接多个字符串值,而无需特殊的连接运算符。
- <image> - CSS 中的可显示图像由 <image> 表示,它可以作为 image-set()、<gradient>、url() 或由 element() 函数定义的网页本身的一部分给出。
- <counter> - 在 CSS 中,计数器(通常是数字)通过 <counter-reset> 和 <counter-increment> 属性生成,由 <counter> 值表示,可以使用 counter() 或 counters() 方法显示。
- counter() - 类似于 counter(name) 或 counter(name, style),显示具有指定样式 <list-style-type>(默认为十进制)的文本,该样式表示伪元素范围内具有给定名称的最内层计数器的值。
- counters() - 以 counter(name, string) 或 counter(name, string, style) 形式生成文本,在伪元素中显示具有指定名称的最内层计数器的值,使用提供的 <list-style-type> 进行格式化,默认选择小数。
- <quote> - 根据语言和位置而变化的关键字包含在 <quote> 数据类型中。
- open-quote 和 close-quote - 在 quotes 属性中定义的匹配字符串用于替换这些值。
- no-open-quote 和 no-close-quote - 不添加内容,但调整报价的嵌套级别,增加或减少它。
- attr(x) - CSS 函数 attr(x) 从源元素或选定元素中检索属性的值,根据文档语言生成空字符串或未解析的字符串。
- alternative text: / <string> | <counter> - 在支持它的浏览器中,在 <content-list> 项中的文本字符串或计数器前使用正斜杠作为替代文本,这适用于屏幕阅读器,但在不受支持的浏览器中可能会被忽略,<string> 或 <counter> 表示替代文本。
语法
content = normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]? | <element()>
适用于
所有元素、遵守树的伪元素和页边距框
CSS Content - 追加字符串
在以下示例中,字符串根据其分配的类动态追加到列表项的内容中。
<html>
<head>
<style>
.featured::before {
content: "Top Pick: ";
font-weight: bold;
color: #4CAF50;
}
.course-item {
position: relative;
}
.course-item::after {
content: " Enroll Now!";
position: absolute;
bottom: 0;
right: 0;
font-style: italic;
color: #1565c0;
}
</style>
</head>
<body>
<h2>Featured Online Courses</h2>
<ul>
<li class="featured">Web Development Bootcamp</li>
<li class="course-item">Data Science Essentials</li>
<li>Graphic Design Mastery</li>
<li class="course-item">Digital Marketing Fundamentals</li>
</ul>
</body>
</html>
CSS Content - 行情
在以下示例中,引号文本由对比鲜明的彩色引号整齐地框住,从而增加了其视觉效果。
- 使用较大的红色引号和浅灰色背景,与绿色文本形成对比。
- 生成的引号类型取决于语言,可以通过将 content 属性值设置为 no-open-quote 和/或 no-close-quote 来关闭,或者将 quotes 属性设置为 none。
<html>
<head>
<style>
q {
color: #008000;
}
q::before,
q::after {
font-size: larger;
color: #800000;
background: #f0f0f0;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
</style>
</head>
<body>
<h1>Welcome to the Wisdom Corner</h1>
<p>Albert Einstein once said, <q cite="https://www.brainyquote.com/quotes/albert_einstein_133991"> The only source of knowledge is experience.</q> Let's embrace our experiences and learn from them to gain wisdom.</p>
<p lang="de-de"> In einem berühmten Zitat sagte Johann Wolfgang von Goethe, <q lang="de-de"> Man sieht nur das, was man weiß. </q>. This reminds us that knowledge shapes our perception.</p>
<p>As we navigate the vast sea of information on the internet,<q> It's crucial to distinguish between knowledge and misinformation.</q> Let's be discerning in our digital journeys.</p>
<p lang="es-es"> En palabras de Pablo Picasso, <q lang="es-es"> La inspiración existe, pero tiene que encontrarte trabajando. </q>. True creativity often comes from the dedication to our craft.</p>
<footer><p>Stay curious and keep exploring the depths of knowledge!</p></footer>
</body>
</html>
CSS Content - 向列表项计数器添加文本
- 以下示例使用夹在两个 <strings> 之间的计数器为其中的列表项创建详细的标记。
- 在此示例中,通过在两个<字符串>之间放置计数器,为无序列表中的列表项创建详细标记。
- 内容中的每个项目都有一个前缀、一个空格、一个空格、一个冒号和另一个空格。在大多数浏览器中,counters() 方法定义了一个由句点分隔的数字项计数器。
<html>
<head>
<style>
div {
background-color: #f0f0f0;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
color: #008080;
}
ol {
counter-reset: chapters;
margin-left: 4em;
}
li {
counter-increment: chapters;
}
li::marker {
content: "Chapter " counters(chapters, ".", decimal-leading-zero) ": ";
color: #800000;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h2>Contents</h2>
<ol>
<li>Introduction</li>
<li>Part I: The Adventure Starts
<ol>
<li>Setting the Scene.</li>
<li>Getting to know the Characters.</li>
<li>Revealing Secrets.</li>
</ol>
</li>
<li>Part II: Difficulties Are Ahead.
<ol>
<li>Taking On Opponents.</li>
<li>Getting around in the Dark.</li>
<li>Gathering Supporters.</li>
</ol>
</li>
<li>Conclusion</li>
</ol>
</div>
</body>
</html>
CSS content - 具有属性值的字符串
- 以下示例使用属性选择器来定位安全链接,并设计用于打印样式表。
- 使用 ::after 伪元素,它将 href 属性的值附加到链接内容之后。
- 生成的内容显示为 URL: [href value],用括号括起来,这改进了安全链接以适合打印的格式呈现的方式。
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f8f8;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #2c3e50;
color: #ecf0f1;
padding: 1em;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 0.5em 0;
}
a {
text-decoration: none;
color: #3498db;
font-weight: bold;
}
a:hover {
color: #e74c3c;
}
a[href^="https://"]::after {
content: " (Explore: " attr(href) ")";
color: #27ae60;
font-style: italic;
font-size: 0.8em;
margin-left: 0.5em;
}
</style>
</head>
<body>
<header>
<h1>Web Adventures</h1>
</header>
<nav>
<ul>
<li><a href="https://tutorialspoint.com/bootstrap/">Bootstrap</a></li>
<li><a href="https://www.qikepu.com/html">HTML</a></li>
<li><a href="hhttps://www.qikepu.com/css">CSS</a></li>
<li><a href="https://www.qikepu.com/javascript">Javascript</a></li>
</ul>
</nav>
</body>
</html>
CSS 自定义 - 添加带有替代文本的图像
在以下示例中,a::before 伪元素用于在链接文本之前插入图像。
对于不启用图像渲染的浏览器,它包含占位符图片形式的替代文本和回退材料。
<html>
<head>
<style>
a::before {
/* Fallback content */
content: url("https://www.qikepu.com/css/images/css-mini-logo.jpg")
" - alt text is not supported - ";
/* Content with alternative text */
content: url("https://www.qikepu.com/css/images/css-mini-logo.jpg") /
" VISIT EXAMPLE: ";
font: italic small-caps 25px/2.5 'Georgia', serif;
margin-right: 10px;
}
</style>
</head>
<body>
<a href="https://www.qikepu.com/"> Explore Example Website</a>
</body>
</html>
CSS content - 用 url() 替换元素
在给出的示例中,content: url() CSS 属性用于动态替换 #custom 替换元素的内容,并使用 URL“content.png”提供的图像。此外,如果不允许替换元素,则 span::after 选择器会提供回退功能,该选择器会在括号中显示元素的 ID 属性。
<html>
<head>
<style>
#custom-replacement {
height: 300px;
width: 300px;
content: url("images/content.png");
}
/* Fallback content in case element replacement is supported */
span::after {
content: " (ID: " attr(id) ")";
color: #888;
}
</style>
</head>
<body>
<span id="custom-replacement">This content is replaced!</span>
</body>
</html>
CSS content - 用<梯度>替换元素
在以下示例中,元素的内容被 CSS 渐变替换,更准确地说,是 linear-gradient()。
对于同时启用元素内容替换和替代文本的浏览器,@supports 规则用于提供替换文本支持并引入 repeating-linear-gradient()。
<html>
<head>
<style>
.container {
border: 2px solid #e74c3c;
background-color: #f9e79f;
min-height: 200px;
min-width: 200px;
padding: 20px;
}
#altered {
content: linear-gradient(#3498db, #2ecc71);
}
@supports (content: linear-gradient(#000, #fff) / "custom content") {
#altered {
content: repeating-linear-gradient(rgba(52, 152, 219, 0.8) 0, #e67e22 20%) /
"Transformed styling with custom content";
}
}
</style>
</head>
<body>
<div class="container" id="altered">Click Here</div>
</body>
</html>