html ul list style,CSS list-style列表样式属性用法介绍
list-style我们使用得最多的地方就是ul li中了,但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别在哪里,下面我来给各位朋友详细介绍。
解析CSS列表样式属性list-style
平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深。一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它提出来重新学习一下,故整理如下。
义和用法
list-style 简写属性在一个声明中设置所有的列表属性。
说明
该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。
可以按顺序设置如下属性:
•list-style-type
•list-style-position
•list-style-image
◆list-style
定义:用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。
相关:list-style-imagelist-style-positionlist-style-type
◆list-style-image
说明:设置或检索作为对象的列表项标记的图像。若此属性值为none或指定url地址的图片不能被显示时,list-style-type属性将发生作用。
取值:
none: 默认值。不指定图像
url(url): 使用绝对或相对url地址指定图像
把图像设置为列表中的项目标记: 代码如下 复制代码
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}
例 代码如下 复制代码
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
- 咖啡
- 茶
- 可口可乐
◆list-style-position
说明:设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁(margin-left)被设置为0,则列表项目标记不会被显示。左外补丁(margin-left)最小可以被设置为30。仅作用于具有display属性值等于list-item的对象。如li对象。
取值:
outside: 默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐
实例
规定列表中列表项目标记的位置: 代码如下 复制代码
ul
{
list-style-position:inside;
}
实例 代码如下 复制代码
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
该列表的 list-style-position 的值是 "inside":
- Earl Grey Tea - 一种黑颜色的茶
- Jasmine Tea - 一种神奇的“全功能”茶
- Honeybush Tea - 一种令人愉快的果味茶
该列表的 list-style-position 的值是 "outside":
- Earl Grey Tea - 一种黑颜色的茶
- Jasmine Tea - 一种神奇的“全功能”茶
- Honeybush Tea - 一种令人愉快的果味茶
浏览器支持
所有浏览器都支持 list-style-position 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
◆list-style-type
说明:设置或检索对象的列表项所使用的预设标记。若list-style-image属性值为none或指定url地址的图片不能被显示时,此属性将发生作用。
实例
本例改变列表的类型: 代码如下 复制代码
function changeList()
{
document.getElementById("ul1").style.listStyle="decimal inside";
}
- Coffee
- Tea
- Water
- Soda
value="Change list style" />
html ul list style,CSS list-style列表样式属性用法介绍相关推荐
- Css中设置列表项目符号属性,CSS如何设置列表样式属性,分享
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- CSS基础(part7)--字体样式属性
学习笔记,仅供参考,有错必纠 参考自:CSS中文文档 文章目录 CSS CSS的长度单位 字体样式属性 font-size font-family font-weight font-style fon ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- html svg 背景图片,在CSS背景图片中使用svg的用法介绍(附示例)
本篇文章给大家带来的内容是关于在CSS背景图片中使用svg的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在CSS背景图片中使用SVG,可以使用css backg ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- [Coding Style] CSS coding style
CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...
- 如何使用 CSS 自定义无序列表样式
大家好,我是前端西瓜哥. 前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说. 设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点. 默认的无序列表样式是这样的. <sty ...
- css列表大全,CSS中li列表样式汇总大全,全实例展示
CSS中 列表样式li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} ...
最新文章
- Windows 10 install Pycharm 开发环境
- Netty入门系列(1) --使用Netty搭建服务端和客户端
- mybatis plus 多表查询_Mybatis 多表查询之一对多
- Alpha版使用说明
- cas实现单点登录原理
- 网页设计个人主页源码_WebSSH - 网页上的SSH终端
- java程序包不存在_idea Error:(3, 32) java: 程序包***不存在的问题
- linux性能架构,Linux性能及调优指南(翻译)之Linux内存架构
- 01背包问题-一维数组实现原理
- 流程图讲解_流程图小作文练习,详细讲解+精选范文!你们的魔鬼来了(一)...
- NetCore控制台实现自定义CommandLine功能
- 《用户体验要素——以用户为中心的产品设计》整理
- 阿铭linux苹果客户端,2018年5月 – 阿铭Linux
- 驱动一款淘宝购买的130万像素的USB双目摄像头-记录
- 金融衍生品已成为金融革命新力量
- 通过分类为数组元素添加一个倒序的方法.
- 怎样理解python是解释型语言
- linux删除卸载npm,卸载安装node npm (Mac linux )
- MySQL高级-04-授课笔记
- webpack自定义loader