12CSS

信息发布与网页设计信息学院《信息发布与网页设计》课题组2020年2月4日星期二CSS简介随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的标签主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS简介CSS的英文是CascadingStyleSheets，中文可以翻译成串联式（层叠）样式表。CSS按其位置可以分成三种：内嵌样式(InlineStyle)内部样式表(InternalStyleSheet)外部样式表(ExternalStyleSheet)CSS简介CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascading的顺序是：浏览器缺省(browserdefault)(优先级最低)外部样式表(ExtenalStyleSheet)内部样式表(InternalStyleSheet)内嵌样式表(InlineStyle)(优先级最高)CSS的优点网页维护方便，网页内容和显示分离。缩短下载时间，避免标记的重复下载。样式功能强大，样式效果丰富。可以一处指定，多处使用。文件易读性好。CSS样式格式选择符{属性：值}选择符{属性1：值1；属性2：值2}CSS注释为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。CSS声明方式基本声明方式：p{font-size:36px}分项声明方式：p{font-size:36px}p{color:#FF0000}集体声明方式：P{font-size:36px;color:#FF0000}P,h1{font-size:36px;color:#FF0000}创建CSS样式在css样式面板上单击鼠标右键css样式面板右上角的下拉菜单css样式面板下方的“新建css样式”按钮创建CSS样式CSS样式表类型类：可以被任意标签通过Class属性引用标签：重新定义某特定标签的外观高级：设定链接或特定ID的属性CSS应用内嵌样式的使用方法：将STYLE属性直接加在个别的元件标签里，＜元件(标签)STYLE=属性1:值1;属性2:值2;...}例如：＜TDSTYLE=“COLOR:BLUE;font-size:9pt;font-family:“楷体”;line-height:150%＞这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的“统一性”。CSS应用内部样式表，写在HTML的head/head里面的。内部样式表只对所在的网页有效。例如：＜STYLETYPE=text/css＞＜!--BODY{color:BLUE;background:#ffffff;font-size:9pt}TD,P{COLOR:GREEN;font-size:9pt}--＞＜/STYLE＞CSS应用将样式规则写在＜STYLE＞...＜/STYLE＞标签之中。通常是将整个的＜STYLE＞...＜/STYLE＞结构写在网页的＜HEAD＞＜/HEAD＞部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。CSS应用外部样式表将样式规则写在.css的样式档案中，再以＜LINK＞标签引入。假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入＜LINKREL=STYLESHEETTYPE=“text/css”HREF=“example.css”＞即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的＜head＞＜/head＞部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。CSS应用使用@import引入，跟LINK用法很像，但必放在＜STYLE＞...＜/STYLE＞中。＜STYLETYPE=“text/css”＞＜!--@importurl(引入的的位址、路径与档名);--＞＜/STYLE＞例如：＜STYLETYPE=text/css＞＜!--@importurl();--＞＜/STYLE＞创建CSS样式CSS样式定义的冲突同一个标签的相同属性被多处定义时，以最后定义的为准。页面元素被多个标签作用时，如果标签样式定义有冲突，以距离页面元素最近的标签样式为准。一个标签中，如果既有用HTML定义的样式，也有通过Class引用的样式，则以Class引用的样式为准。创建CSS样式CSS编辑器类型背景区块（段落文字）方框（图片、文字）边框（表格）列表（有序、无序列表）定位（层）扩展（CSS滤镜只适合图像、表格、层，不适合直接作用于文字）创建CSS样式应用CSS样式管理CSS样式在CSS样式面板上右键单击，可以“修改”、“复制”、“删除”、“附加样式表”等在CSS样式面板右上方的下拉菜单，可以“编辑”、“删除”、“附加样式表”在CSS样式面板下方，利用编辑、删除、附加样式表按钮