2. it技术
  3. CSS样式相关汇总

CSS样式相关汇总

it2026-06-04  5

1.CSS背景

CSS 背景属性用于定义HTML元素的背景。

Property描述常用属性值background简写属性，作用是将背景属性设置在一个声明中 background-attachment背景图像是否固定或者随着页面的其余部分滚动scroll、fixedbackground-color设置元素的背景颜色 background-image把图像设置为背景 background-position设置背景图像的起始位置left、top、center、bottom、x% y%background-repeat设置背景图像是否及如何重复repeat、no-repeat、repeat-x、repeat-y

2.文本样式

属性描述常用属性值color设置文本颜色 direction设置文本方向ltr(左到右)、rtl(右到左)letter-spacing设置字符间距length(eg:5px || -2px)line-height设置行高number(固定间距)、number(字体倍数)、%(字体百分比)text-align对齐元素中的文本left、right、centertext-decoration向文本添加修饰underline、overline、line-through、nonetext-indent缩进元素中文本的首行length(eg:50px)text-shadow设置文本阴影text-shadow: h-shadow v-shadow blur colortext-transform控制元素中的字母capitalize(首字母大写)、uppercase、lowercaseunicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐text-top、text-bottomwhite-space设置元素中空白的处理方式nowrap(不换行)、pre-line(合并空白符)word-spacing设置字间距length(eg:50px)

3.字体样式

Property描述常用属性值font在一个声明中设置所有的字体属性 font-family指定文本的字体系列 font-size指定文本的字体大小 font-style指定文本的字体样式normal、italic(斜体)font-variant以小型大写字体或者正常字体显示文本small-capsfont-weight指定字体的粗细。bold、bolder、lighter、100-900

4.列表样式

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

属性描述常用属性值list-style简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image将图像设置为列表项标志URL、nonelist-style-position设置列表中列表项标志的位置inside、outsidelist-style-type设置列表项标志的类型none、disc、circle

默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

ul {  list-style-type: none;  margin: 0;  padding: 0; }

5.表格样式

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框。

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table {    border-collapse:collapse; } table, th, td {    border: 1px solid black; }

表格宽度和高度

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

table {    width:100%; } th {    height:50px; }

表格填充

td {    padding:15px; }

表格颜色

table, td, th {    border:1px solid green; } th {    background-color:green;    color:white; } td { background-color:orange; color:white; }

效果如下：

 

6.边框样式

属性描述border简写属性，用于把针对四个边的属性设置在一个声明border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色

我们也可以单独对上下左右边框进行设置 border-bottom|left|top|right-xxx

7.轮廓样式

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

 

属性说明outline在一个声明中设置所有的轮廓属性outline-color设置轮廓的颜色outline-style设置轮廓的样式outline-width设置轮廓的宽度

8.属性选择器

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：

[title] {    color:blue; }

属性和值选择器

下面的实例改变了标题title='runoob'元素的边框样式:

[title=runoob] {    border:5px solid green; }

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

这个包含，并不是指属性值中某个片断的值，而是属性值被空格隔开的一个完整单词

比如 hello world、student hello都包含hello

[title~=hello] { color:blue; }

下面是以指定值开头的lang属性的元素样式的例子，使用（|）分隔属性和值:

这个的值必须得是一个单词，如果为多个单词，就获取不到。比如en就匹配不到 en a，但可以匹配到en-gb。

[lang|=en] { color:blue; }

表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"] {    width:150px;    display:block;    margin-bottom:10px;    background-color:yellow; } input[type="button"] {    width:120px;    margin-left:35px;    display:block; }

9.计数器

CSS 计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器

counter-increment - 递增变量

content - 插入生成的内容

counter() 或 counters() 函数 - 将计数器的值添加到元素

下面是代码演示：

<style> body {  counter-reset: section; } ​ h1 {  counter-reset: subsection; } ​ h1::before {  counter-increment: section;  content: "Section " counter(section) ". "; } ​ h2::before {  counter-increment: subsection;  content: counter(section) "." counter(subsection) " "; } </style> </head> <body> ​ ​ <h1>HTML 教程:</h1> <h2>HTML 教程</h2> <h2>CSS 教程</h2> ​ <h1>Scripting 教程:</h1> <h2>JavaScript</h2> <h2>VBScript</h2> ​ <h1>XML 教程:</h1> <h2>XML</h2> <h2>XSL</h2>

效果如下：

 

计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串:

<style> ol {  counter-reset: section;  list-style-type: none; } ​ li::before {  counter-increment: section;  content: counters(section,".") " "; } </style> </head> <body> ​ <ol>  <li>item</li>  <li>item    <ol>    <li>item</li>    <li>item</li>    <li>item    <ol>      <li>item</li>      <li>item</li>      <li>item</li>    </ol>    </li>    <li>item</li>  </ol>  </li>  <li>item</li>  <li>item</li> </ol> ​ <ol>  <li>item</li>  <li>item</li> </ol>

效果如下：

最新回复(0)