css-note

来源：互联网发布：淘宝手绘素描造假编辑：程序博客网时间：2024/06/05 14:07

设置背景颜色：

<head>
<style type="text/css">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}

</style>
</head>

<p class="no2">这个段落设置了内边距。</p>

设置文本背景颜色：

</style>

将图像设置为背景颜色：

重复背景图像：

在水平或垂直方向重复背景图像：

</style>
<style type="text/css">
body{
background-image:
url(/i/eg_bg_03.gif);
background-repeat:repeat-x
}
</style>

只显示一次背景图像：

如何在页面上放置背景图片：

background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素

使用%定位背景图片：

使用像素来定位背景图片：

所有背景属性在一个声明之中：

CSS 文本实例：

设置文本颜色：

字符间距：

使用百分比设置字符间距：

使用像素设置字符间距：

}

使用熟知设置字符的间距：

修饰文本“：

缩进文本：

p{text-indent:2cm}

控制文本中的字母：

禁止文本折行:

p
{
white-space: nowrap

}

单词间距：

CSS 字体(font)实例：

设置文本的字体：

字体尺寸：

字体风格：

字体的异体：

字体的粗细：

p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

字体属性在一个声明之内：

p.ex1
{
font:italic arial,sans-serif;
}

CSS 边框(border)实例：

所有边框属性在一个声明之中：

p{
border:medium double rgb(250,0,255)
}

边框样式：border-style:solid/thin;

下边框：border-bottom:

下边框颜色：border-bottom-color:

下边框样式：border-bottom-style:

下边框宽度：border-bottom-width:thin

左边框：border-left:thick double #ff0000;

左边框颜色：border-left-color: #ff0000

左边框样式：p.none {border-left-style:none}

左边框宽度：border-left-width: 15px

右边框：border-right:thick double #ff0000;

上边框：border-top:thick double #ff0000;

CSS 外边距 (margin) 实例：

文本的左外边距：p.leftmargin {margin-left: 2cm}

文本的右外边距：p.rightmargin {margin-right: 8cm}

文本的上外边距：p.topmargin {margin-top: 5cm}

文本的下外边距：p.bottommargin {margin-bottom: 2cm}

上右下左边距：p.margin {margin: 2cm 4cm 3cm 4cm}

CSS 内边距 (padding) 实例：

每边1.5————td.test1 {padding: 1.5cm}
上下0.5，左右2.5——td.test2 {padding: 0.5cm 2.5cm}

下边距：td {padding-bottom: 2cm}————padding-bottom: 10%

左边距：td {padding-left: 2cm}——————padding-left: 10%

右边距：td{padding-right:2cm}——————padding-right:10%

上边距：td{padding-top:2cm}——————padding-top:10%

CSS 列表实例：

在无序列表中的不同类型的列表标记

在有序列表中的不同类型的列表标记

将图片作为列表项标记：

何处放置列表标记:

</style>

在一个声明中定义所有列表属性：

ul
{
list-style: square inside url('/i/eg_arrow.gif')
}

CSS 表格实例：

设置表格布局：

automatic    默认。列宽度由单元格内容设定。

fixed    列宽由表格宽度和列宽度设定。

显示表格中的空单元：

separate : 边框独立

collapse : 相邻边被合并

单元格边框的距离：

table.two
{
border-collapse: separate;
border-spacing: 20px 50px
}

表格标题的位置：

caption{

caption-side:bottom

}

轮廓（Outline）实例：

在元素周围划线：

p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}

设置轮廓颜色样式：

p
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}

轮廓的宽度：

outline-width:3px;

CSS 尺寸 (Dimension) 实例：

使用像素值设置图片的高度：

img.normal
{
height: auto（百分比 ————50%）
}

img.big
{
height: 160px
}

使用像素值设置图片的宽度：

img
{
width: 300px
}

元素的最大/最小宽度/高度：

max-width:10px

max-heigrh:10px

min-width:50%

设置行间距：

line-height:200% ---(15px)----(2)

CSS 分类 (Classification) 实例：

把元素设置文内联元素：

p {display: inline}
div {display: none}

设置为块级元素：

span {display:block}

带边框浮动右侧：

img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}

首字母浮于左侧：

{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}

阅读全文

0 0