打造漂亮网站,实例化来看CSS的学习

发布时间:2010-01-19 发布者:新锐传媒 查阅 [5036] 评论 [0]

无论是你是一名网站建设人员还是一名网站优化人员,做为必然趋势的DIV+CSS设计,了解并掌握它都是非常重要的。当然学习就是为了要去做东西,让我们在实践中来详细学习下CSS的相关语法和标签的定义。

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
    <head>
        <title>青岛网站建设</title>
        <meta http-equiv=”keywords” content=”enter,your,keywords,here” />
        <meta http-equiv=”description” content=”A short description of this page.” />
        <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
      
        <!–<link rel=”stylesheet” type=”text/css” href=”styles.css”>–>
        <style type=”text/css”>
            p,div
            {
                text-align:center;
                color:red;
                font-family:arial
            }
            .sb
            {
                font-size:9pt;
                color:blue
            }
            strong.st
            {
                font-family:楷体
            }
            #pp
            {
                font-weight:bold;
                color:#0000ff;
                position:absolute;
                top:70px;
                left:30px;
                width:300px;
                height:60px;
                z-index:2;
                overflow:auto;/*内容超出范围怎么办,还有visible,hidden,scroll*/
                visibility:visible
            }
            dl#pp
            {
                这里只对dl的id为pp有用
            }
            table a
            {
                只对table里包含的a有用
            }
            body > p
            {
                子对象选择器,所有body下的子对象p
            }
            h1 + p
            {
                相邻选择器
                color:blue所有h1和p相邻的都是这个样式
            }
            html > body table tr[id="total"] td ul > li
            {
                font-size:30pt !important;
                文内样式优先级,加1、0、0、0,最高
                每个id选择器,加0、1、0、0
                每个class选择器,加0、0、1、0
                每个元素或伪元素,加0、0、0、1
                其他选择器,加0、0、0、0,等于没加
                有!important声明的高于一切,两个相同则比较优先级,再同比较顺序,后来局上
                7个普通元素,一个属性选择器,两个其它选择器 结果 0,0,1,7
            }
            li#answer
            {
                一个id选择器,一个普通选择器,结果是0,1,0,1,比前面的大
            }
            p:first-letter
            {
                font-size:20pt
                伪元素包括first-line,first-letter,:before,:after
            }
            p:first-child
            {
                text-indent:25px;
                伪类,将对任何第一个子元素为p的元素进行缩进,
                还包括::link:,:visited,:hover:(mouse over),:active(select),:lang
                p:first-child em,这个则对p元素的第一个em子元素起作用
            }
            /*css属性和值*/
            div
            {
                /*字体属性*/
                font-family:courier;/*字体类型*/
                font-style:italic;/*字体样式normal  italic  bolique*/
                font-variant:small-caps;/*字体变形*/
                font-weight:bold;/*字体粗细*/
                font-size:14pt;/*字体大小*/
                /*文本属性*/
                word-spacing:10pt;/*单词间距*/
                letter-spacing:5pt;/*字母间距*/
                line-height:1.5;/*行距*/
                text-align:center;/*文本水平对齐*/
                vertical-align:bottom;/*文本垂直对齐*/
                text-indent:30pt;/*文本缩进*/
                /*颜色和背景属性*/
                color:red;/*文本颜色*/
                background-color:#e2b87f;/*背景颜色*/
                background-image:url(image/1.jpg);/*背景图片*/
                background-repeat:repeat-x;/*设定背景重复排列,还有repeat,repeat-y,no-repeat*/
                background-position:left top;/*设定背景图片位置,还有center,bottom等或百分比,或绝对单位x,y定位*/
                /*边框属性*/
                border:auto;
                border-top:2pt;
                border-color:black;
                border-style:dotted;/*none:无,dotted:虚线,dash:短线,solid:实线,double:双实线,groove:带立体感沟槽,

ridge:成脊形,inset:内嵌立体边框,outset:外嵌立体边框*/
                border-width:thin;/*还有thick,medium:缺省值*/
                border-bottom-color:red;
                /*列表属性*/
                list-style-type:circle;/*在前面加圆圈,还有disc加实心圆,square加实心方块,decimal加阿拉伯数字,lower-roman加

小些罗马数字,upper-alpha加大写英文字母*/
                list-style-position:inside;/*outside表示放文本以外*/
                list-style-image:url(image/face1.gif);
                /*定位属性*/
                position:absolute;
                top:70px;
                left:30px;
                width:300px;
                height:600px;
                z-index:2;
                overflow:auto;/*内容超出范围怎么办,还有visible,hidden,scroll*/
                visibility:visible
                /*鼠标属性*/
                cursor:hand;/*crosshair简单十字状,move被移动交叉箭头,text编辑文本指针状,help,wait*/              
            }
            /*图像边框*/
            img.framed{
                padding:10px;/*填充为10px*/
                border:3px solid.#ff0000;
                background-color:#ff0000;
                margin:-5px 5px 5px -5px;/*设置图片边框*/
                display:block;/*实现单击区域按钮的效果*/
                position:relative;/*使用相对定位来偏移图像*/
            }
            /*链接样式设计*/
            a
            {
                color:red;
                text-decoration:none;/*隐藏下划线*/
                background-image:url(image/face1.gif);/*链接背景图片*/
                background-repeat:repeat-x;
                background-position:100% 100%;/*保证图形出现在链接文字的下方*/
                padding-bottom:4px;/*链接下方加入空白给自定义图形留空间*/
                white-space:nowrap;/*阻止链接文字折行*/
                display:block;/*实现单击区域按钮的效果*/
                width:20px;/*按钮宽度*/
                line-height:1.3em;/*按钮高度*/
                text-align:center;/*按钮文字居中显示*/
                border-left:0.5em solid #9ab;/*设置左边框样式*/
            }
            a:link
            {
                color:green/*这个表示有链接地址href属性值的*/
            }
            a:visited
            {
                color:lightgreen;      
            }
            a:hover
            {
                background-color:red;/*当鼠标悬停在连接上时连接文本的颜色*/
                color:yellow;
                text-decoration:line;/*鼠标悬停连接后显示下划线*/
                font-weight:bold;/*鼠标悬停字体变粗*/
                cursor:url(”image/1.ani”);/*设置鼠标指针要使用的图片只支持ico,cur,ani类型指针文件*/
            }
            a:active
            {
                background-color:black;/*当鼠标按下激活链接时背景变为黑色*/
            }
            table
            {
                width:230;
                height:100;
                background:#33ccff
            }
            tr
            {
                cursor:hand;
                onmouseover:expression(onmouseover=function (){ this.style.borderColor
                =’white’;this.style.color=”;this.style.backgroundColor=’#9999CC’});
                onmouseout:expression(onmouseout=function (){this.style.borderColor=”;
                this.style.color=”;this.style.backgroundColor=”});
            }
            td
            {
                cursor:hand;
                onmouseover:expression(onmouseover=function (){ this.style.borderColor
                =’white’;this.style.color=”;this.style.backgroundColor=’#9999CC’});
                onmouseout:expression(onmouseout=function (){this.style.borderColor=”;
                this.style.color=”;this.style.backgroundColor=”});      
            }
            .line
            {
                border-left:none;
                border-right:none;
                border-top:none;
                border-bottom:1px solid #00ffcc;
            }
            .gg
            {
                background-color:transparent;/*设置表单背景透明化*/
            }
            form/*设置表单样式*/
            {
                margin:10px;
                margin-top:20px;
            }
            .text/*文本框样式*/
            {
                background-color:#ff99ff;
                border-width:2px;
                border-style:solid;
                border-color:#ff00cc;
            }
            select /*下拉列表样式*/
            {
                position:relative;/*设置为相对定位*/
                left:-2px;
                top:-2px;
                font-size:12px;
                width:100px;
                line-height:14px;
                border:0px;
                color:#909993;
            }
            .select1
            {
                background-color:#ff99ff;
                color:#000000;
            }
            .select2
            {
                background-color:#ccffcc;
                color:#000000;
            }
        </style>
    </head>
    <body bgcolor=”#ffccff”>
    username: <input type=”text”/>透明化: <input type=”text”/>文本框样式 <input type=”text”/>
    <select>
        <option>select1</option>
        <option>select2</option>
    </select>
    <table border=”1″><tr><td>青岛网站建设</td><td>ssssssssss</td><td>ssssssssss</td></tr>
  <tr><td>ssssssssss</td><td>ssssssssss</td><td>ssssssssss</td></tr>
  <tr><td>ssssssssss</td><td>ssssssssss</td><td>ssssssssss</td></tr>
  <tr><td>ssssssssss</td><td>ssssssssss</td><td>ssssssssss</td></tr>
  </table>
  <div>
  <p>p</p>
  <p>p</p>
  </div>
  <p>p</p>
  <span>p</span>
  <p id=”pp”>对id用的</p>
  <span id=”sp”>span</span>
  <ul>
      <li>li</li>
      <li>li</li>
  </ul>
  <dl>
    <dt>dt</dt>
    <dd>dd</dd>
  </dl>
  <h1>h1</h1>
  <strong>strong强大</strong>
  <em>ememememem</em>
  所有标记必须有结束符<br/>
  属性名字必须小写<br/>
  所有xhtml必须嵌套<br/>
  属性值必须用双引号<br/>
  属性缩写禁用<br/>
  大于号必须&gt;<br/>
  小于号必须&lt;<br/>
  与符号必须&amp;<br/>
  用id代替name属性<br/>
  <a href=”sss”>不要在注释内容中使用“–”</a><br/>
    </body>
</html>

 人总是爱幻想的,CSS打造的动态网页实现了设计师的幻想,而创造本就源于幻想,CSS将会彰显其越来越强大的功能。

 

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图