搜索
您的当前位置:首页正文

CSS:列表样式(设置列表项的标志图案/位置)_html/css_WEB-ITnose

2023-11-27 来源:学路情感网

通过CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。

代码整理自w3school:http://www.w3school.com.cn

效果图:

示例代码:

CSS 列表样式  

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

(一)设置列表的列表项标志:list-style-type
  • 苹果
  • 橘子
  • 香蕉
  • (二)设置自定义图标为列表的列表项标志:list-style-image
  • 苹果
  • 橘子
  • 香蕉
  • (三)设置列表项标志的位置:list-style-position (1)inside
  • 苹果
  • 橘子
  • 香蕉
  • (2)outside
  • 苹果
  • 橘子
  • 香蕉
  • (四)将以上3个列表样式属性合并为一个属性:list-style
  • 苹果
  • 橘子
  • 香蕉
  • 小编还为您整理了以下内容,可能对您也有帮助:

    怎么将ul下的li标签横着排列,要设置那个属性?

    把ul包含的li定义为一个类,在css样式用类选择器设置li的float属性为向左浮动,

    即为float:left;

    最好将无序列表前面的点去掉。即ul的list-style-type:none;这样设计出来的比较美观。

    扩展资料:

    CSS 列表属性(list)

    1.list-style    简写属性。用于把所有用于列表的属性设置于一个声明中。    

    2.list-style-image    将图象设置为列表项标志。    

    3.list-style-position    设置列表中列表项标志的位置。    

    4.list-style-type    设置列表项标志的类型。    

    在css中list-style是什么意思?

    list-style简写属性。用于把所有用于列表的属性设置于一个声明中。

    list-style-image将图象设置为列表项标志。

    list-style-position设置列表中列表项标志的位置。

    list-style-type设置列表项标志的类型。

    CSS是什么

    CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。

    通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 。

    样式存储在样式表中,通常放在<head>部分或存储在 外部CSS文件中。

    作为网页标准化设计的趋势,CSS取得了浏览器厂商的广泛支持,正越来越多的被应用到网页设计中去。

    CSS有各种版本(即Level),所以知道要使用哪个版本是很重要的。

    CSS 1 在1996年末成为推荐标准,其中包含非常基本的属性,比如字体,颜色、空白边。

    CSS2 在此基础上添加了高级概念(比如浮动和定位)以及高级的选择器(比如子选择器、相邻同胞选择器和通用选择器)。

    在编写本书时,CSS2仍然是CSS的最新版本,尽管它早在1998年就已经成为推荐标准。

    万维网联盟(W3C)的行动非常缓慢,所以尽管CSS3的开发工作在新千年开始之前就开始了,但是距离最终的发布还有相当长的路要走,为提高开发和浏览器实现的速度,CSS3被分割成模块,这些模块可以发布和实现。

    CSS3包含一些令人兴奋的新特性,包括一个用于多列布局的模块,但是,选择器模块最接近于完成,可能在2006年成为推荐标准。

    因为预期从CSS2到CSS3的发布之间时间会很长,2002年人们启动了CSS2.1的开发。

    这是CSS2的修订版,它计划纠正一些错误,并且更精确地描述CSS的浏览器实现。

    CSS2.1正在逐渐接近完成,但是可能在2006年年底之前无法实现,然而,它更准确地反映了CSS当前的状态。

    层叠样式表解决了一个普遍的问题

    HTML 标签原本被设计为用于定义文档内容。

    通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。

    同时文档布局由浏览器来完成,而不使用任何的格式化标签。

    由于两种主要的浏览器(Netscape 和 Inter Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地于文档表现层的站点变得越来越困难。

    为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。

    所有的主流浏览器均支持层叠样式表。

    层叠式表的特点

    1、便于页面的修改。

    2、便于页面风格的统一。

    3、减少网页的体积。

    层叠样式表极大地提高了工作效率

    样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。

    样式通常保存在外部的 .css 文件中。

    通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

    由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。

    作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。

    如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

    [1]

    编辑本段CSS历史

    1994年哈坤·利提出了CSS的最初建议;伯特·波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。

    当时已经有过一些关于样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。

    在CSS中,一个文件的样式可以从其他的样式表中继承下来。

    读者在有些地方可以使用他自己更喜欢的样式,在其他地方去继承,或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

    哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年他与波斯一起再次提出这个建议。

    当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。

    哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。

    1996年底,CSS已经完成。

    1996年12月CSS要求的第一版本被出版。

    1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。

    这个工作组开始讨论第一版中没有涉及到的问题,于是1998年5月出版了CSS的第二版。

    到2007年为止,第三版还未完备。

    编辑本段使用CSS布局的优点

    采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势:

    1:表现和内容相分离

    将设计部分剥离出来放在一个样式文件中,HTML文件中只存放文本信息。

    这样的页面对搜索引擎更加友好。

    2:提高页面浏览速度

    对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

    浏览器就不用去编译大量冗长的标签。

    3:易于维护和改版

    你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

    4: 使用CSS布局更符合现在的W3C标准.

    ps:W3C组织并不是ISO 国际标准组织成员

    编辑本段感性体验CSS

    什么是CSS呢?你可能急迫的想知道答案。

    但是空泛的文字描述意义不大,让我们先来一点感性体验吧。

    是一个普普通通的网页。

    然而通过给这个文件添加的CSS规则,我们可以得到十分美观的网页。

    这还不是全部,不改动HTML,只是通过添加不同的CSS规则,我们就可以得到各种不同样式的网页:

    什么是CSS

    * CSS是Cascading Style Sheets(层叠样式表)的简称.   * CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

    CSS的作用

    * 在标准网页设计中CSS负责网页内容(XHTML)的表现.   * CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.   * 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.   * CSS是由W3C的CSS工作组产生和维护的。

    为什么叫层叠?   在页面显示的过程中,有很多的样式作用在页面元素上,这些样式来自不同的地方。

    浏览器自己有默认的样式,网页作者有自己写的样式,用户也可能有自己的样式, 但是最终显示的样式是其中之一,它们之间产生了冲突,CSS通过一个称为层叠(cascade)的过程处理这种冲突。

    层叠给每个规则分配一个重要度:作者的样式表被认为是最重要的,其次是用户的样式表,最后是浏览器或用户代理使用的默认样式表。

    为了让用户有更多的控制能力,可以通过将任何规则指定为!important来提高它的重要度,让它优先于任何规则,甚至优先于作者加上!important标志的规则。

    因此,层叠采用以下重要度次序:标为!important的用户样式>标为!important的作者样式>作者样式>用户样式>浏览器/用户代理应用的样式。

    然后,根据选择器的特殊性决定规则的次序。

    具有更特殊选择器的规则优先于具有比较一般的选择器的规则。

    如果两个规则的特殊性相同,那么后定义的规则优先。

    由此可见,层叠是指不同的优先级的构成的层的叠加。

    编辑本段如何将样式表加入到网页

    可以用以下四种方式将样式表加入您的网页。

    而最接近目标的样式定义优先权越高。

    高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

    例外请参阅 !important 声明。

    定义内部样式块对象

    你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。

    定义方式请参阅样式表语法。

    示例如下:   <>   <head>   <title>文档标题</title>   <style type=text/css>   <!--   body {font: 10pt "Arial"}   h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}   h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}   p {font: 10pt/12pt "Arial"; color: black}   -->   </style>   </head>   <body>   正文内容   </body>   </>   请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。

    内联定义 (Inline Styles)

    CSS之旅(1):为什么要用CSS_html/css_WEB-ITnose

    原文出处: 一线码农不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻。。既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容基本上就是和你交谈一样,非常舒服,好了,下面从正文说起。

    一:为啥要学习CSS

    当你知道CSS的历史还是蛮有味道的,在很久很久以前,web上没有css,只有一些html的标签,比如p,h1?h5? div span,ul 等等,这些html标记

    都是一个具有特定含义的html标签,过去人很实在,不讲究排版,只要内容是干货就好了,就比如现在的博客园排版,简洁美,我们这些码农同样也不在乎这

    个,只要文章是干货就好,但是呢?web用户不是程序员,他们才不讲究干货不干货,他们讲究外表,讲究炫酷,讲究如何的个性,这样的话Html就扛不住了,

    W3C组织就为了满足这些人的胃口,提供了一些装饰html标记的标记,比如strong,font,b,u等等。。就比如下面这样。

    你好

    然后的然后,程序员就有了下面这样的抱怨了。。

    第一: 老子为了decorate个text,要写无数个标签,我操。。多麻烦。。

    第二:马丹,现在我们的页面结构开始越来越复杂,这些几把font, b压根就不能重用,根本就是完蛋的东西。。高个毛啊。。

    第三:现在国家这么穷,带宽这么贵,我的html体积真tmd的大,内容其实仅仅占不到html的1/10。。我的客户有时候要几分钟才能打开。。这样下去,

    我要失业了。

    结果就这样W3C招致网上程序员的骂声一片,原本的想法就是想通过一些样式的html标记来修饰html的结构内容,结果导致现在的一片混乱,而且页面结构失

    衡。。面对三大问题,W3C就开始推出了CSS,这个装修Html的层叠样式表。彻底的解决了程序员提出的三大难题。。

    二:如何解决三大难题

    1. 无数个标签的问题

    css采用一条条规则来decorate各个html的结构元素,规则的结构采用 “标签+内容声明” 的方式,比如:

    p { font-size: 20px; color: red; margin: auto 0; width: 50%; }

    这种定义我想没什么好说的,这样的话,我们把html中的装饰标签全部拿出来了,放到一个专门的css规则中,这样的好处大家也看到了,”内容“和”展示”的分离,

    这样的话就解决了程序员们的第一个抱怨。

    2. 装饰标签的重用问题。

    确实,原始的html装饰标签无法做到重用,这样的话自然就会导致页面膨胀,css就采用了规则组来解决这个问题,先把规则写好,然后哪个标签想用的话,自己套用

    下已设定的css定义就可以了。这样的话也就解决了重用的问题。

    3. 体积膨胀的问题

    如果第一,第二个问题没有解决好,第三个问题自然会发生,而且我想还有其他一连串的连锁反映,那么css都采取了哪些手段来解决的,为了突出css的终极目标,必须

    严格的做到“内容”和“展现”的分离,要做到“分离”,那就必须将css单独的封装到一个专门的css文件,这样的话,就不光可以做到单个html页面的标签重用,甚至可以多页

    面重用,多站点重用。那下一个问题就来了,引用css文件的方式有哪些??? 哪些是不值得提倡的?

    三:css文件的引用方式

    1. link引用

    当你把css拖入到vs的时候,默认就是link模式,link它本来就是xhtml的一个标签,所以我们还可以用js来动态追加和控制,这个我想大家都清楚,还有一点好玩的地方就

    是可以做“候选样式表”,在浏览器中可以动态选择自己想要的样式,比如下面我定义了两个css文件,分别让页面展示 red 和 blue 的背景。

    然后我们可以在浏览器中可以动态切换我想要的css样式,蛮有意思的,虽然这种作用相对比较少见,由于截图不好截,大家可以使用 工具栏中的 ”查看“=> “样式”。

    2.import引用

    同样这个标记也可以导入,就像下面这样。

    @import url(blue.css)hello world;

    最后值得一提的是,尽量避免使用“内联样式”的style,如果这样的话,跟使用font,strong这样的标记几乎没有什么区别,就比如下面这样,所以我们尽量避免。

    hello world;

    好了,第一篇大概就这么说了,后续的我们再延伸,周末愉快。

    学路情感网还为您提供以下相关内容希望对您有帮助:

    怎么将ul下的li标签横着排列,要设置那个属性?

    把ul包含的li定义为一个类,在css样式用类选择器设置li的float属性为向左浮动,即为float:left;最好将无序列表前面的点去掉。即ul的list-style-type:none;这样设计出来的比较美观。

    在css中list-style是什么意思?

    list-style简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。

    HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

    1. 使用HTML标签的style属性如:这种方式的优点:分散灵活方便;缺点:缺乏整体性和规划性,不利于维护,维护成本高;这种方式的CSS渲染的优先级要高于其它三种。 2. 将样式代码写在标签中通常将style标签放到HTML文件标签里如...

    ...浏览器到底会选择哪个样式)_html/css_WEB-ITnose

    2.层叠 :也就是CSS中的C(cascading),主要是按照样式来源和特指度来层叠。a)样式来源 :以下是浏览器层叠各个来源样式的顺序:

    CSS之旅(1):为什么要用CSS_html/css_WEB-ITnose

    一:为啥要学习CSS 当你知道CSS的历史还是蛮有味道的,在很久很久以前,web上没有css,只有一些html的标签,比如p,h1?h5? div span,ul 等等,这些html标记 都是一个具有特定含义的html标签,过去人很实在,不讲究排版...

    css居中的几种方式_html/css_WEB-ITnose

    1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/} 2...

    CSS是什么

    CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 。样式存储在样式表中,通常放在&lt;head&gt;部分或存储在 外...

    CSS之旅(2):如何更深入的理解各种选择器_html/css_WEB-ITnose

    一:理解Dom模型 首先我们看下面的代码。 有名的公司一栏百度 新浪 阿里用这个代码我们很容易的画出dom树。 当你看到这个dom树的时候,是不是顿时感到信息量特别大,很简单,因为是树,所以就具有了一些树的特性,比...

    html标签中dl dd这个标签有什么作用??

    1、首先新建一个 DlDtDd.html 文件,如图所示。2、然后输入 &lt;!DOCTYPE html&gt; 作用:声明使用html5的标准,如图所示。3、接着输入网页结构的头部和主体,并且设置标题为:定义列表,如图所示。4、然后使用 dl&gt;dt,dd标签定义...

    CSS发展史

    CSS1.0 选择器:要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器,用来定义希望应用样式的HTML元素或者标签。样式属性:该属性主要...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    热门图文

    • 次韵钱申伯山堂之咏的朝代是什么

      《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏的朝代

      《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏朝代

      《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏的作者 次韵钱申伯山堂之咏的作者是什么]

      《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏的作者是什么

      《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    Top