首页 前端知识 css3 初步了解

css3 初步了解

2024-05-05 21:05:51 前端知识 前端哥 580 178 我要收藏

1、css3的含义及简介

        简而言之,css3 就是 css的最新标准,使用css3都要遵循这个标准,CSS3 已完全向后兼容,所以你就不必改变现有的设计,

2、一些比较重要的css3 模块

选择器

1、标签选择器,也称为元素选择器。

标签选择器的基本形式如下:tagName{property:value},其中tagName是标签名称,property是css的属性。

2、类选择器。

类选择器用来为一系列标签定义相同的呈现方式,常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称,这是由css编写者自己命名。(所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。)

3、ID选择器。

ID选择器定义的是某一个特定的html元素,一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下:#idValue{property:value}。其中idValue是ID选择器的名称,可以由CSS编写者自己编写。(所有浏览器都支持)

4、全局选择器。

全局选择器就是对所有的htmlz元素起作用。语法格式为: *{propery:value}。其中“*”表示对所有元素起作用,property表示css的属性,value表示属性值。

5、伪类选择器。

伪类选择器主要应用在标签上,它由四种状态:未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。

....等等

盒模型

主要就是两种模型:标准盒模型及怪异盒模型

标准盒模型:元素展示的宽高大于元素实际的宽高

    box-sizing: content-box;

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

怪异盒模型:元素展示的宽高等于元素实际的宽高

box-sizing: border-box;

width(宽) = 元素实际宽度

height(高) = 元素实际高度

背景和边框

背景

  • background-image: 设置背景图
  • background-size:背景大小
  • background-origin:

    指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。

  • background-clip:剪裁属性是从指定位置开始绘制

边框

  • border-radius
  • box-shadow
  • border-image

文字特效

文本效果

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

字体

@font-face 使用自定义字体

以前只能使用电脑自带的字体,现在通过 @font-face 可以使用自定义字体

2D/3D转换

transform:

  • translate() 上下左右偏移
  • rotate() 旋转
  • scale() 放大缩小
  • skew() 倾斜

过渡

transition:

        过渡时间-transition-duration

        延迟过渡时间-transition-delay

        过度函数-transition-timing-function

动画

        animation: 放定义好的动画 持续时间 至少要有这两

        @keyframes:定义动画

弹性盒子

display:flex

justify-content: 控制主轴布局

align-items: 另一条轴的布局

flex-direction: 控制主轴是垂直的还是水平的

flex-wrap: 是否允许换行

上面是常用属性,还有更多属性,请自行搜索喔

栅格布局

grid

做类似这种比较规整的布局,就使用栅格布局,相对于弹性布局,是更急敏捷的

.grid-container {
  /* 设置盒子为栅格布局 */
  display: grid;
  /* 设置每行的高度 */
  grid-template-rows: 100px 100px 100px 100px;
  /* 设置每列的宽度 */
  grid-template-columns: 100px 100px 100px 100px;
}

注意:以上代码不是,图的样式,这里只是举个例子,栅格布局的使用而已,以下三属性,可以设置栅格布局的间距

  • grid-column-gap
  • grid-row-gap
  • grid-gap

暂时先这样记录一下吧

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7011.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!