CSS列表相关属性
1.列表属性
- 列表相关的属性，可以作用在
ul、ol、li元素上
| 属性名 | 功能 | 属性值 |
|---|---|---|
list-style-type | 设置列表符号 | 常用值如下：none：不显示前面的标识(很实用)square：实心方块disc：圆形decimal：数字lower-roman：小罗马数字uper-roman：大罗马数字lower-alpha：小写字母uper-alpha：大写字母 |
list-style-position | 设置列表符号的位置 | inside：在li里面outside：在li外面 |
list-style-image | 自定义列表符号 | url(图片属性) |
list-style | 复合属性 | 没有数量、顺序的要求 |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 jojoSpace！
相关推荐
2025-01-03
CSS基础
1.简介 CSS 全称为：层叠样式表（Cascading Style Sheets）。CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等。样式：文字大小、背景颜色，元素宽高。层叠：给网页一层一层“涂”上样式表：列表 简单理解：CSS 可以美化 HTML，让 HTML 更漂亮。 核心思想：HTML 搭建结构，CSS 添加样式，实现了：结构与样式的分离。 2.行内样式 写在标签style属性中（又称：内联样式）不推荐使用无法复用，样式写多了不方便维护 1<h1 style="color: cadetblue;font-size: 50px;">欢迎来到我的乐园！</h1> 3.内部样式 写在 HTML 页面内部，将所有的 CSS 代码提取出来，单独放在<style>标签中写法 12345678910111213<style> h1{ color: chocolate; font-size: 55px; } h2{ color:...
2025-01-03
CSS定位
1.相对定位1.1 如何给元素设置相对定位 给元素设置position:relative，即可实现相对定位 可以使用left、right、top、bottom四个属性调整位置 1.2 相对定位的参考点 相对自己原来的位置 1.3 相对定位的特点 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是： 定位的元素会盖在普通元素之上 都发生定位的两个元素，后写的元素会盖在先写的元素之上 left不能和right一起设置，top不能和bottom一起设置 相对定位的元素，也能继续浮动，但是不推荐这样做 相对定位的元素，也能通过margin调整位置，但不推荐这样做 注意：绝大多数情况下，相对定位会与绝对定位配合使用。 1.4 作用 对网页元素进行微调 配合绝对定位一起使用 2.绝对定位2.1 如何设置绝对定位 给元素设置position:absolute，即可实现相对定位 可以使用left、right、top、bottom四个属性调整位置 2.2...
2025-01-03
CSS布局
1.版心 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这就是网页的版心。 版心的宽度一般是960 ~ 1200像素之间 版心可以是一个，也可以是多个。 2.常用布局名词 位置 布局名词 顶部导航条 topbar 页头 header、page-header 导航 nav、navigator、navbar 搜索框 search、search-box 横幅、广告、宣传图 banner 主要内容 content、main 侧边栏 aside、sidebar 页脚 footer、page-footer 3.重置默认样式很多元素都有默认样式，比如： p元素有默认的上下margin。 h1 ~...
2025-01-03
CSS常用文本属性
1.文本颜色 属性名：color 可选值 颜色名 rgb或rgba HEX或HEXA(十六进制) HSL或HSLA 开发中常用的是：rgb/rgba或HEX/HEXA(十六进制) 2.文本间距 字母间距：letter-spacing 单词间距：word-spacing(通过空格识别单词，对中文不起作用，除非每个中文之间都加空格) 属性值为像素，正值让间距变大，负值让间距缩小。 3.文本修饰属性 属性名：text-decoration 可选值： none：无装饰线（常用） underline：下划线（常用） overline：上划线 line-through：删除线 可搭配如下值使用： dotted：虚线 wavy：波浪线 可以通过颜色写法指定颜色 举例： 1234.dragon { /* 下划的红色波浪线 */ text-decoration: underline wavy red;} 4.文本缩进属性 属性名：text-indent 属性值：CSS 中的长度单位，例如：px 举例： 123div...
2025-01-03
CSS浮动
1.简介 最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。最初的网页页面布局是通过表格来实现的，后续因为网页元素变得更多更大更复杂，表格来做布局，就显得力不从心且维护困难，后发现浮动也能实现布局的效果，就通过浮动来实现布局了。![[Pasted image 20240829104807.png]] 2.元素浮动后的特点 脱离文档流(这并不是一件好事) 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高 不会独占一行，可以与其他元素共用一行 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding 不会像行内块元素一样被当作文本处理（没有行内块的空白问题） 3.浮动后会产生的影响 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素下方，对浮动元素前面的兄弟无影响。 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然能够约束浮动的元素。 4.解决浮动产生的影响（清除浮动）解决方案： 方案 1：给父元素指定高度。 方案...
2025-01-03
CSS常用字体属性
1.字体大小 属性名：font-size 语法： 123.one { font-size: 50px;} 注意点 chrome浏览器支持的最小文字为12px, 默认的文字大小为16px，并且0px会自动消失 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要使用默认的大小 通常可以通过给body设置font-size属性，这样body中的其他元素就可以基础这一属性了 接住控制台看样式![[Pasted image 20240819170047.png]] 2.字体族 属性名：font-family 语法： 12345.god { font-size: 50px; /* 字体族都使用：非衬线字体 */ font-family: "STHupo", "Microsoft YaHei",...
