zoukankan      html  css  js  c++  java
  • 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字母间距

  • 相关阅读:
    KALI LINUX 工具大全---jd-gui(爪哇反编译器-图形界面)
    KAL1 LINUX 官方文档之政策---Kali Linux更新政策
    KAL1 LINUX 官方文档之政策---Kali Linux用户政策
    KAL1 LINUX 官方文档之社区---Kali Linux官方网站
    KAL1 LINUX 官方文档之社区---为kali做贡献
    KAL1 LINUX 官方文档之社区---官方Kali Linux镜像
    KAL1 LINUX 官方文档之kali开发---自定义 Beaglebone Black 镜像
    KAL1 LINUX 官方文档之kali开发---ARM交叉编译
    KAL1 LINUX 官方文档之kali开发---实时构建自定义的Kali ISO
    KAL1 LINUX 官方文档之kali开发---生成 更新的Kali ISO
  • 原文地址:https://www.cnblogs.com/danwuxin/p/3655357.html
Copyright © 2011-2022 走看看