css3笔记

CSS3     W3C学习笔记

CSS简介

CSS3被划分为模块

其中最重要的 CSS3 模块包括：

1. 选择器
2. 框模型
3. 背景和边框
4. 文本效果
5. 2D/3D 转换
6. 动画
7. 多列布局
8. 用户界面

CSS边框

1.    通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框

2.    圆角边框border-radius

3.    矩形框阴影box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow垂直阴影

 v-shadow 水平阴影

blur 阴影模糊距离

spread 阴影的距离

color 阴影的颜色

inset向内

4.    图片绘制边框border-image的特性图片，剪裁位置，重复性。

（1）图片(border-image-source)

 

（2）图片剪裁位置(border-image-slice)上右下左的原则 没有单位时，专指像素，也可以用百分比

总共对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格

（3）重复性(border-image-repeat)：repeat（平铺，像素会变化）、round（平铺，像素不变）、stretch(默认)

CSS背景

1.background-size

（1）在 CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

（2）调整背景图片的大小：

div

{

background:url(bg_flower.gif);

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-size:63px 100px;

background-repeat:no-repeat;

}

（3）对背景图片进行拉伸，使其完成填充内容区域：

div

{

background:url(bg_flower.gif);

-moz-background-size:40% 100%; /* 老版本的 Firefox */

background-size:40% 100%;

background-repeat:no-repeat;

}

2. CSS3background-origin 属性

（1）规定背景图片的定位区域。

（2）背景图片可以放置于 content-box、padding-box或 border-box区域。

 

 

新的背景属性

属性	描述	CSS
background-clip	规定背景的绘制区域。默认是是border	3
background-origin	规定背景图片的定位区域。默认padding	3
background-size	规定背景图片的尺寸。

background-clip和background-origin的区别

background-clip规定背景从哪个区域开始显示

background-origin规定背景从哪个区域开始绘制

background-position指定了背景的位置，比如background-position:0px 0px ；那这个0px是指相对于哪里来说的呢？这就涉及到一个参照点的问题了。background-origin的作用就是指定background-position的参照点是在边框区域的左上角，还是在补白区域的左上角，或是在内容区域的左上角，对应的三个值就分别是border、padding、content.background-position的也可以是left、right等方向词语，这时候就不能说参照点了，而应该说参照面，如果background-origin的值为border,则参照面包括边框区域、补白区域、内容区域三个部分，如果值为padding,则参照面只包括补白区域和内容区域，如果值为content, 则参照面只包括内容区域。

CSS3文本效果

1.text-shadow   您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

2.word-wrap:允许对长单词进行拆分，并换行到下一行：

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。clip(修建文本) ellipsis(用…代替) string(使用给定的字符串来代表被修剪的文本。)	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3
clip	修剪文本。	测试
ellipsis	显示省略符号来代表被修剪的文本。	测试
string	使用给定的字符串来代表被修剪的文本。

CSS3字体

1. 使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

    url('Sansation_Light.eot'); /* IE9+ */

}

 

div

{

font-family:myFirstFont;

}

</style>

2. 使用粗体字体

您必须为粗体文本添加另一个包含描述符的 @font-face：

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Bold.ttf'),

    url('Sansation_Bold.eot'); /* IE9+ */

font-weight:bold;

}

 

 

CSS3 字体描述符

下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	·         normal ·         condensed ·         ultra-condensed ·         extra-condensed ·         semi-condensed ·         expanded ·         semi-expanded ·         extra-expanded ·         ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	·         ormal ·         italic ·         oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	·         normal ·         bold ·         100 ·         200 ·         300 ·         400 ·         500 ·         600 ·         700 ·         800 ·         900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

CSS3 2D 转换   能够对元素进行移动、缩放、转动、拉长或拉伸

2D Transform 方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。