电子商务设计实务

书名：电子商务设计实务第3版ISBN：978-7-111-50682-9作者：孙永道王彤出版社：机械工业出版社本书配有电子课件第3章用CSS美化网页UI相关知识：什么是CSS样式表样式定义的基本格式样式的基本组成三种常见的选择器技能项目：如何创建样式表如何应用样式常见样式使用技巧如何使用特效滤镜主要内容CSS介绍1CSS创建和应用2Dreamweaver中设计样式3CSS3新样式介绍4一、什么是样式表样式表CSS（CascadingStyleSheet）中文译为“层叠样式表”，实际上就是一组用于设置网页内容显示形式的“样式”的集合。样式表的作用是可以在同一页面里设置不同内容的不同表现形式。另外，用样式功能可以使得仅仅改变一个样式就可以改变数百个网页的外观（即我们常听说的“皮肤”），或者改变一个单独的样式影响到网站的所有文字大小。某些特别的纪念日子里，读者看到很多网站突然变成一片黑白色，这就是样式表的功能。一、如何使用样式●通过内联样式表设计样式内联样式是指通过style标记直接将样式设置在网页的head标记中。可以直接指定某个html标记的样式（标记选择器样式）、某个具体网页元素的样式（ID选择器样式）或用于不同网页元素的样式（类选择器样式）。在网页中引用样式时，直接在HTML标记中设置id=ID样式名（ID选择器样式）或class=类样式名（类选择器样式）的方式引用样式。类样式的有效范围是在当前整个网页中有效，即网页中所有的标记都可以应用当前页面顶部定义的内联样式。一、如何使用样式●通过内联样式表设计样式下面是一个内联样式的例子：…headstyletype=text/css/*下面定义一个ID标签名样式，只针对定义ID为a1的html标记有效*/#a1{background-color:blue;font-size:12px;}/*下面定义一个类样式，对那些包含classa2的html标记有效*/二、创建和使用样式●通过内联样式表设计样式.a2{background-color:red;font-size:14px;}/*下面定义一个标记样式，对当前网页中的所有div标记都有效*/div{background-color:red;font-size:14px;}3.2如何使用样式●通过内联样式表设计样式/style/headbodydivid=a1样式为div/divdivclass=a2样式为类样式a1/divdiv样式为类样式标记div样式/div/body二、创建和使用样式●直接给标记嵌入样式●设计样式的第三种方式是嵌入样式，这种方法比较简单，只要在需要应用样式的HTML标记内写上CSS属性就可以了。●fontstyle=font:small;font-family:Arial设置字体样式/font三、各种样式的具体操作实践●新建样式●打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤一：在“CSS样式”面板中右击，弹出快捷菜单，选择“新建”命令，如图6-3所示。三、各种样式的具体操作实践●新建样式●打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤二：弹出“新建CSS规则”对话框，该对话框中的一些选项说明如下：选择器类型：●类：类选择器是可以用于任何html元素的样式，它的样式名前有个点。●标签：就是直接在现有的html标记上设置样式。●复合内容：复合内容主要是针对超链接的样式进行特别设置，包括以下四种可设置的样式。三、各种样式的具体操作实践●新建样式●打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤二：弹出“新建CSS规则”对话框，该对话框中的一些选项说明如下：选择器类型：a:active：设置当前选中超链接的样式。a:hover：设置当前光标悬停在其上方时的超链接样式。a:link：设置超链接一般样式，即没有鼠标选择，也没有鼠标悬停状态时候的样式。a:visited：设置已经访问（点击）过的超链接的样式。三、各种样式的具体操作实践●新建样式●打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤二：弹出“新建CSS规则”对话框，该对话框中的一些选项说明如下：选择器名称：●类：类选择器是可以用于任何html元素的样式，它的样式名前有个点。●标签：就是直接在现有的html标记上设置样式。●复合内容：复合内容主要是针对超链接的样式进行特别设置，包括以下四种可设置的样式。三、各种样式的具体操作实践●新建样式●打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤二：弹出“新建CSS规则”对话框，该对话框中的一些选项说明如下：选择器类型：●设置选择器的名称。只有当选择器类型选择为ID选择器或类选择器的时候才需要设置选择器的名称。规则定义：●这里是指，新设计的样式是作为当前网页的内嵌样式方式引用还是作为外部样式文件的链接方式应用。三、各种样式的具体操作实践●新建样式●打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤三：单击“确定”按钮，弹出“保存样式表文件为”对话框，如图6-5所示，对新建的样式表文件进行保存。三、各种样式的具体操作实践●文本样式文本样式对话框说明如图6-7所示：三、各种样式的具体操作实践●背景样式背景样式对话框说明如图所示：三、各种样式的具体操作实践●段落样式段落样式对话框说明如图6-14所示：三、各种样式的具体操作实践●定位样式定位”样式主要用来定义元素在页面中的相关位置和大小等属性，如图所示。三、各种样式的具体操作实践●边框样式边框”样式可以给对象添加边框，设置边框的颜色、粗细以及样式。如图所示。三、各种样式的具体操作实践标准盒子模型三、各种样式的具体操作实践标准盒子模型三、各种样式的具体操作实践●方框样式方框”样式是定义特定元素的大小及其与周围元素的间距等属性。在CSS3样式中设置方框样式，如图所示。三、各种样式的具体操作实践盒子模型案例三、各种样式的具体操作实践●列表样式列表”样式是用于控制列表内各项元素，可以定义样式的空格和对齐方式，如图所示。四、关于CSS3和HTML5●HTML5的新功能●图像方面的改进●HTML5引入了canvas标签，通过canvas可以动态地生成各种图形图像、图表以及动画。不仅如此，HTML5也赋予图片图形更多的交互功能，HTML5的canvas标签还能够配合javascript来利用键盘控制图形图像。四、关于CSS3和HTML5●HTML5的新功能●位置应用的支持●HTML5通过提供应用接口——GeolocationAPI，在用户允许的情况下共享当前的地理位置信息，并为用户提供其他相关的信息。HTML5的GeolocationAPI主要特点在于：本身不去获取用户的位置，而是通过其他三方接口来获取，例如IP、GPS、WIFI等方式；用户可以随时开启和关闭，在被程序调用时也会首先征得用户同意，保证了用户的隐私。四、关于CSS3和HTML5●HTML5的新功能●网络存储方面的支持●HTML5的WebStorageAPI采用了离线缓存，会生成一个清单文件（ManifestFile），这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML、CSS、JavaScrpit、图片等相关内容。四、关于CSS3和HTML5●CSS3的新功能●选择器●CSS选择器是个强大的工具：它们允许在标签中指定特定的HTML元素而不必使用多余的class、ID或javascripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。四、关于CSS3和HTML5●CSS3的新功能●连字符●CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级结点的所有兄弟级别元素。比如，给某个特定的div同级的图片添加一个灰色的边框（div和图片应该有同一个父级结点），在样式表中定义下面的样式就足够了：div~img{border:1pxsolid#ccc;}四、关于CSS3和HTML5●CSS3的新功能●伪类●或许在CSS3中增加最多的就是新的伪类了，以下介绍一些比较有用的伪类：●:nth-child(n)：基于元素在父结点的子元素的列表位置来指定元素。可以是用数字、数字表达式或odd和even关键词（对斑马样式的列表很完美）。●:last-child：匹配一个父结点下的最后一个子元素，等同于:nth-last-child(1)。●:checked：匹配选择的元素，比如复选框。●:empty：匹配空元素（没有子元素）。四、关于CSS3和HTML5●CSS3的新功能●伪元素●在CSS3中唯一引入的伪元素是::selection，它可以让你指定被用户高亮（选中）的元素。四、关于CSS3和HTML5●CSS3的新功能●RGBA和透明度●RGBA让设计者不仅可以设定色彩，还能设定元素的透明度。一些浏览器尚不支持它，所以最好在RGBA前面设定其他浏览器支持的没有透明的颜色属性。当设定一个RGBA色彩的时候，必须依次设定红、蓝和绿色的值，可以是0～255或百分数。四、关于CSS3和HTML5●CSS3的新功能●多栏布局●新的CSS3选择器可以不用使用多个div标签就能实现多栏布局。下面是CSS3的多栏布局例子：.index#contentdiv{-webkit-column-count:4;-webkit-column-gap:20px;-moz-column-count:4;-moz-column-gap:20px;}四、关于CSS3和HTML5●CSS3的新功能●可以通过这个选择器定义三件事情：栏数（column-count）、栏宽（column-width）和各栏之间的空白/间距（column-gap）。如果column-count未设定，浏览器会在允许的宽度内设置尽可能多的栏目。●为了在各栏目之间添加一个数值的分隔，可以使用column-rule属性，其功能和border属性类似：●div{column-rule:1pxsolid#00000;}四、关于CSS3和HTML5●CSS3的新功能●多背景图●CSS3允许使用多个属性比如background-image、background-repeat、background-size、background-position、background-originand、background-clip等在一个元素上添加多层背景图片。●在一个元素上添加多背景的最简单的方法是使用简写代码，可以指定上面的所有属性到一条声明中，最常用的是image、position和repeat属性：四、关于CSS3和HTML5●CSS3的新功能div{background:url(example.jpg)topleftno-repeat,url(example2.jpg)bottomleftno-repeat,url(example3.jpg)centercenterrepeat-y;}四、关于CSS3和HTML5●CSS3的新功能●自动换行●word-wrap（自动换行）属性用来防止太长的字符串溢出。可以用两个属性值normal和break-word。normal值（默认的）只在允许的断点截断文字，如连字符。如果使用了break-word，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。四、关于CSS3和HTML5●CSS3的新功能●文字阴影●尽管在CSS2中就已经存在，text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。四、关于CSS3和HTML5●CSS3的新功能●@font-face属性●尽管是最被期待的CSS3特性，@font-face在网站上仍然没有像其他CSS3属性