网页制作CSS

style标签

在style标签中写css样式，例：

<style>
  h1{
    
  }
</style>

字体的颜色

格式：**color: 颜色; ** 例：

color: red;
color: #0000cc;  /*十六进制的颜色 黑#000 白#fff*/

字体

格式：font-family: 字体; 例：

font-family: Microsoft YaHei;

注：常用字体类型为黑体、宋体、微软雅黑，网页设计效果图中非常用字体可以处理成图片。

字体粗细

格式：font-weight: （加粗或去掉加粗）; 例：

font-weight: normal;/*去掉标题字默认的加粗样式*/
font-weight: bold;/*字体加粗*/

对齐方式

格式：text-align: （对齐方式）; 例：

text-align: center;/*水平居中，默认是左对齐left*/
text-align: right;/*文字水平右对齐*/
/*行内元素不占空间*/

下划线

格式：text-decoration: ; 例：

text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*删除线*/
text-decoration: none;/*去掉超链接默认的下划线*/

字的大小

格式：font-size: ; 例：

font-size: 18px;/*字的大小，一般采用px像素*/

行距，字距，首行缩进

行距格式：line-height: ;

字距格式：letter-spacing: ;

首行缩进：text-indent: ;

例：

line-height:2;/*行距建议用倍，如：2倍，1.5倍*/
letter-spacing: 2px;/*字距*/
text-indent:2em;/*首行缩进两字符*/

宽，高

宽的格式：width: ;

高的格式：height: ;

例：

width: 200px;/*宽*/
height: 300px;/*高*/
line-height: 80px;/*行高*/
/*行高等于高的时候实现垂直居中*/

背景

格式：background: ;

background-color: #edf2ea;/*背景颜色*/
background-image: url("img/dahuangmao-14.png");/*背景图片默认平铺，平铺满整个容器*/
background-repeat: no-repeat;/*背景图片不重复*/
background-repeat: repeat-y;/*背景图片垂直重复*/
background-repeat: repeat-x;/*背景图片水平重复*/
background-repeat: no-repeat;
background-position: center bottom;/*水平：left，right，center 垂直方向：center，top，bottom*/
background-position: right;/*第二个不写，默认center*/
background-position: 50% 300px ;/*水平和垂直位置百分比和px都可以*/
background-attachment: fixed;
/*背景图片关联属性fixed位置固定，不随容器或网页滚动发生变化，背景图片的关联，默认是scroll（滚动）*/
background-attachment: scroll;

background-image: url("img/03.jpg");/*背景图*/
background-repeat: no-repeat;/*背景图不重复*/
background-size: 440px;
/*背景图片的尺寸，第一个值是宽，第二个值是高，只给第一个值，第二个值默认是auto*/
background-size: cover;/*cover，图片的比例不变，将元素铺满*/
background-size: contain;/*contain图片比例变，将图片在元素中完整显示*/
background-position: right 100px;
background: #f8f8fe url("img/03.jpg") no-repeat right 100px/330px;
/*背景色 背景图片 不重复 位置是right 1000px 背景图片尺寸是：330px auto*/
/*当background属性写在一起时，background-size必须写在background-position的后边，并且使用/隔开*/
background: -webkit-linear-gradient(left,#000 0%,#fff 100%);
/*-webki渐变方向[left,right,top,bottom]，linear渐变起始色，gradient渐变结束颜色*/
/*background:-webkit-linear-gradient(top,blue 50%,yellow 50%);*/
background: url("地址");/*背景图片*/

文字溢出

格式：overflow: ;

/*文字超出区域，溢出时，默认visible*/
overflow: hidden;/*溢出部分隐藏不显示*/
overflow: scroll;/*文字全部显示在区域里，显示滚动条查看其它内容*/
overflow: auto;/*根据文字内容是否超出区域而判断要不要加滚动条*/
white-space: nowrap;/*强制文本在一行显示*/
text-overflow: clip;/*默认值，超出部分被截断*/
text-overflow: ellipsis;/*显示省略号来代表被截断部分文本*/
word-break: break-all;/*单词换行*/
word-break: break-word/*单词换行，让单词重启一行显示*/

选择器

标记选择器

/*标记选择器*/
li{
    list-style: none;/*去掉无序列表默认的点点*/
}
a{
    text-decoration: none; /*去掉超链接下划线*/
    color: purple;
}
h1{
    color: pink;
}
p{
    color: blue;
}

类别选择器

/*类别选择器，类别选择器的名称可以由用户自定义，可以多次被引用
注：类别定义是加点，引用时不加点，在标记中用class属性引入*/
.active{
    color: red;
    font-weight: bold;/*加粗*/
}
.first{
   /*color: green;*/
    color: orange;
}
.big{
    font-size: 40px;
}
/*同时使用两种class，则两种样式同时加入，样式名中间用空格分隔；如h2标记big和orange，则是橘色大字*/

id选择器

/*id选择器，在网页中是唯一的，定义是#打头，引用时在标记中用id属性引用*/
#logo{
  color: red;
  text-decoration: underline;
}

复合选择器

/*复合选择器（常用）包括：交集选择器，并集选择器和后代选择器*/
.first{
 color: green;
}

交集选择器

/*交集选择器，标记且类别，切记中间没有空格*/
p.first{
 color: pink;
}
a.first{
 color: red;
 font-size: 18px;
}

并集选择器

/*并集选择器，一般用在代码初始化中，或一组选择器都有的共性，中间用逗号分隔*/
     a,h1,h2,div,p.first,.first{
       font-family: "Microsoft YaHei";
       color: #ff0099;
       font-size: 14px;
     }

后代选择器

/*后代选择器，内层标记成为外层标记的后代，
     后代选择器的写法是把外层标记写在前面，内层标记写在后面，之间用空格分隔*/
    div .first{
      font-size: 40px;
    }
    div p{
      color: skyblue;
    }

通配符选择器

/*通配符选择器：*,表示去任意元素都有效*/
  *{
    color: green;
  }

父子选择器

/*父子选择器,只能选择作为某元素的子元素的元素*/
  p>em{
    color: orange;
  }
  div>p{
    color: pink;
  }

兄弟选择器

/*兄弟选择器,第一个元素后，所有的元素2都会被选择，且这些元素与第一个元素拥有同一个父亲*/
  h2~p{
    color: purple;
  }

相邻兄弟选择器

/*相邻兄弟选择器，可以选择紧邻在另一元元素后的元素，且二者有相同的父亲*/
  div+p{
    color: red;
  }

属性选择器

/*属性选择器，格式：[属性]，如[target]*/
 [target]{
  color: green;
}
/*属性选择器，还可以是选取带有指定属性和值的元素，格式：[属性=属性值]。例：[target=_blank]*/
 [target="_blank"]{
  color: red;
}

结构伪类选择器

/*结构伪类选择器：first-child：选择一组兄弟元素中的第一个元素*/
  em:first-child{
    color: gold;
  }
  p:first-child{
    color: pink;
  }

!important

/*因为有!important，所以标记选择器优先于id选择器*/
  p{
    color: skyblue !important;
  }
/*!important>行内样式>id选择器>类别选择器>标记选择器*/

行内样式

<html>
<head>
<title>层叠特性</title>
  <style>
    #red{
      color: red;
    }
    /*行内样式>id样式*/
  </style>
</head>
<body>
  <p style="color: yellow" id="red">这是第1行文本</p>
  <p >这是第2行文本</p>
  <p >这是第3行文本</p>
  <p >这是第4行文本</p>
  <p >这是第5行文本</p>  
</body>
</html>

CSS盒模型

内边距

padding: ;

padding: 50px;/*四个方向内边距都是50px*/
padding: 50px 30px;/*上下内边距为50px，左右内边距为30px*/
padding: 30px 50px 20px;/*中间值代表left和right内边距为50px，top为30px，bottom为50px*/
padding-top: 50px;/*具体给哪个方向的padding值*/
padding-left: 40px;
padding-right: 20px;
padding-bottom: 60px;

外边距

margin: ;

margin: 100px;/*四个方向的外边距*/
margin-top: 100px;/*顶部外边距*/
margin-left: 200px;/*左侧外边距*/
margin-bottom: 100px;
margin: 20px 40px;/*上下外边距为20px，左右外边距为40px*/
margin: 30px 40px 50px;/*左右外边上40px，top为30px，bottom为50px*/
margin: 100px auto;/*盒子的上下外边距为100px，左右外边距为自动，实现了盒子的水平居中*/
margin: 0 auto;/*实现盒子水平居中*/
/*padding、margin简写情况相同，它们分别可以单独设某个方向的值：top bottom left right*/

边框

border-width: 6px;/*边框的宽*/
border-color: orange;/*边框颜色*/
border-color: red;/*1个值，代表上右下左四个值相同*/
border-color: blue green;/*第一个值代表上下，第二个值代表左右*/
border-color: gold purple orange;/*对称原则，第二个值表示左和右，第一个值为top上，第三个值bottom*/
border-color: red orange yellow green;/*四个值，顺时针方向，依次是top上，right右，bottom下，left左*/
/*四个边框可以分别设*/
border-top: 10px dashed #000;
border-right: 12px solid gold;
border-bottom: 6px double red;
border-left: 8px dotted purple;
border-style: solid;/*边框样式实线*/
border-style: dashed;/*边框样式是虚线*/
border-style: dotted;/*点状线*/
border-style: double;/*双线*/
/*border-style: none(不显示border)、hidden(不显示boder，在表格中可以解决边框冲突问题)、dotted、dashed(虚线)、solid、double、groove(槽状)、ridge(脊状)、inset和outset等。;*/
border: 10px solid #ff3399;/*10px宽 实线 边框颜色*/
border: 10px dashed #ff3399;/*dashed为虚线边框，背景色填充到conter+padding+border*/
/*border-radius圆角边框属性向div元素添加圆角边框*/
border-radius: 50%;

宽高和背景

width: 400px;
height: 200px;
/*width和height对应的是conten的宽和高*/
background: red;/*body的背景色是溢出到边框线外的*/

盒子之间的关系

标准流

块级元素

网页中以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满整个网页。

行内元素

对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素不，称为行内元素。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <meta name="Keywords" content="关键词1,关键词2,关键词3">
  <meta name="Description" content="描述">
  <title>盒子模型</title>

     <style>
         *{
             margin: 0;/*外边距清零*/
             padding: 0;/*内边距清零*/
             border: 0;/*边框清零*/
         }
         div{
             width: 400px;
             height: 200px;
             background: #ccffcc;
             padding: 50px;
             margin: 100px;
         }
         /*网页中以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满整个网页。如：div，header，nav，ul，li*/
         .one{
             border: 1px solid blue;
         }
         .two{
             border: 1px dashed green;
         }
         /*对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素不，称为行内元素。*/
        /*行内元素可以并排显示*/
         span{
           /* width: 400px;
            height: 200px;*/
            background: #ffff99;
            /*给行内元素width和height没有意义*/
             /*同学们可以把class="first"中的文字删除得只剩"行内元素一"几个字去测试，之后复制文字下图再自动折行*/
            /*margin: 200px;
            padding: 50px;*/

        }
        .first{
            border: 1px solid green;
            background: pink;
        }
        .second{
            border: 1px dashed purple;
            background: skyblue;
        }
     </style>

 </head>
 <body>
  <div class="one">盒子一</div>
  <div class="two">盒子一</div>
  <span class="first">行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一行内元素一</span>
  <span class="second">行内元素二</span>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <meta name="Keywords" content="关键词1,关键词2,关键词3">
  <meta name="Description" content="描述">
  <title>盒子模型</title>
  <style>
  *{margin:0;padding:0;}  
  /*当两个行内元素紧邻时，它们之间的距离为第1个元素的margin –right加上第2元素的margin-left*/
    span{
     background: skyblue;

    }
    .left{
     border: 1px solid green;
     margin-right: 100px;
    }
    .right{
     border: 1px solid blue;
     margin-left: 50px;
    }
  </style>
 </head>
 <body>  
  <span class="left">行内元素一</span>
  <span class="right">行内元素二</span>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <meta name="Keywords" content="关键词1,关键词2,关键词3">
  <meta name="Description" content="描述">
  <title>盒子模型</title>
     <style>
         div{
             width: 400px;
             height: 200px;
             background: #fce7fe;
             padding: 20px;
         }
         .one{
             border: 1px solid blue;
             margin-bottom: 100px;
         }
         .two{
             border: 1px dashed green;
             margin-top: 200px;
         }
        /*margin的“塌陷”现象：两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，即较小的margin塌陷到了较大的margin中*/
     </style>
 </head>
 <body>
  <div class="one">盒子一</div>
  <div class="two">盒子二</div>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <meta name="Keywords" content="关键词1,关键词2,关键词3">
  <meta name="Description" content="描述">
  <title>盒子模型</title>

     <style>
         *{margin: 0;padding: 0;}
         #father{
            width: 800px;
             height: 800px;
             margin: 0 auto;/*盒子水平居中*/
             margin-top: 100px;
             border: 1px solid red;
             padding-left: 100px;
         }
         .son{
             width: 200px;
             height: 200px;
             background: skyblue;
             margin-left: 200px;
         }
         /*本例中，左侧，父亲与儿子之间的距离是padding-left + margin-left = 300px*/
         /*相同方向的father的padding+son的margin，决定嵌套之间的距离*/
         .son-two{
             width: 200px;
             height: 200px;
             background: green;
             margin-left: -400px;/*当margin给负值的时候，会反方向移动，在本例中，左之左*/
         }
     </style>

 </head>
 <body>
  <div id="father">
    <div class="son">
      儿子
    </div>
        <div class="son-two"></div>
  </div>
  
 </body>
</html>

dom和几何题

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <meta name="Keywords" content="关键词1,关键词2,关键词3">
  <meta name="Description" content="描述">
  <title>网页标题</title>
    <style type="text/css">
  body{
  margin:0 0 0 0;
  font-family:宋体;
  font-size:12px;
  
  }
      ul { 
        background: #ddd; 
        margin: 15px 15px 15px 15px;
        padding: 5px 5px 5px 5px;
                                     /* 没有设置边框 */
      }
      li { 
        color: black;                /* 黑色文本 */ 
        background: #aaa;            /* 浅灰色背景 */
        margin: 20px 20px 20px 20px; /* 外边距为20像素*/
        padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
        list-style: none             /* 取消项目符号 */
                                     /* 未设置边框 */
      }
      li.withborder {
        border-style: dashed;
        border-width: 5px;         /* 设置边框为5像素 */
        border-color: black;
        margin-top:20px； 
      }
    </style>
  </head>
  <body>
    <ul>
      <li>第1个列表的第1个项目内容</li>      
      <li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
    </ul>
    <ul>
      <li>第2个列表的第1个项目内容</li>
      <li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
    </ul>

  </body>
</html>

 

 

 

 

几何题解答

a=ul的margin-left=15px
b=ul的padding-left+li.withborder的margin-left=5px+20px=25px
c=li.withborder的border-width=5px
d=li.withborder的padding-left=10px
e=li.withborder的width
f=li.withborder的border-right-width=5px
g=li.withborder的margin-right+ul的padding-right=20px+5px=25px
h=ul的margin-right=15px;
i=ul的margin-top=15px
j=ul的padding-top+li的margin-top=5px+20px=25px;
k=li的padding-top+height[content的高]+li的padding-bottom=20px+height
L=li的margin-bottom和i.withborder的margin-top，取两值大值=20px[塌陷]
m=li.withborder的border-top-width=5px;
n=li.withborder的border-top+height[content的高]+li.withborder的border-bottom=20px+height
o=li.withborder的border-bottom-width=5px
p=li.withborder的margin-bottom+ul的padding-bottom=20px+5px=25px;
q=上边ul的margin-bottom与相邻下边ul的margin-top，取两者较大值=15px
r=ul的padding-top+li的margin-top=5px+20px=25px;
s=li的padding-top+height[content的高]+li的padding-bottom=20px+height
t=li的margin-bottom和i.withborder的margin-top，取两值大值=20px[塌陷]
u=5px
v=li.withborder的border-top+height[content的高]+li.withborder的border-bottom=20px+height
w=5px
x=li.withborder的margin-bottom+ul的padding-bottom=20px+5px=25px;

float浮动

float: left;/*左浮动*/
float: right;/*右浮动*/
/*通过CSS布局，可以实现在HTML不做任何改动的情况下，调换盒子的位置，可以在写HTML的时候，通过CSS确定内容的显示位置，而在HTML中内存的逻辑位置，把内容最重要的放在前面，相对次要的放在后面*/
/*float:left和float:right，即盒子浮动之后，就从标准流中脱离，它原来的位置被兄弟占据*/
/*盒子浮动会影响相邻的p标记的文字受浮动的影响会发生环绕*/
clear: left;/*清除左浮动对它的影响*/
clear: right;/*清除右浮动*/
clear: both;/*清除浮动*/

display标记

display: inline;/*转化成行内元素*/
display: block;/*转化成块级元素*/
display: none;/*隐藏不显示*/
display: inline-block;/*行内块级，保留行内可以并排显示，保留块级可以设置宽、高、margin(一个方向)*/

QQ空间伪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--连接外样式表，rel说明链接的样式表，href后边跟css文件所在地址路径-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--start of top-->
    <div class="top">
        <div id="logo" class="bg">
             <img src="img/logo01.jpeg" alt="logo">
        </div>
        <div id="banner" class="bg">
            banner
        </div>
    </div>
<!--end of top-->

<!--start of nav-->
    <div class="clear"></div>
    <nav class="bg">导航</nav>
<!--end of nav-->

<!--start of wrap,所有栏目区-->
<div class="wrap">
    <!--start of main-->
    <main>
        <!--1-->
        <div class="left-box border">
            栏目一
        </div>
        <!--2-->
        <div class="right-box border">
            栏目二
        </div>
        <div class="clear"></div>
        <!--3、4-->
        <div class="left-box">
            <div class="left border">
                栏目三
            </div>
            <div class="right border">
                栏目四
            </div>
        </div>
        <!--5、6-->
        <div class="right-box">
            <div class="left border">
                栏目五
            </div>
            <div class="right border">
                栏目六
            </div>
        </div>
    </main>
    <!--end of main-->
    <!--start of aside-->
    <aside>
        <div class="bar border">栏目七</div>
        <div class="bar border">栏目八</div>
        <div class="bar border">栏目九</div>
    </aside>
</div>
<div class="clear"></div>
<!--end of wrap，所有栏目区-->

<!--start of footer-->
<footer class="bg">
    版权
</footer>
<!--end of footer-->

</body>
</html>

position标签

 /*固定定位。位置固定在浏览器窗口某个位置，无论滚动条如何拖动，它都不动*/
 /*固定定位有四个属性：left、top、right、bottom。left、right可以确定固定盒子水平方向的位置；top 、bottom固定盒子竖起方向的位置*/
 position: fixed;
 
/*1.相对定位以自己为参照进行移动的；2.相对定位的元素依然占据着原位置。位置的改变依然是：left、right、top、bottom*/
position: relative;
left: 100px;/*距离最左边100px*/
top: -100px;/*距离顶部-100px*/

/*1.绝对对定位以设了“相对定位”的父容器为参考，进行移动的；当它没有父容器时或者容器不定位【不作为】，以body为参考。2.绝对定位元素的不占据原来的空间，绝对定位的位置被它的兄弟占据。位置的改变依然是：left、right、top、bottom*/
/*如果没有相对定位，这样father没有设置相对定位时，father的孩子们，以body作为绝对定位的参考，与父容器没有关系*/
position: absolute;

A标记css样式

<style>
/*当前页面*/
a:active{
background:orange;
color:#666;
}
/*鼠标浮于上方*/
a:hover{
background: skyblue;
color: red;
}
/*访问过的页面*/
a:visited{
background: blue;
color: white;
}
</style>

透明度标签

opacity: 0.4;/*透明会影响所有内容，包括文字和图片*/

文字阴影

text-shadow:1px 2px 2px #000;/*横向偏移量，纵向偏移量，模糊范围，阴影颜色*/

z定位

/*1.z-index只对相对定位和绝对定位起作用 2.z轴越大，越浮于上面，可以为负值可以为正值*/
z-index: -2;
z-index: 999;