使用CSS样式表
Web标准与CSS网页布局实例
CSS3新特性
使用CSS样式表
- CSS（Cascading Style Sheet, 层叠样式表）。样式表的首要目的是为网页上的元素精确定位，其次它可以把网页上的内容结构和格式控制相分离
- 添加CSS有4种方式：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。
- 字体属性
1.字体font-family
2.字号font-size
3.字体风格font-style normal(默认正常字体)、italic(斜体)、oblique(中间状态偏斜体)
4.加粗字体font-weight
5.小写字母转为大写font-variant
6.字体的复合属性，可以取值字体族科、字体大小、字体风格、加粗字体等，各值之间用空格相连
- 颜色和背景属性
1.颜色属性color
2.背景颜色background-color
3.背景图像background-image
4.背景重复background-repeat
5.背景附件background-attachment scroll/fixed)
6.背景位置background-position，该属性只能应用于块级元素和替换元
素，替换原宿包括img、input、textarea、select和object
7.背景复合属性background，取值范围可以包括背景颜色、背景图像、
背景重复、背景附件和背景位置，之间用空格相连
- 段落属性
1.单词间隔word-spacing，可以控制单词之间的间隔距离，只针对英文单词有效，对汉语无效
2.字符间隔letter-spacing
3.文字修饰text-decoration，可以对文本添加下划线underline、上划线
overline、删除线line-through、文字闪烁效果blink
4.垂直对齐方式vertical-align，设置文字的垂直对齐方式
5.文字转换text-transform，用来转换为英文字母的大小写。默认
none，capitalize表示使每个单词首字母大写，uppercase表示转换成大
写，lowercase表示转换成小写
6.水平对齐方式text-align，有四个取值left，right，center，justify（两端对齐）
7.文本缩进text-indent，该属性可以控制首行的缩进以及锁紧的长度，
文本的缩进值是一个长度值或者一个百分比
8.文本行高line-height，控制段落中杭宇航之间的距离，行高值可以为长度、倍数和百分比
9.处理空白white-space，该属性用于设置页面内空白的处理方式，包括3个值：normal是默认属性，
即将连续的多个空格合并；pre会导致源代码中的空格和换行符被保留，这一选项在IE6上才能正确显示；
nowrap强制在一行内显示所有文本，直到文本结束或者遇到<br>对象
10.文本反排unicode-bidi、direction，这两个属性来设置对象的阅读顺序，
语法：unicode-bidi:bidi-override | normal | embed
说明：bidi-override表示严格按照direction属性的值重排序，normal表示默认值；embed表示
对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
语法： direction：ltr | rtl | inherit
说明：ltr表示从左到右顺序阅读，rtl表示从右到左顺序阅读，inherit表示文本流的值不可继承
- 外边距和内边距属性
盒子模型由四个部分组成content（内容）、padding（内边距）、border（边框）和margin（外边距）。
1.content内容区有3个属性 width height overflow
2.内边距属性5个 padding padding-left padding-top padding-right padding-bottom
3.边框属性3个 border-style border-width border-color
4.外边距属性5个 margin margin-top margin-right margin-bottom margin-left
- 边框属性
1.边框样式border-style，该属性用于指定可见的边框，上边框样式border-top-style、右边框样式
border-right-style、下边框样式border-bottom-style、左边框样式border-left-style
2.边框宽度border-width同上
3.边框颜色border-color同上
4.边框属性border同上
- 定位属性
1.定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位是指允许元素在相当于
文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始的文档布局分离且任意定位。
2.定位方式position
语法： position: static | absolute | fixed | relative
说明： static表示默认值，absolute表示采用绝对定位，需要同时使用left right top 和
bottom等属性进行绝对定位，fixed表示当页面滚动时，元素不随着滚动，relative表示采用相对
定位，对象不可层叠。
3.元素位置top right bottom left
4.层叠顺序z-index，使用层叠顺序可以设置层的先后顺序和覆盖关系。默认情况下z-index值为1，表示该
层位于最低层,z-index值越高，它的层就越靠上。
- 浮动属性float，该属性可以设置文字在某个元素的周围，它能应用于所有的元素
语法：float：none（默认值）| left（表示文字浮动在元素的右边）| right（表示文字浮动在元素的左边）
- 清除属性clear，该属性用于指定一个元素是否允许有其他元素漂浮在它的周围
语法：
clear: none | left | right | both
说明：
none 表示两边都可以有浮动对象是默认值
left 表示不允许左边有浮动对象
right 表示不允许右边有浮动对象
both 表示不允许有浮动对象
- 可视区域clip
语法：clip:auto | rect(数字)
说明：auto表示对象不裁剪，是默认值；rect(数字)表示它依据上右下左的顺序提供自对象左上角
(0,0)坐标计算的4个偏移数值，其中任意一个数值都可以用auto替换，即此边不裁剪。裁剪的区域
是矩形，只要设置两个点即可：一个是矩形左上角的顶点，由top和left两项完成；另一个是右下角
的顶点，由bottom和right两项设置完成。
- 超出范围overflow，使用该属性可以设置当层内的内容超出层所能容纳的范围时的显示方式。
语法：overflow： visible | auto | hidden | scroll
说明：
visible表示层的大小和内容都会自动显示出来
auto表示只在内容超出层的范围时才显示滚动条
hidden表示会隐藏超出层范围的内容
scroll表示总是显示滚动条
- 可见属性visibility，该属性是针对嵌套层的设置，嵌套层是插入在其它层中的层，分为嵌套的层和被嵌套的层。
语法：visibility: inherit | visible | hidden
说明：
1.inherit表示继承父对象的可见层，是默认值
2.visible表示无论父层对象是否可见，子层都是可见的
3.hidden表示无论父层对象是否可见，子层都是隐藏
- 列表属性
1.列表符号list-style-type 可以取值有disc circle square decimal lower-roman
upper-roman lower-alpha upper-alpha none
2.图像符号list-style-image，该属性可以使用图像作为列表符号
语法： list-style-image: none(表示不指定图像) | url(图像，表示使用绝对地址或相对地址指定符号的图像)
3.列表缩进list-style-position，该属性可以设置列表锁紧的程度
语法：list-style-position: outside | inside
说明：
outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside表示列表项目标记放置在文本以内，且环绕文本根据标记对齐
4.列表复合属性list-style，可以将列表相关属性写在一个里边
- 光标属性cursor，使用光标属性可以设置在对象上移动时鼠标指针采用的光标形状
- 滤镜属性
1.不透明度alpha，该属性用于设置对象内容的透明度，使图片产生透明渐变效果
2.动感模糊blur
3.对颜色进行透明处理chroma
4.阴影效果dropShadow
5.对象翻转flipH、flipV
6.发光效果glow
7.灰度处理gray
8.反向invert
9.X光片效果xray
10.遮罩效果mask
11.波形滤镜wave
Web标准与CSS网页布局实例
- Web标准由一系列规范组成，目前的Web标准主要由3大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）
1.结构用于对网页中用到的信息进行分类和整理。在结构中用到的技术主要包括HTML、XML、XHTML
2.表现用于对信息进行改版、颜色、大小等形式的控制。在表现中用到的技术主要是CSS层叠样式表
3.行为是指文档内部的模型定义以及交互行为的编写，用于编写交互式的文档。在行为中用到的技术主要包括DOM和ECMAScript
DOM(Document Object Model)文档对象类型：DOM是浏览器与内容结构之间沟通的接口，使浏览者可以访问页面上的组件
ECMAScript脚本语言：ECMAScript是标准脚本语言，用于实现具体界面上对象的交互操作。
- Div+CSS布局网页基础
Div用来为HTML文档内大块的内容提供结构和背景，它的起始标记和结束标记之间的所有内容都
是用来构成这个块儿的。其中所包含元素的特性由Div标记的属性来控制，或是通过使用样式表格
化这个块来进行控制
- Div是CSS布局方式的核心对象，做一个简单的布局只需要依赖Div和CSS，因此也称CSS布局为Div+CSS布局。
- 自适应布局是网页设计中常见的一种布局形式，自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。自适应布局需要将宽度由固定值改为百分比。
CSS3新特性
- border-radius圆角边框设置四个值： 1.top-left 2.top-right 3.bottom-right 4.bottom-left
- 当border-radius设置两个值： 1.top-left=bottom-right 2.top-right=bottom-left
- 当border-radius设置三个值： 1.top-left 2.top-right=bottom-left 3.bottom-right
- 边框图片border-image
- 边框阴影box-shadow
- 背景图片尺寸background-size
- 背景图片定位区域background-origin：padding-box | border-box | content-box
padding-box：背景图片相对于内边距框来定位
border-box：背景图片相对于边框盒来定位
content-box：背景图片相对于内容框来定位
- 背景绘制区域background-clip：padding-box | border-box | content-box
- 文本阴影text-shadow: h-shadow v-shadow blur color
- 强制换行word-wrap,该属性允许长单词或URL地址换行到下一行
- word-wrap: normal | break-word
normal：只在允许的断字点换行
break-word：在长单词或URL地址内部进行换行 - 文本溢出text-overflow，该属性设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
语法：
text-overflow: clip | ellipsis
说明：
clip: 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁剪掉
ellopsis: 当对象内文本溢出时显示省略标记（...）
- 文字描边text-stroke，该属性可以为文字添加描边，设置文字边框的宽度和颜色 text-stroke-width:设置对象中文字的描边厚度；text-troke-color:设置对象中的文字描边颜色
- 文本填充颜色text-fill-color
- 创建多列column-count： auto | number
- 列的宽度column-width: auto |length
- 列的间隔column-gap： normal | length
- 列的规则column-rule: column-rule-width column-rule-style column-rule-color
- 转换--移动translate()、旋转rotate()、缩放scale()、扭曲skew()、矩阵matrix()
- 过渡--transition特性用于在网页制作中实现一些简单的动画效果，让某些效果变得更顺畅、平滑
语法：
transition：property duration timing-function delay
说明：
transition-property：规定设置过渡效果的CSS属性
transition-duration：规定完成过渡效果需要多少秒或毫秒
transition-timing-function：规定速度效果的速度曲线
transition-delay：定义过渡效果何时开始
- 动画 @keyframes规则声明动画 from(0)..to(100%) 0% 25% 50% 75% 100%
- animation动画，该属性和transition的区别在于后者的动画过程需要一个事件触发而前者不需要
语法：
animation：name duration timing-function delay iteration-count direction
说明：
animation-name：规定需要绑定到选择器的keyframe名称
animation-duration：规定完成动画所花费的时间，以秒或者毫秒计
animation-timing-function：规定动画的速度曲线
animation-delay：规定在动画开始之前的延迟
animation-iteration-count：规定动画应该播放的次数
animation-direction：规定是否应该轮流反向播放动画
- 用户界面box sizing
- resize属性规定是否可由用户调整元素尺寸
- outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
网友评论