前端入门-css 网格项属性

html-css023

前端入门-css 网格项属性,第1张

上篇介绍了网格容器、网格轨道的相关属性使用方法，如果您还不熟悉网格，建议先去看看之前的文章前端入门——css Grid网格基础知识 ，前端入门——css 网格轨道详细介绍 学习下网格基本知识。

本篇主要介绍网格项的相关属性：

以上四组属性都和网格线密切相关，它们定义了网格项如何根据网格线来定位网格项的位置。

语法如下：

属性值说明：

如下示例：

项目可以相互重叠。您可以使用 z-index 它们来控制它们的堆叠顺序。

上面介绍的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四个属性还可以使用 grid-row-start 和 grid-row-end 进行简写。

语法：

属性值：

如下示例：

使用此属性可以命名一个网格区域，以便在 grid-template-areas 属性创建的模板中引用此网格区域，或者作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的简写。

语法如下：

属性值：

如下示例：

为网格区域分配名称的一种方式

作为简写

https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

让前三条新闻实现红色单纯做css的话很容易，写个.red{color:#FF0000}类就可以，然后赋给3条新闻。

但是一般在做网站中，调用新闻一般是用程序读取数据库直接循环出来的。

在程序中加上以下内容一般即可解决

i=1

i++

if i <= 3 then

listyle=" class='red' "

end if

然后在<li listyle>即可，不同语音你不同用法，但是大概是相通的。

用css可以改变table中的字体颜色，用到的工具，notepad++,示例代码如下：

用css控制table中字体的颜色，代码如下：

<style>

.color{color:#ff0000}

</style>

<table><tr><td class="color">请用css给我着色红色</td></tr></table>

运行效果图：

注意事项：table的td本身就支持颜色简单属性。