信息发布与网页设计-Dreamweaver-11CSS

信息发布与网页设计DREAMWEAVER11CSS信息学院《信息发布与网页设计》课题组2019年7月31日星期三2019/7/31211.1样式表的内嵌、外连11.2创建样式表11.3创建外部样式表11.4CSS编辑器11.5应用CSS样式表11.6管理CSS样式表第11章主要内容2019/7/31311.1CSS介绍什么是CSS？CascadingStyleSheets，层叠样式表CSS的好处扩展了HTML的显示样式；显示样式与数据内容分离，便于修改样式或数据；可共享，以统一显示风格。当前版本：W3C制定的两个版本：CSS1、CSS2。2019/7/314CSS语法选择符{属性名1:属性值1;…属性名n:属性值n}选择符一般是:标记名称：如h1、h2、…p等类名称：英文句点开始，以英文字符命名，如.abc扩展：filterCSS语句样例：p{font-size:40pt;font-family:隶书;color:green}CSS中的注释/*这是CSS中的注释*/2019/7/315CSS的使用两种应用：外联、内嵌1.内嵌styletype=text/css。。。/style2.外联HEADlinkhref=new.cssrel=stylesheettype=text/css/HEAD文件名.扩展名2019/7/316CSS的使用导入在HTML中用@import命令导入样式表styletype=text/css@importurl(style.css)/style2019/7/317CSS内嵌样例htmlheadTITLECSS样例/TITLEstyletype=text/cssp{font-size:12pt;font-family:隶书}p:first-letter{font-size:400%;float:left}/style/headbodyp惠园是我们共同的家/body/html用style标记内嵌样式单定义P标记、首字母大小2019/7/318CSS的代码输入在DW中输入代码的技巧在代码视图状态下、、{、ㄩ、;、左、右尖括号，大括号、空格、分号的输入均可触发供选择的下拉列表。双击其中的列表项，即可择其自动填入。2019/7/31911.2DW中创建CSS方法一:“窗口”→“CSS样式”面板上单击鼠标右键，选择“新建”；方法二:通过“CSS样式”面板上的带+的按钮，打开“新建CSS样式”对话框。2019/7/311011.3选用外部CSS样式方法一:1.“窗口”→“CSS样式”，打开“CSS样式”面板；2.单击右上角的下拉菜单；3.选择“附加样式表”；4.单击“预览”，选择外部样式表文件。方法二:通过“CSS样式”面板上的“附加样式表”按钮，打开“附加外部样式表”对话框。余同方法一。2019/7/3111CSS中的类：CLASS及IDCSS的类class和标识id选择符class可有区别的表现相同的HTML元素；id可有区别的表现相同的HTML元素，内容必须唯一；class类由半角英文句点(.)开始；标识id由半角英文井号(#)定义之前。.intro{color:red;font-weight:bold;}#studentid{background-color:silver}2019/7/3112CSS中的类CLASS及IDHTML中应用如下：pclass=intro网页制作/pdivid=studentidid和class不同之处在于：id用在内容唯一的元素上，class可用在多个元素上。2019/7/311311.4CSS编辑器-11.类1.字体2.字号3.样式4.行高5.粗细6.变量7.大、小写8.颜色9.修饰2019/7/311411.4CSS编辑器-22.背景body、table、td。。。可通过添加BGCOLOR属性，来设置不同区域的背景颜色或图象。设置i.重复ii.水平位置iii.垂直位置2019/7/311511.4CSS编辑器-33.区块1.单词间距2.字母间距3.垂直对齐4.文本对齐5.文字缩进2019/7/311611.4CSS编辑器-3标签SPAN和DIV的区别DIV(division)是一个块级元素，其左、右无法再放置其它内容。SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。2019/7/311711.4CSS编辑器-44.盒子1.宽、高2.浮动3.清除4.填充5.边界2019/7/311811.4CSS编辑器-55.边框1.样式2.宽度3.颜色2019/7/311911.4CSS编辑器-66.列表1.类型1.圆点、圆圈2.方快、数字3.大、小写罗马数字4.大、小写字母2019/7/312011.4CSS编辑器-77.定位1.层的类型2.显示：继承、可见、隐藏3.Z-index4.层的位置、大小5.益处处理6.剪辑：定义层的可见部分2019/7/312111.4CSS编辑器-88.扩展1.分页2.光标3.滤镜2019/7/3122CSS样式单的使用-滤镜效果filter:属性名（参数列表）Alpha(90%)透明度设置Blur(…)高速度移动的模糊效果Chroma(…)将指定的颜色设置为透明Fliph/flipv水平/垂直翻转Glow(…)发光Gray(…)灰度2019/7/3123CSS样式单的使用-滤镜效果Dropshadow()投影Shadow()阴影Xray只显示轮廓例filter:xray只显示文字、图片的轮廓，似X光效果。2019/7/312411.5应用CSS样式8.扩展1.分页2.光标3.滤镜2019/7/312511.6管理CSS样式编辑CSS样式1.修改CSS样式2.拷贝CSS样式3.删除CSS样式2019/7/3126CSS中定义背景图片body{display:block;background-image:url(lspbh.jpg);background-repeat:no-repeat}也可以为某个元素定义背景图片，只要将根元素名换成相应的元素名即可。2019/7/3127CSS中使用中文在CSS中显示中文在CSS第1行添加如下语句，即可在CSS中使用各种中文字体@charsetgb2312;2019/7/3128CSS样式单中的主要属性名称说明font-family字型族名称font-style字型样式font-weight字型粗细font-stretch紧缩、扩张font-size字型大小color颜色text-indent文字缩排方式text-align文字对齐方式text-shadows文字阴影text-transform文字变化2019/7/3129CSS版面屬性名称说明display显示状态width宽度background-color背景颜色2019/7/3130属性值的设定Display属性Block块Inline字符显示在同一行list-item列表显示None不显示的内容background-color属性设定背景颜色rgb指定法Border属性「top」、「bottom」、「left」、「right」。2019/7/3131CSS样式单的使用绝对英寸（in）1in=2.54cm厘米（cm）1cm=0.3937in毫米（mm）1mm=0.1cm磅（pt）1pt=1/72in=0.3528mm派卡（pc）1pc=12pt=1/6in2019/7/3132CSS样式单的使用相对单位em字母M的宽度；Ex字母X的高度px像素点%百分比绝对单位In英寸(1英寸=2.54厘米)。Cm厘米Mm毫米。Pt磅(1磅=1/72英寸)Pc皮卡(1皮卡=12磅)。如父元素指定font-size=12pt,则其子元素定义Font-size=150%，即18pt。2019/7/3133CSS样式单的使用块级(block)内联(inline)列表项(list-item)不可见(none)2019/7/3134CSS样式单的使用-颜色单位四种颜色名称、十进制(0~255)、十六进制(00~ff)、百分比。content{color:red}content{color:rgb(silver}content{color:rgb(0%,50%,50%)}content{color:rgb(00,00,ff)}红绿黄2019/7/3135CSS中的定位CSS定位：相对/绝对定位position属性决定元素位置类型Position=absolute|relative|staticabsolute：屏幕上的绝对位置。relative：屏幕上的相对位置。static：固有位置。2019/7/3136CSS中的定位页面位置元素区域页边距margin填充距Padding2019/7/3137CSS中的定位z-index属性：CSS允许元素重叠显示，z-index属性用整数定义元素的前后位置，数值越大，显示在相对靠前的位置。z-index=auto|integer网上参考教程：：文字水平、垂直反转。阴影、投影、透明。2019/7/3139谢谢观看Thankyou(foryourattention.)