css3从创衣服到设计衣服

1.css3进阶

1.css3介绍

CSS3是CSS(层叠样式表)的第三个主要版本,是一种用于描述网页样式和布局的技术。相比于CSS2,CSS3引入了许多新的功能和特性,为开发者提供了更多的设计选择和交互效果。以下是CSS3的一些主要特点和功能:


1. 选择器:CSS3引入了一些新的选择器,如属性选择器、伪类选择器和伪元素选择器,使开发者能够更精确地选择和操作元素。


2. 盒子模型:CSS3增强了盒子模型,引入了圆角边框(border-radius)和阴影效果(box-shadow),使元素的样式更具丰富性。


3. 渐变效果:CSS3支持线性渐变(linear-gradient)和径向渐变(radial-gradient),使开发者能够在背景和文本中创建平滑的过渡效果。


4. 过渡和动画:CSS3引入了过渡(transition)和动画(animation)属性,使开发者能够创建平滑的元素状态过渡和动画效果,无需使用JavaScript。


5. 多列布局:CSS3提供了多列布局(multi-column layout)的功能,使开发者能够将内容分为多列,实现杂志风格的布局效果。


6. 媒体查询:CSS3引入了媒体查询(media queries),使开发者能够根据不同的设备和屏幕尺寸,为不同的设备提供不同的样式和布局。


7. 字体和文本效果:CSS3提供了更多的字体选择和文本效果,如自定义字体(@font-face)、文字阴影(text-shadow)和文字溢出效果(text-overflow)。


8. 弹性盒子布局:CSS3引入了弹性盒子布局(flexbox),使开发者能够更轻松地创建响应式的布局和对齐方式。


以上只是CSS3的一部分功能,它为网页设计和布局提供了更多的灵活性和创造力。CSS3的广泛支持使得开发者能够创建出更吸引人、交互性更强的网页和应用程序。

 1.新增长度单位

CSS3中引入了多种新的长度单位,用于在样式表中指定元素的尺寸。以下是一些CSS3中常用的长度单位:
1. **px(像素):** 绝对长度单位,相对于显示器屏幕分辨率的一个像素。
2. **em(相对长度单位):** 相对于元素自身的字体大小,例如,1em等于当前元素的字体大小。
3. **rem(相对长度单位):** 相对于根元素(html元素)的字体大小,可以解决em的继承问题。
4. **%(百分比):** 相对于父元素的尺寸。例如,width: 50%表示元素宽度为父元素宽度的50%。
5. **vw(视口宽度单位):** 相对于视口宽度的百分比,1vw等于视口宽度的1%。
6. **vh(视口高度单位):** 相对于视口高度的百分比,1vh等于视口高度的1%。
7. **vmin(视口宽度和高度中较小值的百分比):** 相对于视口宽度和高度中较小值的百分比。
8. **vmax(视口宽度和高度中较大值的百分比):** 相对于视口宽度和高度中较大值的百分比。
9. **ch(字符“0”的宽度):** 相对于“0”字符的宽度,通常用于定宽字体的尺寸设置。
10. **ex(小写字母x的高度):** 相对于小写字母x的高度,通常用于字体相关的尺寸设置。
11. **cm(厘米):** 绝对长度单位,1cm等于1厘米。
12. **mm(毫米):** 绝对长度单位,1mm等于1毫米。
13. **in(英寸):** 绝对长度单位,1in等于1英寸。
14. **pt(磅):** 绝对长度单位,1pt等于1/72英寸。
15. **pc(派卡):** 绝对长度单位,1pc等于12点(1/6英寸)。
这些长度单位可以在CSS中用于指定元素的尺寸,根据具体需求选择合适的单位以实现页面样式的设计。

 2.新增盒子属性

CSS3引入了一些新的盒子属性,用于控制元素的盒子模型和布局。以下是一些CSS3中新增的盒子属性:
1. **box-sizing:** 用于指定元素的盒子模型计算方式。默认值为`content-box`,表示宽度和高度仅包括内容,不包括边框和内边距。可以设置为`border-box`,表示宽度和高度包括内容、边框和内边距。


2. **box-shadow:** 用于为元素添加阴影效果。可以指定阴影的颜色、位置、模糊半径和扩展半径。


3. **border-radius:** 用于为元素的边框添加圆角效果。可以指定每个角的圆角半径,也可以使用`%`值相对于元素的宽度或高度。


4. **box-decoration-break:** 用于控制元素的装饰盒子断裂的方式。可以设置为`slice`,表示装饰盒子在断裂处被切割;或者设置为`clone`,表示装饰盒子在断裂处被克隆。


5. **overflow-x、overflow-y:** 用于控制元素内容在溢出时的显示方式。`overflow-x`用于控制水平方向上的溢出,`overflow-y`用于控制垂直方向上的溢出。可以设置为`visible`(默认值,内容溢出不裁剪)、`hidden`(内容溢出裁剪)、`scroll`(始终显示滚动条)或`auto`(根据内容是否溢出自动显示滚动条)


6. **box-align、box-pack:** 用于控制弹性布局容器中项目的对齐方式。`box-align`用于指定项目在交叉轴上的对齐方式,可以设置为`start`、`end`、`center`、`baseline`或`stretch`。`box-pack`用于指定项目在主轴上的对齐方式,可以设置为`start`、`end`、`center`、`justify`或`distribute`。


7. **box-flex、box-flex-group:** 用于控制弹性布局容器中项目的伸缩性。`box-flex`用于指定项目的伸缩比例,默认值为0,表示不伸缩。`box-flex-group`用于指定项目所属的伸缩组。


这些是CSS3中新增的一些盒子属性,可用于更灵活地控制元素的盒子模型、布局和效果。根据具体需求,可以使用这些属性来实现各种独特的设计效果。

 3.新增背景属性

CSS3引入了一些新的背景属性,用于控制元素的背景样式和效果。以下是一些CSS3中新增的背景属性:
1. **background-size:** 用于指定背景图片的大小。可以设置为具体的长度值(如像素、百分比),也可以使用关键字`cover`(将背景图片缩放到完全覆盖背景区域)或`contain`(将背景图片缩放到完全包含在背景区域内)。
2. **background-origin:** 用于指定背景图片的定位原点。可以设置为`padding-box`(相对于内边距框定位)、`border-box`(相对于边框框定位)或`content-box`(相对于内容框定位)。
3. **background-clip:** 用于指定背景图片的裁剪区域。可以设置为`border-box`(裁剪到边框框内)、`padding-box`(裁剪到内边距框内)或`content-box`(裁剪到内容框内)。
4. **background-origin、background-clip的简写:** 可以通过`background`属性的简写形式同时设置`background-origin`和`background-clip`。
5. **background-repeat:** 用于指定背景图片的重复方式。可以设置为`repeat`(默认值,平铺重复)、`repeat-x`(水平方向重复)、`repeat-y`(垂直方向重复)或`no-repeat`(不重复)。
6. **background-position:** 用于指定背景图片的位置。可以设置为具体的长度值(如像素、百分比),也可以使用关键字`left`、`center`、`right`、`top`、`bottom`等。
7. **background-attachment:** 用于指定背景图片的滚动方式。可以设置为`scroll`(默认值,背景图片随元素内容一起滚动)或`fixed`(背景图片固定不动,不随元素内容滚动)。
8. **background-image:** 用于指定背景图片的URL。可以设置为具体的图片路径或使用`linear-gradient()`、`radial-gradient()`等渐变函数。
这些是CSS3中新增的一些背景属性,可用于更灵活地控制元素的背景样式和效果。通过组合和调整这些属性,可以实现各种独特的背景效果。

4.新增边框属性

CSS3引入了一些新的边框属性,用于控制元素的边框样式和效果。以下是一些CSS3中新增的边框属性:
1. **border-radius:** 用于为元素的边框添加圆角效果。可以指定每个角的圆角半径,也可以使用百分比值相对于元素的宽度或高度。
2. **border-image:** 用于指定边框的图像作为边框样式。可以设置边框图像的路径、裁剪区域、填充方式、边框宽度等属性。
3. **border-image-slice:** 用于指定边框图像的裁剪区域。可以设置为具体的长度值或百分比值,用于确定边框图像的裁剪区域。
4. **border-image-source:** 用于指定边框图像的路径。可以设置为具体的图片路径或使用`linear-gradient()`、`radial-gradient()`等渐变函数。
5. **border-image-width:** 用于指定边框图像的宽度。可以设置为具体的长度值、百分比值或关键字`auto`,用于确定边框图像的宽度。
6. **border-image-outset:** 用于指定边框图像的外边距。可以设置为具体的长度值或百分比值,用于确定边框图像的外边距。
7. **border-image-repeat:** 用于指定边框图像的重复方式。可以设置为`stretch`(拉伸填充边框)、`repeat`(平铺填充边框)或`round`(根据边框尺寸自动调整重复次数)。
8. **box-shadow:** 用于为元素添加阴影效果。可以指定阴影的颜色、位置、模糊半径和扩展半径。
这些是CSS3中新增的一些边框属性,可用于更灵活地控制元素的边框样式和效果。通过组合和调整这些属性,可以实现各种独特的边框效果。

5.新增文本属性

 

CSS3引入了一些新的文本属性,用于控制元素的文本样式和效果。以下是一些CSS3中新增的文本属性:
1. **text-overflow:** 用于控制文本溢出时的显示方式。可以设置为`clip`(默认值,文本溢出时隐藏)、`ellipsis`(使用省略号表示被截断的文本)或`fade`(渐变效果显示被截断的文本)。
2. **word-break:** 用于控制文本在换行时的断词方式。可以设置为`normal`(默认值,根据空格和连字符断词)、`break-all`(强制换行,无视空格和连字符)或`keep-all`(连字符不断行)。
3. **word-wrap:** 用于控制非CJK(中日韩文字)文本的换行方式。可以设置为`normal`(默认值,按照空格和连字符断词换行)或`break-word`(根据单词断词换行)。
4. **text-shadow:** 用于为文本添加阴影效果。可以指定阴影的颜色、位置、模糊半径和扩展半径。
5. **text-align-last:** 用于指定文本在行内最后一行的对齐方式。可以设置为`auto`(默认值,按照`text-align`属性对齐)、`left`、`right`、`center`、`justify`或`start`。
6. **text-justify:** 用于指定文本对齐方式。可以设置为`auto`(默认值,按照`text-align`属性对齐)、`inter-word`(单词间添加额外的空格以实现对齐)、`inter-ideograph`(汉字间添加额外的空格以实现对齐)或`distribute`(在每个单词之间平均分布空格以实现对齐)。
7. **text-emphasis:** 用于为文本添加强调效果。可以设置为具体的颜色值或关键字`dot`、`circle`、`double-circle`、`triangle`等。
8. **text-orientation:** 用于指定文本的方向。可以设置为`mixed`(默认值,根据字符的方向自动调整)或`upright`(垂直方向排列文本)。
这些是CSS3中新增的一些文本属性,可用于更灵活地控制元素的文本样式和效果。通过组合和调整这些属性,可以实现各种独特的文本效果。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值