网页设计中有哪5类常用的CSS样式
操作方法
- 01
网页设计中常用到CSS样式有哪些？CSS样式能让我们快速实现一些功能，在这里和大家分享，CSS样式的五种方式如何应用在网页设计中，文中我们就详细说到代码的实现，希望对从事网页设计的朋友有所帮助！ 一、使用STYLE属性 将STYLE属性直接加在个别的元件标签里，＜元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如： ＜TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%＞ 这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。 二、使用STYLE标签 将样式规则写在＜STYLE＞...＜/STYLE＞标签之中。 ＜STYLE TYPE="text/css"＞ ＜!-- 样式规则表 --＞ ＜/STYLE＞ 例如： ＜STYLE TYPE="text/css"＞ ＜!-- BODY { color: BLUE; background: #ffffff; font-size: 9pt} TD, P { COLOR: GREEN; font-size: 9pt} --＞ ＜/STYLE＞ 通常是将整个的 ＜STYLE＞...＜/STYLE＞结构写在网页的＜HEAD＞ ＜/HEAD＞部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。 1 2 3 下一页 三、使用 LINK标签 将样式规则写在.css的样式档案中，再以＜LINK＞标签引入。 假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入 ＜LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"＞ 即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的＜head＞＜/head＞部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。 四、使用@import引入 跟LINK用法很像，但必 放在＜STYLE＞...＜/STYLE＞ 中。 ＜STYLE TYPE="text/css"＞ ＜!-- @import url(引入的的位址、路径与档名); --＞ ＜/STYLE＞ 例如： ＜STYLE TYPE="text/css"＞ ＜!-- @import url(http://yourweb/example.css); --＞ ＜/STYLE＞ 要注意的是，行末的分号是绝对不可少的！ 五、使用＜span＞＜/span＞标记引入样式 例如：＜span style="font:12px/20px 宋体 #000000;"＞网页＜/span＞ 上一页 1 2 3 下一页 三、使用 LINK标签 将样式规则写在.css的样式档案中，再以＜LINK＞标签引入。 假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入 ＜LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"＞ 即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的＜head＞＜/head＞部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。 四、使用＜span＞＜/span＞标记引入样式 例如：＜span style="font:12px/20px 宋体 #000000;"＞网页＜/span＞ 上一页 1 2 3 五、使用@import引入 跟LINK用法很像，但必 放在＜STYLE＞...＜/STYLE＞ 中。 ＜STYLE TYPE="text/css"＞ ＜!-- @import url(引入的的位址、路径与档名); --＞ ＜/STYLE＞ 例如： ＜STYLE TYPE="text/css"＞ ＜!-- @import url(http://yourweb/example.css); --＞ ＜/STYLE＞ 要注意的是，行末的分号是绝对不可少的！