css样式的用法

在CSS中，"border"用于设置元素的边框样式。下面是几种常见的border属性的用法：

1. 设置边框宽度：使用"border-width"属性可以设置边框的宽度。例如：`border-width: 1px;`将边框宽度设置为1像素。

2. 设置边框样式：使用"border-style"属性可以设置边框的样式，如实线、虚线、点线等。例如：`border-style: solid;`将边框样式设置为实线。

3. 设置边框颜色：使用"border-color"属性可以设置边框的颜色。例如：`border-color: red;`将边框颜色设置为红色。

4. 设置边框的四个方向：使用"border-top"、"border-right"、"border-bottom"、"border-left"属性可以分别设置上、右、下、左四个边框的样式、宽度和颜色。例如：`border-top: 1px

solid red;`将上边框宽度设置为1像素，样式为实线，颜色为红色。

5. 综合设置：使用"border"属性可以将边框的样式、宽度和颜色综合设置。例如：`border:

1px solid red;`将边框宽度设置为1像素，样式为实线，颜色为红色。

需要注意的是，以上属性可以单独使用，也可以组合使用，根据具体需求来设置边框样式。此外，还可以使用"border-radius"属性设置边框的圆角效果，以及其他一些边框相关的属性进行进一步的定制。

一、常用样式的方式：

1、内联样式

内联样式将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。如：

style="color: sienna; margin-left: 20px">

This is a paragraph

Style属性的属性值设置：（注意：属性值用双引号括起，各分属性以冒号跟属性值，分属性间以分号隔开）

Style属性的常用属性值设置

Font-family:黑体;

Color: red(或#ff0000/ rgb(255,0,0););

Text-align: left;

Blackgroudcolor: #blue;

font-size:14px;

background-image: url("images/back40.gif");

font-weight:bold；

2、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

说明注意：

样式标签一般在定义时加上type属性的定义，即type="text/css",格式为：

3、外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用

标签链接到样式表。 标签在（文档的）头部：

而样式单独在一个样式文件中定义。

二、CSS样式的类型

1.基于元素的样式、和基于ID的样式。

2. 基于类的样式

在 CSS 中，类选择器以一个点号显示，如：

.center {text-align: center}

例

段中文字按center类定义样式显示

3.基于ID的样式

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

CSS常用属性

1.CSS背景属性(background)

属性 描述 备注

background(图片) 设置元素的背景属性

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 scroll默认值。背景图像会随着页面其余部分的滚动而移动。

fixed固定，不随页面滚动

background-color 设置元素的背景颜色

background-image 设置元素的背景图像

background-position 设置背景图像的开始位置 top left

background-repeat 设置是否及如何重复背景图像 repeat默认。背景图像将在垂直和水平重复。

repeat-x和repeat-y 在x或者y上重复

no-repeat不重复

2.CSS边框属性(border与outline)

属性 描述

border 在一个声明中设置所有的边框属性

border-bottom 设置下边框属性

border-bottom-color 设置下边框的颜色

border-bottom-style 设置下边框的样式 dotted定义点状边框

dashed定义虚线

solid定义实线

border-bottom-width 设置下边框的宽度

border-color 设置四条边框的颜色

border-left 在一个声明中设置所有的左边框属性

border-left-color 设置左边框的颜色

border-left-style 设置左边框的样式

border-left-width 设置左边框的宽度

border-right 在一个声明中设置所有的右边框属性

border-right-color 设置右边框的颜色

border-right-style 设置右边框的样式

border-right-width 设置右边框的宽度

border-style 设置四条边框的样式

CSS在style中hover的用法

1. 简介

在使用CSS样式表来美化网页时，经常需要响应用户的交互操作，为了实现这个功能，CSS提供了一种伪类选择器——`:hover`，它可以使元素在鼠标悬停时发生样式变化。本文将介绍CSS在`style`中使用`:hover`的用法及示例。

2. 基本语法

使用`:hover`伪类选择器的语法非常简单，只需要将其添加到CSS选择器后面，即可选择具有鼠标悬停状态的元素。

```css

selector:hover{

/*样式规则*/

}

```

其中，`selector`表示要选择的元素，可以是标签名、类名、ID名等。

3. 鼠标悬停效果示例

下面是一些常见和实用的鼠标悬停效果示例，帮助您更好地理解CSS中`:hover`的用法。

3.1. 文字颜色变化

```css

h1:hover{

color:red; }

```

在上面的示例中，当鼠标悬停在`

3.2. 背景颜色变化

```css

.button:hover{

background-color:#ffcc00;

}

```

在上面的示例中，当鼠标悬停在`.button`类的元素上时，背景颜色将变为黄色。

3.3. 图片阴影效果

```css

img:hover{

box-shadow:2px2px5pxrgba(0,0,0,0.5);

}

```

在上面的示例中，当鼠标悬停在``标签上时，图片将产生阴影效果。

4. 多个子选择器组合使用

除了单独使用`:hover`伪类选择器外，我们还可以将其与其他选择器进行组合使用，实现更丰富的效果。

4.1. 同一元素不同状态下的样式变化

```css a:link{

color:blue;

}

a:hover{

color:red;

}

a:visited{

color:purple;

}

a:active{

color:green;

}

```

在上面的示例中，定义了``标签在不同状态下的样式变化，分别是默认状态、鼠标悬停状态、访问过的状态和被点击时的状态。