CSS2-3常见的demo列子总结二

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS2-3常见的demo列子总结二相关的知识,希望对你有一定的参考价值。

分针网每日分享:CSS2-3常见的demo列子总结二
 
1. 学习使用 :before和 :after伪元素
伪元素 顾名思义 就是创建了一个虚假元素,并插入到目标元素之前或者之后。这两个伪类下特有的属性content,用于在css渲染中头部和尾部添加内容,伪元素必须与content结合来使用,否则毫无意义,但是添加的内容不会改变文档的内容,不会出现在DOM结构中,仅仅是对用户是可见的,但是对DOM结构是不可见的。比如如下代码:
 
<div class="example">example</div>
 
CSS代码如下:
.example:before{
content:"#";
}
.example:after{
content: "@";
}
 
在页面上被渲染成如下内容:
 
 
二:指定个别元素不进行插入
 
针对这个问题,content还有一个属性none,含义是不需要为该元素有任何内容;比如如下代码:
<div class="example">example</div>
<div class="example sample">example</div>
<div class="example">example</div>
 
首先我对所有example类名前面添加#号,后面添加@符合,然后我对包含sample类名的前面和后面不添加任何符合代码如下:
.example:before{
content:"#";
}
.example:after{
content: "@";
}
.sample:before{
content: none
}
.sample:after{
content: none
}
 
三:插入图像文件
 
我们不仅可以使用before或者after选择器的在前面或者后面插入文字外,我们还可以插入图像文件,插入图像文件时,需要使用url属性值来指定图像的路径,比如如下代码:
<div class="example">example</div>
<div class="example sample">example</div>
<div class="example">example</div>
 
CSS代码如下:
.example:before{content:url("https://img.alicdn.com/tps/TB1sb2HJVXXXXXAXpXXXXXXXXXX-120-55.png_120x120.jpg");}
.example:after{
content: "@";
}
 
效果如下:
技术分享
 
 
可以看到,在前面插入了一个图片。
 
浏览器支持程度:firefox,chrome,safari,opera,IE8+等浏览器。
 
2. 使用content属性来插入项目编号
 
<元素>: before {content:counter(计算器名)}
 
并且需要在元素的样式中追加对元素的counter-increment属性的指定。
 
注意:计数器名可以任意写,但是counter-increment指定的名字要相同。
 
如下代码:
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
 
Css代码如下:
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;}
 
效果如下:
技术分享
 
 
浏览器支持程度:ie8+,chorme,firefox等;
 
3. 在项目编号中追加文字;
 
html代码还是如上
 
css代码如下:
h1:before{content:"第"counter(mycounter)"章"".";}
h1{counter-increment:mycounter;}
 
效果如下:
技术分享
 
 
我们还可以指定编号的样式,我想让颜色变为红色,字体大小为18px,如下代码:
 
h1:before{content:"第"counter(mycounter)"章"".";color:red;font-size:18px;}
 
h1{counter-increment:mycounter;}
 
效果如下:
技术分享
 
 
指定编号种类
 
使用before选择器或者after选择器中的content属性,我们不仅可以追加数字编号,我们还可以追加字母编号或者罗马数字编号,如下方法指定:
 
content: counter(计算器名,编号种类)
 
比如指定大写字母编号时,使用”upper-alpha”属性,指定大写罗马字母时,使用”upper-roman”属性。
 
如下css代码:
h1:before{content:counter(mycounter,upper-alpha);color:red;font-size:36px;}
h1{counter-increment:mycounter;}
p:before{content:counter(longen,upper-roman);color:blue;font-size:36px;}
p{counter-increment:longen;}
 
效果如下:
技术分享
 
编号嵌套:
 
可以在大编号中嵌套中编号,可以在中编号中嵌套小编号。如下代码:
<h1>我想解决单身问题</h1>
<h2>可惜我不帅...没有女孩喜欢我....</h2>
<h2>我想解决单身问题</h2>
<h1>可惜我不帅...没有女孩喜欢我....</h1>
<h2>我想解决单身问题</h2>
<h2>可惜我不帅...没有女孩喜欢我....</h2>
 
Css代码如下:
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;}
 
h2:before{content:counter(longen);}
h2{counter-increment:longen;margin-left:40px;}
 
效果如下:
技术分享
 
在上面代码中,6个中标题的编号是连续的,如果要将第二个大标题里中标题重新开始编号的话,需要在大标题中使用counter-reset属性将中编号进行重置。如下代码:
 
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;counter-reset:longen;}
 
h2:before{content:counter(longen);}
h2{counter-increment:longen;margin-left:40px;}
 
如下效果:
技术分享
 
我们再来看一个复杂一点的多层嵌入的demo,如下:
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
 
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
 
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
 
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
 
CSS代码如下:
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;counter-reset:subcounter;}
 
h2:before{content:counter(mycounter) ‘-‘ counter(subcounter)‘.‘;}
h2{counter-increment:subcounter;counter-reset:subsubcounter;margin-left:40px;color:red;}
h3:before{content:counter(mycounter) ‘-‘ counter(subcounter) ‘-‘ counter(subsubcounter) ‘.‘;}
h3{counter-increment:subsubcounter;margin-left:40px;color:blue;}
 
效果如下:
技术分享
 
 
在字符串两边添加嵌套文字符号
 
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加如:括号,单引号,双引号之类的嵌套文字符号,open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。
 
<h1>括号</h1>
<h2>双引号</h2>
<h3>单引号</h3>
 
Css代码:
h1:before{content:open-quote;}
h1:after{content:close-quote;}
h1{quotes:"(" ")"}
 
h2:before{content:open-quote;}
h2:after{content:close-quote;}
h2{quotes:"\"" "\""}
 
h3:before{content:open-quote;}
h3:after{content:close-quote;}
h3{quotes:‘\‘‘ ‘\‘‘}
 
截图如下:
技术分享
 
 
其中双引号和单引号需要使用转义字符 “\”进行转义。
 
 

 

以上是关于CSS2-3常见的demo列子总结二的主要内容,如果未能解决你的问题,请参考以下文章

Android Notification常见样式总结

Android Notification常见样式总结

Android Notification常见样式总结

UE4 Demo总结

总结下常见布局解决方案

总结下常见布局解决方案