2. CSS3

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: 粘性定位

10. 浮动 Float

11. 渐变 Gradients

11.1 线性渐变 Linear Gradients
11.2 径向渐变 Radial Gradients

12. 字体

13. 文本效果

13.1 文本阴影
text-shadow
13.2 文本溢出
text-overflow
13.3
text-wrap
13.4 换行
word-wrap
13.5 换行
word-break

14. 过渡

transition
transition-delay
transition-duration
transition-property
transition-timing-function

15. 动画

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值