「成创网络」
联系电话: 15041255464

「成创网络」

024-24851400

联系手机:15041255464

本网站由WWW.LDWU.COM提供搜索引擎优化服务

当前位置:首页 >> 建站技术

如何让CSS在网站设计中发挥作用

发布日期:2023-05-15来源:「成创网络」

网站设计中使用到CSS的频率越来越高了,但如何才能让CSS在网站设计中更高效的发挥自己的作用呢?这是一个值得深思的问题。

专业网站设计CSS书写注意事项一:使用外联样式替代行间样式或者内嵌样式

推荐使用外联样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="content-type" content="text

<title>Page title - 52css.com</title>

<link rel="stylesheet" href="name.css" type="text/css" media="screen" />

< /head>

<body> ... </body>

</html>

专业网站设计CSS书写注意事项二:建议使用 link 引入外部样式表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>

<meta http-equiv="content-type" content="text

<title>Page title - 52css.com</title>

<link rel="stylesheet" href="name.css" type="text/css" media="screen" />

</head>

<body> ... </body>

</html>

这样做的目的是为了让最终的网站设计结果可以兼容老版本的浏览器

专业网站设计CSS书写注意事项三:高效继承的使用

body { font-family: arial, helvetica, sans-serif; }

body { font-family: arial, helvetica, sans-serif; }

h1 { font-family: georgia, times, serif; }

专业网站设计CSS书写注意事项四:多重选择器的高效利用

h1, h2, h3, h4 { color: #236799; }

专业网站设计CSS书写注意事项五:高效的使用多重声明

p { margin: 0 0 1em; background: #ddd; color: #666; }

专业网站设计CSS书写注意事项六:简记属性的高效写法

body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color:#222; }

专业网站设计CSS书写注意事项七:关于!important

高效网站设计当中的CSS慎用写法

#news { background: #ddd !important; }

特定情况下可以使用以下方式提高权重级别

#container #news { background: #ddd; }

body #container #news { background: #ddd; }