2. CSS3-CSDN博客

本文链接：https://blog.csdn.net/u011310383/article/details/113575531

1. 样式表 Style Sheet

4.1 样式表分类

分类	描述
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)	这是一个段落。

样式表优先级
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

3. 选择器 Selector

3.1 ID选择器

ID选择器以 "#"来定义

3.2 Class选择器

Class选择器以“." 来定义

3.3 分组选择器

3.4 嵌套选择器

<style>
    #para1 {  //ID选择器
        color: green;
    }
    #para2 {   //ID选择器
        color: red;
    }
    body {  //
        background-color: rgb(10, 10, 10)
    }
</style>
<body>
<p id="para1"> 床前明月光,疑似地上霜 </p>
<p id="para2"> 床前明月光,疑似地上霜 </p>
</body>

在这里插入图片描述

4. 盒子模型 Box Model

4.1 盒子模型

在这里插入图片描述

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

4.2 外边距Margin

margin
margin-top
margin-bottom
margin-right
margin-left

4.3 边框 Border

4.3.1 边框样式border-style

border-style
border-top-style
border-bottom-style
border-left-style
border-right-style

4.3.2边框宽度border-width

border-width
border-top-width
border-bottom-width
border-left-width
border-right-width

4.3.3 边框颜色border-color

border-color
border-top-color
border-bottom-color
border-left-color
border-right-color

4.3.4 边框图像border-image

4.3.5 边框半径border-radius

4.4 填充 Padding

padding
padding-top
padding-bottom
padding-right
padding-left

5. 轮廓Outline

5.1 属性Outline

outline: 轮廓样式, 宽度,颜色
outline-style:轮廓样式
outline-width:　轮廓宽度
outline-color: 轮廓颜色
注: outline 是不占用空间的,不影响布局.

6. 尺寸Dimension

6.1 属性

height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

7. 背景 Background

7.1 背景颜色属性

background-color 属性定义元素的背景颜色
颜色的定义方式:
1. 十六进制: #ff001e
2. RGB: rgb(255, 0, 0)
3. 颜色名称: red

7.2 背景图片属性

background-image 属性定义元素的背景图片
background-image:url(‘paper.gif’)

7.3 背景图片平铺属性

background-repeat 属性定义图片的平铺
background-repeat:repeat-x; 水平平铺
background-repeat:repeat-y; 垂直平铺
background-repeat:no-repeat; 不平铺

7.4 背景图片定位属性

background-position定义图片位置
background-position:right top; 右上角

8. 显示与可见性(Display && Visibility)

8.1 属性

Display: 显示, 不占空间.
Visibility: 可见性, 占空间.

display:none 不显示, 且不占空间, 不影响布局.
visibility:hidden 不可见,但占空间,影响布局.

9. 定位Position

9.1 属性Position

position : 有以下5个值
static: 静态定位.元素位置不受top, bottom, left, right影响.
fixed:固定定位.元素位置由top, bottom, left, right决定.
relative:相对定位.元素位置由正常位置,top, bottom, left, right决定.
absolute 绝对定位.相对于父元素的定位, 没有父元素,则相对于html的定位.元素位置由父元素/html位置,top, bottom, left, right决定.
sticky: 粘性定位