用css怎么设置div滚动条的样式,可改变大小的

html-css033

用css怎么设置div滚动条的样式,可改变大小的,第1张

在css设置可改变大小的div滚动条样式方法:

1.首先新建html文档,进入代码书写界面。

2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。

* {

margin: 0

padding: 0

border: 0

}

body {

background: #CCC

padding-top: 20px

text-align: center

} * 代表所有元素

所以对*设置了属性 也就是对html标签的所有元素设定了属性

而body只是一个标签

但是他是结构标签的开始

所以给他设置的属性 如果之后的标签 有继承属性 那么他就会或者body标签允许继承的属性,比如背景颜色 字体大小 字体颜色等。

至于听谁的

按照规则 听父元素的。

比如结构如下:

*{ color:#FF0000(红色)}

body{ color:#000066(蓝色)}

<body>

321

<p>123</p>

</body>

这里的 321 是什么颜色呢?

这里的 123 会是什么颜色呢?

分析一下

第一句*{color:#FF0000}告诉我们 所有标签下面的字体颜色都是红色的。

那么body 就有color:#FF0000的属性了 而P 也一样有。

这个时候我们设置body{ color:#000066},那么根据规则 如果属性重复,那么就取最近设置的。那么body的颜色就会是蓝色的。而P 标签如果没有颜色设置就会继承body的蓝色 但是开始的时候 *已经给P标签设置了红色。那么

这里 的 321 会使用body的蓝色

而123会使用P 标签的红色

*{} 包括<html>与</html>中的所有属性样式定义,只要其下方没有再次对标签进行独立定义,则样式按通配符 * {} 所定义的来执行。

body{}包括<body>与</body>中的样式定义,只要其下方没有再次对标签进行独立定义,则样式按 body {} 所定义的来执行。

* 最常用的是 *{margin:0padding:0} 可以使所有的浏览器这两项默认值统一,有利于后期的兼容性调整。

最外层设置一个布满屏幕的DIV后设置属性,这是很多设计者使用的办法,它可以解决一个页面整体可见元素居中的问题,还可以解决漏掉的一些元素定义的问题,如背景,有些块状元素<div>等没有定义背景,将直接使用最外部的一个背景设置。