list-style-image属性(CSS设置)

发布时间：2021-09-26 14:57 所属分类：热门主题浏览次数：

　　list-style-image属性

　　平时制作页面中可对特点list-style在list-item目标中常用，但用的都不深。一般都设为none重置整个页面就差不多OK，或许很多人包括自己对特点list-style-type更细节方面的特点并不是很了解，更有或许对特点list-style和特点list-style-type概念会比较含糊，现有必要把它提出来重新学习一下，故整理如下。

　　●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地址指定图画

　　●list-style-position

　　阐明:设置或检索作为目标的列表项符号如何依据文本摆放。假设一个列表项目的左外补丁(margin-left)被设置为0，则列表项目符号不会被显现。左外补丁(margin-left)最小能够被设置为30。仅效果于具有display特点值等于list-item的目标。如li目标。

　　取值:

　　outside:默认值。列表项目符号放置在文本以外，且环绕文本不依据符号对齐

　　inside:列表项目符号放置在文本以内，且环绕文本依据符号对齐

　　●list-style-type

　　阐明:设置或检索目标的列表项所运用的预设符号。若list-style-image特点值为none或指定url地址的图片不能被显现时，此特点将产生效果。

　　取值:

　　disc:CSS1实心圆

　　circle:CSS1空心圆

　　square:CSS1实心方块

　　decimal:CSS1阿拉伯数字

　　lower-roman:CSS1小写罗马数字

　　upper-roman:CSS1大写罗马数字

　　lower-alpha:CSS1小写英文字母

　　upper-alpha:CSS1大写英文字母

　　none:CSS1不运用项目符号

　　armenian:CSS2传统的亚美尼亚数字

　　cjk-ideographic:CSS2浅白的表意数字

　　georgian:CSS2传统的乔治数字

　　lower-greek:CSS2根本的希腊小写字母

　　hebrew:CSS2传统的希伯莱数字

　　hiragana:CSS2日文平假名字符

　　hiragana-iroha:CSS2日文平假名序号

　　katakana:CSS2日文片假名字符

　　katakana-iroha:CSS2日文片假名序号

　　lower-latin:CSS2小写拉丁字母

　　upper-latin:CSS2大写拉丁字母

　　弥补:此CSS2.1提出的.IE6,Firefox1.5+,Opera9+支持此特点,所以以数字方式显现列表也能够用ul来指定，并不一定必需要用ol来写。

　　CSS设置

　　凡是能够用JavaScript来写的运用，终究都会用JavaScript来写。——Atwood规律

　　尽管万物都可所以JavaScript，但某种程度css的运行效率会比JavaScript高，所以笔者以为:能用CSS完结的就不必麻烦JavaScript。

　　两种语言都有不同的用途随着浏览器版本特性和特点的增加，CSS正成为一种功用强大的语言，能够处理咱们从前依赖JavaScript完结的功用。

　　滑润翻滚

　　从前有一段时间，咱们不得不依靠JavaScript的window.scrollY来完结来履行此操作，假如想滑润翻滚还要依赖定时器增加一个动画。随着scroll-behavior特点的新增，咱们能够运用一行CSS代码来处理网站上的滑润翻滚！浏览器支持约为75％，兼容性还是挺不错的。

　　html{scroll-behavior:smooth;}仿制代码

　　屏幕录制2021-07-18上午10.14.21.gif完好代码[1]

　　翻滚捕抓

　　幻灯片、图片库这些也是前端高频运用功用，上一代CSS才能有限，咱们不得不依赖JavaScript来完结这功用。现在只需几行代码就能够完结此功用。从某种意义上说，它与Flexbox或CSSGrid的作业原理相似，即您需求一个容器元素，在该容器元素上设置scrolln-snap-type和多个为其设置了scroll-snap-align的子元素，如下所示：

　　.parent{scroll-snap-type:xmandatory;}.child{scroll-snap-align:start;}仿制代码

　　屏幕录制2021-07-17下午10.23.04.gif完好代码[2]

　　CSS动画

　　从前某个时期，大多数开发者运用JavaScript(或许jQuery)给浏览器中的元素增加动画。让这个淡化，让那个扩大，很简略。随着互动的项目越来越杂乱，移动设备的大量增加，体现性能变得越来越重要。Flash被抛弃，有天赋的动画开发者运用HTML5去完结过去从未完结的作用。他们需求更好的东西去开发杂乱的动画序列并取得最好的性能。JavaScript(或许jQuery)并不能够做到。浏览器日渐成熟的一起也开始供给了一些解决计划。最被广泛接受的计划是运用CSS动画。

　　屏幕录制2021-07-17下午10.38.14.gif完好代码[3]

　　表单验证

　　html5丰厚了表单元素，供给了相似required,email,tel等表单元素特点。相同的，咱们能够运用:valid和:invalid来做针对html5表单特点的校验。

　　:required伪类指定具有required特点的表单元素:valid伪类指定一个经过匹配正确的所要求的表单元素:invalid伪类指定一个不匹配指定要求的表单元素

　　屏幕录制2021-07-18上午9.15.50.gif运用CSS的content特点attr抓取资料

　　想必我们都想到了伪元素after，但是文字怎么取得呢，又不能用JavaScript。

　　CSS的伪元素是个很強大的东西，咱们能够运用他做许多运用，一般为了做一些作用，content:""多半会留空，但其实能够在里边写上attr抓资料哦！

　　hover

　　div{width:100px;border:1pxsolidred;position:relative;}div:hover:after{content:attr(data-msg);position:absolute;font-size:12px;width:200%;line-height:30px;text-align:center;left:0;top:25px;border:1pxsolidgreen;}仿制代码

　　屏幕录制2021-07-18上午9.42.38.gif鼠标悬浮时显现

　　鼠标悬浮的场景非常常见，例如导航的菜单：

　　image.png一般要把躲藏的东西如菜单作为hover方针的子元素或许相邻元素，才方便用css操控，例如上面的菜单，是把menu当作导航的一个相邻元素：

　　用户

　　账户设置

　　登出

　　仿制代码menu在正常态下是躲藏的：

　　.menu{display:none;}仿制代码而当导航hover时显现：

　　/*运用相邻选择器和hover*/.user:hover+.menu{display:list-item;}仿制代码注意这儿运用了一个相邻选择器，这也是上面说的为什么要写成相邻的元素。menu的位置能够用absolute定位。

　　一起menu自已自身hover的时分也要显现，不然鼠标一离开导航的时分，菜单就消失了：

　　.menu:hover{display:list-item;}仿制代码这儿会有一个小问题，即menu和导航需求挨着一起，不然中心有空地的话，上面增加的菜单hover就不能发挥作用了，但是实践情况下从美观的视点，两者是要有点距离的。这个其实也好解决，只需在menu上面再画一个通明的区域就好了，如下蓝色的方块：

　　能够用before/after伪类用absoute定位完结：

　　ul.menu:before{content:"";position:absolute;left:0;top:-20px;width:100%;height:20px;/*background-color:rgba(0,0,0,0.2);*/}仿制代码假如我既写了css的hover，又监听了mouse事情，用mouse操控显现躲藏，双重作用会有什么情况产生，假如按正常套路，在mouse事情里边hover的时分，增加了一个display:block的style，会覆盖掉CSS的设置。也就是说，只需hover一次，css的代码就不管用了，因为内联样式的优先级会高于外链的。但是实践情况下会有意外产生，那就是在移动端iphone上面，触摸会触发CSS的hover，而且这个的触发会很高概率地先于touchstart事情，在这个事情里边会判别当时是显现还是躲藏的状态，因为css的hover发挥了作用，所以判别为显现，然后又把它躲藏了。也就是说，点一次不出来，要点两次。所以最好别两个一起写。第二种场景，运用子元素，这个更简略。把hover的方针和躲藏的对象当作同一个父容器的子元素，然后hover写在这个父容器上面就能够了，不必像上面那样，躲藏元素也要写个hover：

　　.marker-container.detail-info{display:none}仿制代码.marker-container:hover.detail-info{display:block}仿制代码最后

　　这儿展示也只是一些常用的功用，其实还有许多能够经过CSS完结的功用，有兴趣的同学持续研究一下更多不依赖JavaScript完结的CSS功用。