当前位置：文档之家 › 常用CSS属性

常用CSS属性

  • 格式：doc
  • 大小：70.00 KB
  • 文档页数：9

网页制作技术-网页设计中常用的CSS属性

文字或元素的颜色 color: #000000;

背景颜色 background-color

背景图像 background-image

字体 font-family

文字大小 font-size

列表样式 list

鼠标样式 cursor

边框样式 border

内补白 padding

外边距 margin

边框宽度 : border-width : 5px;

上边宽度 : border-top-width : 5px;

左边宽度 : border-left-width : 5px;

右边宽度 : border-right-width : 5px;

底边宽度 : border-bottom-width : 5px;

边框颜色 : border-color : #000000;

上边颜色 : border-top-color : #000000;

边框样式 : border-style : double; 可替换 dashed; dotted; none;

上边样式 : border-top-style : solid;

左边样式 : border-left-style : inset;

右边样式 : border-right-style : ridge;

底边样式 : border-bottom-style : solid;

整体宽度 : width : 5px;

整体高度 : height : 5px;

溢出选项 : overflow : visible; 可替换 hidden; scroll; auto;

内侧边距 : padding : 5px;

上内边距 : padding-top : 5px;

外侧边距 : margin : 5px;

上外边距 : margin-top : 5px;

文字字体 : font-family : fantasy;

文字大小 : font-size : 12pt;

文字粗细 : font-weight : bold;

文字样式 : font-style : italic;

文字变量 : line-height : 110%;

清除属性 : clear : left; 可替换 right; both; none;

浮动属性 : float : left; 可替换 right; none;

水平排列 : text-align : left; 可替换 right; center; justify;

文本修饰 : text-decoration : underline; 可替换 overline; underline overline;

line-through; blink;

文本缩进 : text-indent : 5em;

文字间距 : letter-spacing : 5px; 字母间距 : word-spacing : 5px;

文本转换 : text-transform : capitalize; 可替换 lowercase; uppercase;

垂直排列 : vertical-align : baseline; 可替换 top; middle; bottom; text-top; text-bottom;

super; sub; 3em; 30%;

背景图片 : background-image : url(tianyi.gif);

背景拉伸 : background-repeat : repeat; 可替换 repeat-x; repeat-y; no-repeat;

背景定位 : background-position : left; 可替换 right; top; left top; right bottom; 30% 50%;

附加属性 : background-attachment : fixed; 可替换 scroll;

显示属性 : display : none; 可替换 block; inline; run-in; compact; list-item; marker;

是否可见 : visibility : visible; 可替换 hidden;

资源定位 : position : static; 可替换 relative; absolute; fixed;

距离顶部 : top : 5px;

距离左边 : left : 5px;

距离右边 : right : 5px;

距离底边 : bottom : 5px;

优先等级 : z-index : 5;

鼠标指针 : cursor : crosshair; 可替换 default; pointer; move; text; wait; help; n-resize;

s-resize; w-resize; e-resize; ne-resize; nw-resize; se-resize; sw-resize;

CSS 属 性 一 览 表

属 性 名 称 属性功能及其取值 用 法 说 明 与 范 例

颜色与背景类

color 设置文字颜色

#rgb

#rrggbb

rgb(255,255,255)

rgb(100%,100%,100%) H1{color:red}

H1{color:#f00}

H1{color:#ff0000}

H1{color:rgb(255,0,0)}

H1{color:rgb(100%,0%,0%)}

background-color 设置背景颜色，格式同上。 BODY{background-color:red}

BODY{background-color:#f00}

BODY{background-color:#ff0000}

BODY{background-color:rgb(255,0,0)}

BODY{background-color:rgb(100%,0%,0%)}

background-image 设置背景图片，

url(imageURL) body{backround-image:url(back.jpg);}

background-repeat 设置背景图片是否重复排列:

repeat-x(X轴重复排列);

repeat-y(Y轴重复排列);

No-repeat(不重复排列) BODY{background-repeat:repeat-x;} BODY{background-repeat:No-repeat;}

background-attachment 设定背景图片是否卷动，默认为卷动。

scroll(卷动)

fixed(不卷动) BODY{background-attachment:fixed;}

background-position 设定背景图片或背景颜色开始显示的位置，取值格式：

top,buttom,left,right,center(用关键字)

70px 10px(用长度值)

50% 30%(用百分比) BODY{background-position:right top;}

BODY{background-position:50px 10px;}

BODY{background-position:20% 50%;}

background 定义背景综合属性，不要求顺序，各属性值以空格分开。

BODY{background:#ffcc00 url(bg.jpg) fixed center}

字型类

font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。 P{font-family:宋体,楷体,黑体,"Time New Rom";}

font-style 设定字型样式：Normal(正常),italic、objlique(斜体) P{font-style:italic;}

font-variant 取值：Normal(默认)，small-caps(如果是中文字型则将字型缩小显示，如果是英文则全部改为较小的大写) H3{font-variant:small-caps;}

font-weight 设定字体粗细，取值有：

Normal(默认),bold,lighter,border,100,200...900

由于浏览器支持程度不同，一般只用normal和bold两种属性。 P{font-weight:bold;}

font-size 设定字体的大小；

绝对大小：xx-small,x-small,small,mediumlarge,x-large,xx-large;

相对大小：larger,smaller;

数字表示可用单位：磅(pt),像素(px),英寸(in),厘米(cm);

亦可用百分比表示。 H2{font-size:36pt;}

P{font-size:200%;}

font 设定字型的综合属性，其顺序如下：

{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt

impact,Arial;}

文字类

letter-spacing 设定文字间距。 P{letter-spacing:5pt;}

text-decoration 设定文字加上下划线、删除线等效果：

none(无)

underline(下划线)

overline(上划线)

line-through(删除线)

vertical-align 设定文字或图片垂直方向的对齐方式：

baseline:默认值 sub:下标 super:上标 top:垂直向上对齐 middle:垂直居中 bottom:垂直向下对齐。

text-transform 转换英文字母大小写：

none:默认值 capitalize:首字母大写 uppercase:所有英文字母大写 lowercase:所有英文字母小写。

合集下载

css属性分类介绍

css属性分类介绍

css属性分类介绍

css属性分类介绍

CSS分类⽬录

1. ⽂本/字体/颜⾊

1. ⽂本相关

2. 字体相关

3. 颜⾊相关

4. 背景相关

2. ⼤⼩/布局

1. ⼤⼩属性

2. margin 外边距

3. padding 内边距

4. border 边框

5. position 定位

3. 列表/表格

1. 多列属性

2. 可伸缩框属性

3. 列表属性

4. Grid属性

5. Table属性

4. 动画属性

1. Animation 动画属性

2. Transition 过渡属性

CSS属性分类

⽂本/字体/颜⾊/背景

字体类

1. font-family：指定字体

1. 需要考虑客户端机器上是否装有字体

2. 可以排列多个字体，⽤逗号分隔，如果有空格⽤引号分隔

3. 最后⼀个建议放通⽤字体名，这个属性只有⼏个选项：serif | sans-serif | cursive | fantasy | monospace

2. font-size：字体⼤⼩，要注意有绝对⼤⼩，相对⼤⼩，长度，百分⽐

1. ⼀般建议采⽤相对⼤⼩，即em或者rem

2. 典型的长度单位，详细信息请参考

3. font-style：正常体、斜体、倾斜体

4. font-weight：设置粗体

5. font-variant：⽤来将所有字体都变成⼤写，但是原来是⼤写的字体呢⼜要⽐默认的要⼤⼀些

6. font：

1. 简写形式，如上所有跟字体相关的字体混合在⼀起

2. font-family是必选的，⽽且⼀定要在最后；font-size如果有，必须出现在倒数第⼆个, 后⾯可以⽤/跟⼀个line-height的设置

3. 剩下的font-style, font-weight, font-variant就⽆所谓了，前⾯任意排列

4. font还⽀持⼀些类似caption, icon等快捷描述

5. 详细请参考

7. line-height：⼀个数字，默认差不多为1.2，有normal/数字/长度/百分⽐

1. ⼀般建议使⽤纯数字, ⽤长度和百分⽐都在某些特殊情况下超出预期，即⼦元素的⾏⾼被⽗亲元素设置了，同时⼦元素还有默认

CSS——八大属性

CSS——八大属性

CSS——⼋⼤属性

⼀、颜⾊

有三种表⽰颜⾊的⽅法：英⽂单词、⼆进制颜⾊代表码、rgb，

⼆、字体

font-size：15px；设置字体⼤⼩，常⽤像素指定字体⼤⼩，指定长度的字号，不会随着浏览器的变化⽽变化

font-family：宋体；设置字体类型

font-weight：lighter、bold、bolder，设置字体粗细，常⽤的三种效果选择

font-style：oblique；设置字体倾斜

font-variant:small-caps；将⼩写字母转成⼤写字母；

color：设置字体颜⾊

exercise4

练习属性property

⼆、关于字体

font-size设置字体⼤⼩，如：15px

font-family设置字体类型如：YouYuan

font-weight设置字体粗细，如:

lighter\

bold\ bolder

font-style设置字体倾斜

⼀、关于颜⾊

除了使⽤英⽂单词，还可以使⽤⼗六进制颜⾊对应表(如下图，#FFFF00表⽰黄⾊，还可简写成#FF0）

#FFFFFF

#DDDDDD

#AAAAAA

#888888

#666666

#444444

#000000

#FFB7DD

#FF88C2

#FF44AA 

#FF0088 

#C10066 

#A20055 

#8C0044 

#FFCCCC

#FF8888

#FF3333 

#FF0000 

#CC0000 

#AA0000 

#880000 

#FFC8B4

#FFA488

#FF7744 

#FF5511 

#E63F00 

#C63300 

#A42D00 

#FFDDAA

#FFBB66

#FFAA33

#FF8800 

#EE7700 

width在css中的用法(一)

width在css中的用法(一)

width在css中的用法(一)

width在css中的用法

简介

width是一种在CSS中常用的属性，用于定义元素的宽度。它可以设置为固定的像素值，百分比，自适应宽度等多种方式，灵活地控制元素在页面中的尺寸。

基本用法

1. 设置固定宽度

– 语法：width: 100px;

– 作用：将元素的宽度设置为100像素

– 注意：当元素的内容超出固定宽度时，会发生溢出现象

2. 设置百分比宽度

– 语法：width: 50%;

– 作用：将元素的宽度设置为父元素宽度的50%

– 注意：百分比宽度是相对于父元素的宽度计算的，当父元素的宽度发生改变时，子元素的宽度会自动调整

3. 设置自适应宽度 – 语法：width: auto;

– 作用：使元素的宽度根据内容自适应调整

– 注意：自适应宽度的元素会根据内容的多少动态调整宽度

其他用法

1. 最大宽度限制

– 语法：max-width: 500px;

– 作用：设置元素的最大宽度为500像素

– 注意：当元素的内容超出最大宽度时，会自动调整宽度以适应内容

2. 最小宽度限制

– 语法：min-width: 200px;

– 作用：设置元素的最小宽度为200像素

– 注意：当元素的内容小于最小宽度时，会自动扩展宽度以适应内容

总结

width属性在CSS中提供了多种设置元素宽度的方式，可以通过固定宽度、百分比宽度和自适应宽度来灵活控制元素的尺寸。此外，还可以通过最大宽度和最小宽度限制，使元素的宽度在一定范围内进行调整。在实际应用中，根据不同的布局和需求选择合适的width设置方式，可以更好地控制页面元素的宽度。

高级用法

1. 百分比值与内容宽度

– 语法：width: 50vw;

– 作用：将元素的宽度设置为视口宽度的50%

– 注意：百分比单位中的vw表示视口宽度的百分比。使用vw单位可以根据浏览器窗口的宽度来设置元素的宽度，适用于响应式布局。

css教程菜鸟

css教程菜鸟

css教程菜鸟

CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。

首先，让我们了解一下CSS的基本语法。CSS由选择器和声明块组成。选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。下面是一个简单的示例：

```

p {

color: red;

font-size: 20px;

}

```

上述代码中，选择器“p”表示要应用样式的HTML段落元素。声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。

接下来，我们将介绍一些常用的CSS属性。

1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。例如：

```

p {

font-size: 16px; font-family: Arial, sans-serif;

}

```

上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。

2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。例如：

```

body {

background-color: lightblue;

background-image: url("bg.jpg");

}

```

上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。

3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。例如：

```

div {

border: 1px solid black;

}

```

上述代码将`

4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。例如： ```

img {

width: 200px;

height: 150px;

margin-top: 10px;

}

```