css学习

来源：互联网发布：java 格式化时间编辑：程序博客网时间：2024/05/03 09:56

做网页的流程：

涉及分析，排版架构

模块拆分

整体调整

Css层叠样式表：样式信息与网页内容分离

   在没有Css时是使用Html标记的属性表示样式
   <h1><font color= " "   face=" "> ...</font></h1>

1、Css样式<style></style>种类
1.1行内样式<p style="color:; font-size:; text-decoration:"></p>
1.2内嵌式<head><style type="text/css">p{color:
                  text-decoration:
                  font-weight:
                  font-size:
                 }</style></head>
1.3连接式<head><link href="1.css" type="text/css" rel="stylesheet"></head>

1.css样子是这样的：
h2{
   color:;
}
p{

}

1.4导入样式<head><style type="text/css">@import url(1.css);</style></head>

2、CSS基本语法（选择器）
1.1 CSS选择器
     @@@标记选择器
      <style>h1{
                color:red;
                font-size:25px;
               }</style>
    @@@类别选择器
      .class{color:green; font-size:20px;}
    例如：
    <head><style type="text/css">
    .one{color:red; font-size:11px;}
    .two{color:green; font-size:20px;}
    .three{color:cyan; font-size:33px;}
    </style></head>

    <body><p class="one"></p></body>
    @@@ID选择器
     #id{color:green; font-size:20px;}
1.2 选择器声明
    @@@集体声明
    h1, h2, h3, h4, p{}
    h2.special, .special, #one{}
    @@@选择器的嵌套
    <style>p b{color:red; text-decoration:underline;}</>
    <body><p>嵌套使用<b>css</b>标记的方法</p></body>
1.3 CSS的继承
    @@@父子关系（略）
<ul>
    <li> 在这里，你可以：
    <ul>
        <li>品尝美食</li>
        <li>观看美景</li>
        <li>怀抱美人</li>
    </ul>
    </li>

    <li>你还可以：
    <ol>
        <li>品尝美食</li>
        <li>观看美景</li>
        <li>怀抱美人</li>
    </ol>
    </li>
</ul>

3、CSS<style></style>中文字的修饰
文字字体：h2{font-family:;}
文字大小：p.inch{font-size:;}
文字颜色：h2{color:;}
文字粗细：span{font-weight:; font-size:;} p span{}
斜体：h1{font-style:italic;} h1 span{font-style:normal;}
下划线、顶划线、删除线p.one{text-decoration:underline;}
                        p.two{text-decoration:overline;}
                        p.three{text-decoration:line-through;}
                        p.four{text-decoration:blink;}文字闪烁
英文字母大小写：p.one{text-transform:capitalize;}单词首字母大写
                  p.two{text-transform:uppercase;}全部大写
                  p.three{text-transform:lowercase;}全部小写
                  p{letter-spacing:-2px;}字母间距
CSS段落文字
段落水平对齐方式p.left{text-align:left;}
                  p.right{text-align:right;}
                  p.center{text-align:center;}
                  p.justify{text-align:justifu;}两端对齐
段落垂直对齐方式td.top{vertical-align:top;}顶端对齐
                  td.bottom{vertical-align:bottom;}低端对齐
                  td.miiddle{vertical-align:middle;}中间对齐
行间距，字间距p.one{font-size:10pt; line-height:8pt;}行间距小于字体大小
                p.second{font-size:18px;} p.third{font-size:10px}
                p.second, p.third{line-height:1.5em;}
首字放大<p> <span> <span> <p>
          p span{font size:60px;
                 float:left;首字下沉
                 padding-right:5px;与右边间隔
                 font-weight:bold;
                 font-family:黑体；
                 color:yellow;}
          body{background-color:black;}
          p{font-size:15px; color:white;}

4、CSS图片效果
图片样式
    图片边框img.text1{
                      border-style:dotted;dashed
                      border-color:;
                      border-width:;
                      }
              border:dotted red 2px;
              border-left:
    图片的缩放width：50%相对宽度，相对浏览器body的宽度
              width：50px绝对宽度
图片对齐
    横向对齐<td style="text-align:left";><img src=""></td>
    纵向对齐
图文混排
    文字环绕img{float:left;}
    图片与文字之间的间距 p{padding-top:;padding-left:;padding-right:;}
图文实例：八仙过海

5、CSS页面背景
背景颜色
      页面背景颜色body{backcolor:; color:;}
      用背景色给页面分块
背景图片
      页面的背景图body{background-image:url();}
      背景图片的重复的设置body{background-image:();
                          background-repeat:repeat-y;
                          background-color:;}
      背景图片的位置 background-repeat:no-repeat;
                      background-position:bottom right;
      固定背景图片（图片与文字的相对位置是固定的）
                     background-attachment:fixed;
念奴娇赤壁怀古
      writing-mode:tb-r1;/* 竖排版文字 */

6、CSS设置表格与表单样式
1.控制表格
    @@@@表格标记
    <table summary="This table shows the yearly income for years 2004    through 2007" border="1">
    <caption></>标题
    <tr></>一行
    <td></>列单元格
    <th scope="col"></>重要的行单元格
    <th scope="row"></>重要的列单元格

    @@@@@表格颜色<table summary="This table shows the yearly income for years       2004 through 2007" border="1"     class="datalist">                  .datalist{
   color:#0046a6;       /* 表格文字颜色 */
   background-color:#d2e8ff/* 表格背景色 */
   font-family:Arial;/* 表格字体 */
     }
     .datalist caption{
   font-size:18px;   /* 标题文字大小 */
   font-weight:bold;/* 标题文字粗体 */
     }
     .datalist th{
   color:#003e7e;   /* 行、列名称颜色 */
   background-color:#7bb3ff;/* 行、列名称的背景色 */
      }

     @@@@@@表格边框border:1px solid #429fff;   /* 表格边框 */
             border-collapse:collapse;   /* 边框重叠 */
2.表格实例：隔行变色
     .datalist tr.altrow{
           background-color:#c7e5ff;   /* 隔行变色 */
      }
     <tr class="altrow">
3.CSS与表单
      @@@@@@@表单中的元素<form method="post"></form>
                  <input type="text" name="name" id="name">输入框
                  <select name="color" id="color">下拉菜单
                  <option value="red">红</option>
                  <option value="green">绿</option>
                  <option value="blue">蓝</option>
                  <option value="yellow">黄</option></select></p>
         单选框<input type="radio" name="sex" id="male" value="male">男
                  <input type="radio" name="sex" id="female“ value="female">女
   复选框<input type="checkbox" name="hobby" id="book" value="book">看书
   <input type="checkbox" name="hobby" id="net" value="net">上网
        <textarea name="comments" id="comments" cols="30" rows="4"></textarea>
        <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
     @@@@@@@像文字一样的按钮
          <input type="text" name="name" id="name" class="txt">
   <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
      .txt{
   border-bottom:1px solid #005aa7;   /* 下划线效果 */
   color:#005aa7;
   border-top:0px; border-left:0px;
   border-right:0px;
   background-color:transparent;       /* 背景色透明 */
           }
       .btn{
   background-color:transparent;       /* 背景色透明 */
   border:0px;                           /* 边框取消 */
         }

直接输入的Excel表格：在form中嵌套table

7、丰富的超链接特效
1 动态超链接<td><a href="#">首页</a></td>
    a{}
    a:link{}超链接正常状态下的样式
    a:visited{}访问过的超链接
    a:hover{}鼠标经过时的超链接

2 按钮式超链接
    边框实现阴影效果
a{            /* 统一设置所有样式 */
   font-family: Arial;
   font-size: .8em;
   text-align:center;
   margin:3px;
}
a:link, a:visited{
   color: #A62020；
   padding:4px 10px 4px 10px;                //文字的位置
   background-color: #ecd8db;
   text-decoration: none;
   border-top: 1px solid #EEEEEE;       /* 边框实现阴影效果 */
   border-left: 1px solid #EEEEEE;
   border-bottom: 1px solid #717171;
   border-right: 1px solid #717171;
}
a:hover{                               /* 鼠标经过时的超链接 */
   color:#821818;                       /* 改变文字颜色 */
   padding:5px 8px 3px 12px;           /* 改变文字位置 */
   background-color:#e2c4c9;           /* 改变背景色 */
   border-top: 1px solid #717171;       /* 边框变换，实现“按下去”的效果 */
   border-left: 1px solid #717171;
   border-bottom: 1px solid #EEEEEE;
   border-right: 1px solid #EEEEEE;
}

3浮雕式超链接
table.banner{
   background:url(banner1_bg.jpg) repeat-x;
   width:100%;
}
table.links{
   background:url(button1_bg.jpg) repeat-x;
   font-size:12px;
   width:100%
}
a{
   width:80px; height:32px;
   padding-top:10px;
   text-decoration:none;
   text-align:center;
   background:url(button1.jpg) no-repeat;   /* 超链接背景图片 */
}
a:link{color:#654300;}
a:visited{color:#654300;}
a:hover{
   color:#FFFFFF;
   text-decoration:none;
   background:url(button2.jpg) no-repeat;   /* 变换背景图片 */
}

鼠标特效
鼠标箭头<a href="#" class="help">帮助</a>
        a.help:hover{
   cursor:help;变幻鼠标形状 */
}

页面滚动条
       scrollbar

8、CSS排版

理解CSS与div定位（Css排版）
1.div与span标记
div标记不同行：
span标记同一行（行内样式）
2.盒子模型（块之间与其他块之间的关系）
margin border padding content
3.元素定位
float定位
position定位
          position：absolute与父块没有依赖关系
          left:20px;
      top:30px;
z-index：如果不设定这个z-index那么后面的块会覆盖前面的块
4.给图片签名

1.CSS排版观念
将页面用div分块：container banner content links footer
设计各块的位置
用css定位
2.固定宽度且居中的板式

0 0