CSS样式更改——列表、表格和轮廓

简介: CSS样式更改——列表、表格和轮廓

前言


上篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,这篇文章分享列表、表格和轮廓,一起来看看吧。


1.列表List

1).列表的类型
<ul style='list-style-type:square'><li></li></ul>none      无标记disc      实心圆circle    空心圆square    实心方块decimal   数字none      无
2).列表的图像
<ul><li style='list-style-image:url(1.png)'></li></ul>

3).列表的位置

<ul><li style='list-style-position:inside'></li></ul>inside 列表项目标记放置在文本以内outside 列表项目标记放置在文本以外

这三者属性可以放在list-style中统一设置。


2.表格Table

1).折叠表格边框
table  {  border-collapse:collapse  }separate 边框会被分开collapse 边框合并为一个单一的边框
2).表格文本对齐
设置水平对齐方式,比如左对齐、右对齐或者居中td  {  text-align:right  }设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐td  {  vertical-align:bottom  }
3).单元格边框间距
table  {  border-spacing:10px 50px  }可以使用像素,不允许负值。如果定义一个length 参数,那么定义的是水平和垂直间距如果定义两个length 参数,那么第一个设置水平间距,而第二个设置垂直间距
4).表格标题的位置
caption  {  caption-side:bottom  }top     表格标题定位在表格之上bottom  表格标题定位在表格之下
5).显示表格中的空单元格
table  {  empty-cells:hide  }hide 不在空单元格周围绘制边框show 在空单元格周围绘制边框
6).设置表格布局算法
table  {  table-layout:fixed;  }automatic 列宽度由单元格内容设定fixed     列宽由表格宽度和列宽度设定


3.轮廓 Outline

1).设置轮廓颜色
div {  outline-color:red}
2).设置轮廓样式
div  {  outline-style:dotted  }和边框的风格是一样的
3).设置轮廓宽度
div  {  outline-width:1px  }

参考文档:W3C官方文档(CSS篇)


二、总结


这篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓,希望让大家对CSS选择器有个简单的认识和了解。

相关文章
|
1天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
16 1
|
15天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
9天前
|
前端开发
css <样式一>
css <样式一>
14 1
|
26天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
32 6
|
1月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
3天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
10 0
|
30天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
1月前
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
27天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
44 0
|
27天前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
35 0