CSS(三)

最新推荐文章于 2024-08-21 15:33:15 发布

BabyMelvin

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量372

点赞数

分类专栏：网络

网络专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.CSS 盒子模型

1.1CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。这里写图片描述

不同部分的说明：

Margin(外边距)- 清除边框外的区域，外边距是透明的。
Border(边框)- 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

1.2元素的宽度和高度

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.

下面的例子中的元素的总宽度为300px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2.CSS 边框

2.1 CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

在四边都有边框
红色底部边框
圆角边框
左侧边框带宽度，颜色为蓝色

2.2 border-style 值

none:默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

3.CSS 分组和嵌套选择器

为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。

h1,h2,p
{
    color:green;
}

3.1嵌套选择器

它可能适用于选择器内部的选择器的样式。在下面的例子设置了三个样式:

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=”marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=”marked” 的p 元素指定一个样式。

4.CSS Position(定位)

position 属性指定了元素的定位类型。position 属性的五个值：

staticHTML元素的默认值，即没有定位，元素出现在正常的流中。
relative相对定位元素的定位是相对其正常位置。
fixed元素的位置相对于浏览器窗口是固定位置。
absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
sticky基于用户的滚动位置来定位。

5.CSS伪类

CSS（Pseudo-classes）伪类是用来添加一些选择器的特殊效果。

/*伪类的语法：*/
selector:pseudo-class {property:value;}
/*CSS类也可以使用伪类：*/
selector.class:pseudo-class {property:value;}

5.1 anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited之后，才是有效的
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

5.2 伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

6.CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

/*伪元素的语法：*/
selector:pseudo-element {property:value;}
/*CSS类也可以使用伪元素：*/
selector.class:pseudo-element {property:value;}