css+Div


1.css:(Cascading style sheet)
    使用css的原因:
    css能够实现内容与样式的分离。但是不容易在界面中维护,调整高度    等难度系数比表格大。
    css后期维护,改变背景颜色,字体颜色等比较方便。
    css精确的控制,实现精美 ,复杂的页面。
    主要功能:美化网页,实现网页的布局,图片等的定位。(排版与风格设计 简化的web开发)
2.使用css基本格式:
      <head>
       <style>
         选择器 {对象的属性:属性值}
       </style>
       </head>
       选择器:就是所要修饰的对象;
3.标签的类型:
     标签选择器:就是容器的名字  如<p>(直接写p{;;;})就可以了。
     类选择器:需要有.在修饰对象的前面。  如<p class="text">   .text{;;;;}
     ID选择器:需要#在修饰对象的前面。    如<div id="text">    #text{;;;;}
4.三种选择器的区别:
     标签选择器:如果在body出现标签,全都修饰。
     类选择器:主要有class标示。有class的地方就会被修饰。
     ID选择器:ID选择器是唯一的,只能用一次。     
5.选择器的优先级:ID选择器>类选择器>标签选择器
6. 标签css示例
     <html>
     <head>
     <style>
            p{font-size:12px; color:#FFF;}
     </style>
     </head>

      <body>
         <p>这是例子!</p>
     </body>
      </html>
7.类标签示例:
          <html>
          <head>
     <style>
            .text{font-size:12px; color:#FFF;}
     </style>
     </head>

      <body>
         <p class="text">这是例子!</p>
     </body>
      </html>
8.ID选择器:
         <html>
         <head>
     <style>
            #text{font-size:12px; color:#FFF;}
     </style>
     </head>

      <body>
         <p id="text">这是例子!</p>
     </body>
      </html>
9.文本重要的属性:
     字体、字号:
font(缩写形式)
     
font-weight(粗细)
     
font-size(大小)
     
font-family(字体)  
     ine-height (行高)
     
text-align (对齐)
     
letter-spacing (字符间距)
     
text-decoration (文本修饰 )
     
white-space (空白处理 )
     p元素中文字之间、span元素之间度没有空白。
10.背景属性:
     background (缩写形式)  可以连续写属性值。
     
background-color(背景色 )  
     
background-image(背景图 )
     
background-repeat(背景图重复方式 ) repeat-x水平方向平铺   repeat-y 垂直方向平铺   no-repeat不平铺(一张)repeat两个方向平铺
     
background-position(位置坐标、偏移量)  x y;两个方向的偏移   0px -npx  向上偏移n个像素。   
     偏移的用处:主要实现一张图片取各个部位显示。主要用在导航条的制作等。
11.列表(li)常用属性.
     list-style :有5个属性 none 无风格  disc实心圆 circle空心圆 square 实心正方体 decimal 数字
     制作导航的时候主要用none.
12.用
<ul>
    <li> </li>
    <li> </li>
</ul>制作导航条因为是块标签,分别处在不同的行中,需要把li里面的内容放在一行中 ,这就需要float浮动属性来完成。
     float:left;向左浮动
     float:right;向右浮动
     float:both;两边
这就实现了导航条那样的内容。注意150px  间距  (购物车  加入收藏)
13.文字下面有下划线:text-decoration:underline;
14.盒子模型
   盒子模型就是把网页中的所有元素看做是一耳光盒子。
   盒子模型主要属性: margin外边界   padding内边界  border边框
   盒子模型的层次:margin bacground-color  background-image  padding     content    border
15.盒子模型的属性值设置形式:
    margin:上 右 下 左    两个值就是上下一致  左右一致    一个值就是 四个一致  要一个值就是margin-left:px;这种形式。
     padding:类似。
16.border的属性值:border-color 边框颜色

                   border-width 边框宽度
                   
border-style

  线条的形式(点  虚线  实现等)
17.元素的实际占位(实际宽、高)   根据浏览器的不同  计算不同。
18.div实现布局 margin:0px auto;居中。 需要float等来辅助。



补充:
1.  *{
        background-color:white;
      }
     通用选择符,它选择页面中所有的元素。
     组选择:把样式一样的写在一起。
2.用id还是class的选择
     id是唯一的,class不唯一,当需要给页面某个单独的元素指定样式时,就该使用id。需要给一组元素指定样式时,class选择符是首选。

3.letter-spacing字母间距

原文地址:https://www.cnblogs.com/danwuxinbolg/p/3728408.html