CSS如何设置列表样式属性(看这篇文章就够用了)_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

1、文本缩进:text-indent2、文本对齐:text-align3、字间隔:word-spacing4、字母间隔:letter-spacing5、字母转换:text-transform6、文本装饰:text-decoration7、处理空白符:white-space8、文本方向:decoration9、文本颜色:color10、背景颜色:background-color11、文本阴影:text-shadow还有一些属性,不是很常用,就没有列举了,了解每个具体的使用方法,可以到百度"w3cschool"了解!希望对你有所帮助www.zgxue.com防采集请勿采集本网。

列表样式属性  在 HTML 中有 2 种列表、无序列表和有序列表,在工作中无序列表比较常用,无序列表就是 ul 标签和 li 标签组合成的称之为无序列表,那什么是有序列表呢?就是 ol 标签和 li 标签组合成的称之为有序列表,列表的基础知识就简单说明下,本章内容主要说明的是如何给列表设置样式,若有不懂列表是什么的园友笔者建议去 W3school官网 进行学习。 列表样式常用的属性有4种如: list-style-typelist-style-positionlist-style-imagelist-style ,在这里就是简单说明下列表常用的属性名称而已,具体使用或每一个属性值的介绍,在下面会具体的说明,爱学习的园友不用担心哦。

这根本是个文字排版的问题,妥妥的选行高啊

list-style-type属性 list-style-type属性作用:就是设置列表前面项目符号的类型。 list-style-type属性值说明表。

http://www.w3school.com.cn/ 去学习 告诉你一次 下一次你也不知道阿 一天能看完 你看HTML CSS 和javascript 3个

    

属性值 描述
none 将列表前面项目符号去除掉。
disc 将列表前面项目符号设置为实心圆。
circle 将列表前面项目符号设置为空心圆。
square 将列表前面项目符号设置为实心小方块。

设置或检索对象中的文本字体的粗细 normal: 正常的字体。相当于数字值400 bold: 粗体。相当于数字值700。bolder: 定义比继承值更重的值 lighter: 定义比继承值更轻的值 font-weight:bold;

属性值为none使用方式 让我们进入列表的 list-style-type 属性值为 none 实践,实践内容如:使用 class 属性值为 .box 将列表前面项目符号去除掉。 我们在实践列表的 list-style-type 属性值为 none 之前看看列表前面项目符号是什么,让初学者有一个直观的印象。

css样式表中字体加粗的属性是:“font-weight”。语法:font-weight:normal|e799bee5baa6e4b893e5b19e31333366306465 bold|bolder|lighter| normal:正常的字体。相当于数字值400 bold:粗体。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为none实践</title></head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul></body></html>

结果图

现在爱学习的园友们知道了什么是列表前面的项目符号了,那我们就进入列表的 list-style-type 属性值为 none 实践咯。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为none实践</title> <style> .box{ list-style-type: none; } </style></head> <body> <ul class="box"> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul></body></html>

结果图

既然能看到这里说明园友已经掌握了,列表的 list-style-type 属性值为 none 使用,恭喜恭喜恭喜。

属性值为disc使用方式

在这里说明下列表的 list-style-type 属性值为 disc ,列表的 list-style-type 属性值默认就是 disc ,如果是细心的园友已经发现了,上面有现成的列子在这里就不过多的介绍了,这个属性值为 disc 就跳过了哈。

属性值为circle使用方式

让我们进入列表的 list-style-type 属性值为 circle 实践,实践内容如:将列表前面的项目符号设置为空心圆。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为circle实践</title> <style> .box{ list-style-type: circle; } </style></head> <body> <ul class="box"> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul></body></html>

结果图

属性值为square使用方式

让我们进入列表的 list-style-type 属性值为 square 实践,实践内容如:将列表前面项目符号设置为实心方块。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为square实践</title> <style> .box{ list-style-type: square; } </style></head> <body> <ul class="box"> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul></body></html>

结果图

list-style-position属性

list-style-position 属性作用:设置列表前面项目符号的位置, list-style-position 属性有2个属性值,分别是 outsideinside ,具体说明看下面的属性值说明表。

list-style-position属性值说明表 

    

属性值 描述
outside 将列表前面项目符号设置在外面。
inside 将列表前面项目符号设置在里面。

属性值为outside使用方式 在实践 list-style-position 属性值为 outside 之前,我们先看看列表前面的项目符号的默认位置在哪,笔者为了让初学者有一个直观的印象,笔者将 HTML 页面中的 ul 标签 li 标签设置了一些样式。  ul 标签样式如:: width 宽度设置为 300px 像素、 height 高度为 150px 像素、 border 边框为( 1px 像素、显示是实线、边框颜色为蓝色)、样式。 ul 标签中的 li 标签设置样式如: width 宽度设置为 280px 像素、 height 高度为 30px 像素 line-height 行高为 30px 像素、 border 边框为( 1px 像素、显示是实线、边框颜色为红色)、样式。 如果园友没有掌握 border 边框的知识,爱学习的园友不用担心以后会写 border 边框的文章,若有想了解 border 边框知识的园友可以去W3school官网 进行学习。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性值为outside使用方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; } </style></head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body></html>

结果图

现在大家应该很清楚的看到了列表前面项目的符号默认在 ul 标签和 li 标签之间的位置,现在我们知道了列表前面的项目符号的默认位置,那我们进行 list-style-position 属性值为 outside 实践了,实践内容:将 HTML 页面中的列表前面的项目符号设置为外面。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性值为outside使用方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; list-style-position: outside; } </style></head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body></html>

结果图

注意:为什么给列表设置了 list-style-position 属性值为 outside ,运行结果没有发生任何变化呢,因为列表前面的项目符号默认就在外面的位置,列表前面的项目符号外面的位置就是 ul 标签和 li 标签之间的位置。

属性值为inside使用方式

     通过介绍 list-style-position 属性值为 outside ,大家已经知道了列表前面项目符号外边的位置了,接下来我们将列表前面项目符号设置在里面咯。 让我们进入 list-style-position 属性值为 inside 实践,将列表前面项目符号位置设置在里面。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性值为inside使用方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; list-style-position: inside; } </style></head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body></html>

结果图

注意: list-style-position 属性值为 inside 作用就是将列表前面项目符号位置设置在 li 标签中,这就是里面的位置。

list-style-image属性

list-style-image 属性作用:将列表前面项目符号设置为一张图片。

 list-style-image属性说明表 

    

属性值名称 描述
url 设置列表前面项目符号的图片的路径

让我们进入 list-style-image 属性的实践,实践内容将列表前面项目符号更换一张图片。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用list-style-image属性方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; list-style-image: url(./img/001.png); } </style></head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body></html>

结果图

注意:图片路径一定要写在 url(./img/001.png); 括号当中,不然不会被渲染的,图片路径可以是相对路径也可以绝对路径。

list-style属性

list-style 属性是( list-style-type 属性、 list-style-position 属性、 list-style-image 属性)的一个简写属性,它集成了( list-style-type 属性、 list-style-position 属性、 list-style-image 属性)的功能。

让我们进入 list-style 属性实践,既然看到了这里想必园友都已经掌握了本章的内容了。

代码块

css类选择器样式只需要引入对应的jquery就可以了。CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用list-style属性方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 290px; height: 30px; line-height: 30px; border: 1px solid red; list-style: none inside url(./img/001.png) ; } </style></head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body></html>

结果图

注意: list-style 属性值可以也 1 个或 23 个,顺序没有要求,若有不明白的园友可以做个实例看看就明白了,学习就要多尝试不要偷懒呦。

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class,然后在通过给这个元素设置它的width和height等等一些样式,具体的看代码:div1{width:600px;height:200px;font-size:13px;}div select{width:200px;}div select option{width:150px;height:30px;}VolvoSaabOpelAudi内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css列表滑动防止被底部遮住和适配屏幕长一点的机型处理
  • css设置列表样式和创建导航菜单实现代码
  • css无序列表创建的标准菜单效果代码
  • css实现带有小图片的li图标列表菜单
  • css文章列表切换选项卡效果实例
  • 纯css实现图片列表悬停放大效果的方法
  • css list-style修改列表属性控制li标签样式
  • css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内
  • html+css+javascript实现列表循环滚动示例代码
  • css去除列表默认边距的简单方法
  • css怎样设置下拉列表(select)样式?
  • CSS设置文本样式的属性有哪些
  • Css样式表中有几种设置方式,区别是什么?
  • dreamweaver中项目列表默认是竖向的,在CSS中如何用样式把它变成横向的
  • 如果我们要设置文本的行间距,应该设置CSS样式的哪一类型的属性
  • javaScript如何获取css样式属性
  • 如果要使用CSS将文本样式定义为粗体,需要设置什么文本属性?
  • css样式表中字体加粗的属性是什么?
  • 在html的元素上应用css类选择器样式,需要添加哪个html属性
  • CSS控制列表样式属性list-style有哪些?怎么用
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css列表样式css设置列表样式和创建导航菜单实现代码css无序列表创建的标准菜单效果代码css实现带有小图片的li图标列表菜单css文章列表切换选项卡效果实例纯css实现图片列表悬停放大效果的方法css list-style修改列表属性控制li标签样式css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内html+css+javascript实现列表循环滚动示例代码css去除列表默认边距的简单方法css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved