css中内容生成器

一,内容生成器:content

补充before和after伪类选择器:

1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后

2)与before选择器配合使用(同理大家想下会不会有after?);

content的作用:

1,作用:在被选元素的内容前面插入内容;

2,用法:使用content属性指定要插入的内容;

3,可以设置插入内容的样式;

content的使用作用:对HTML内容修饰;

常用的值:url:添加图像;

文本;

计数器:?

二,计数器:(引导语,大家之前如果想实现给无序列表前面加序号怎么处理???使用list-style-type:的decimal值。现在呢,咱们要get一个新技能用计数器counter-reset属性实现和它相同的效果)

1),counter-reset属性:

作用:设置某个选择器出现次数的计数器的值,默认为 0。利用这个属性可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。

2),使用注意点:

如果使用display: none,则无法重置计数器。如果使用visibility: hidden,则可以重置计数器。

3),必须结合counter() 函数和counter-increment 属性使用

a,counter()函数:

counter() 函数用于为指定计数器创建计数字符串;

写法:语法为:counter(name) :name 为计数器的名称

b,counter-increment 属性:counter-increment:有三个值:none,id number,inherit(规定应该从父元素继承 counter-increment 属性的值) 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

写法:counter-increment:id number;(id 定义将增加计数的选择器、id 或 class。

number 定义增量。number 可以是正数、零或者负数。)

demo:

HTML:

<h1>1111</h1>

<h1>2222</h1>

<h1>3333</h1>

CSS:

body{

counter-reset: demo;

}

h1:before{

content: "第" counter(demo)"章" ":";

}

h1{

counter-increment: demo;

}

三,多列:

1,(引导语:让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。)

2,之前换行用什么???

答:长单词换行

word-wrap : normal/break-word;

文本换行

word-break : normal/break-all/keep-all;

3,不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count(列的具体个数) 和 column-width(列宽)column-gap(列之间的缝隙间隔宽度)column-rule(规定列之间的中间分割线宽度、样式和颜色规则)。

时间: 2024-10-09 21:06:12

css中内容生成器的相关文章

CSS实现pre标签中内容换行方法

CSS实现pre标签中内容换行方法技术 maybe yes 发表于2015-01-25 18:35 原文链接 : http://blog.lmlphp.com/archives/70  来自 : LMLPHP后院 HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果:DIV 标签可以很方便的换行,不会把页面撑破.因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器.使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换

使用CSS使内容垂直居中的N中方法。

使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;

使用CSS使内容垂直居中的N中方法

用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;

CSS中的一些内容总结

一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所有子元素继承父元素的属性.但是对子元素的Style做修改后,就会覆盖父元素的属性. 2.派生选择器 通过元素的上下文关系去选择元素,不同级别的元素使用空格隔开即可,表示选择空格前的元素中后代元素为空格后的内容的元素.如: li strong { font-style: italic; font-we

css中font系列常见内容

font 可以一次性定义以下五种属性的值,常见的是前四种.不用所有的都写上,有什么些什么,没有的不写,各个属性值之间用空格. 说实话,如果能够单独写就单独写,真不知道这样写有什么样的好处,还麻烦 注意:书写的顺序 font-style font-variant font-weight font-size/line-height font-family 另外还有一些别的属性值:主要是应用在一些特殊的应用场景的制定字体,比如下拉列表.按钮.对话框.图标标记.窗口状态栏等等 caption 定义被标题

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

HTML CSS 中DIV内容居中汇总

转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valig

CSS中隐藏内容的3种方法

CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码.文字.链接.图片.div层,是推荐的内容隐藏方式. <div style="display:none;">隐藏内容</div> 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. i

CSS中超出的文本内容显示省略号

首先,分析超出内容有两种情况,单行内容超出和多行内容超出,以下逐一说明: 单行内容操作: 单行操作必须有width属性,就是元素要有宽和高的限制才可以,具备以上基本条件之后,编写以下代码 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 此时,即可看到单行文本超出显示省略号的效果. 多行内容操作: 多行文本超出省略早期是没有该写法的,本文使用的是css3对WebKit的拓展写法,需要注意,该方法只适用于WebKit浏览器和移