zoukankan      html  css  js  c++  java
  • CSS与DIV的一些基础知识(1)

      最近突然想学习CSS+DIV了,因为一直在用FLEX开发,以前那些ASP.NET的东西忘的都差不多了。记得当年还是用Table开发的网站呢,呵呵好久了,最近想捡回ASP.NET,所以我从头开始,最先从css+div下手,希望自己能坚持下来吧

    一.DIV+CSS布局:就好比人穿衣服,div控制页面的布局,在这里它就是一个人,而css是一种表现,就好比衣服一样,对这个人进行修饰

    二.W3C标准:W3C是World Wide Web Consortium的缩写,中文就是万维网联盟,它不是一个标准,而是一些列标准的集合-结构标准(xHtml),表现标准(css),动作标准(JS)

    三. Css代码写在哪里,如何控制的,它的四种样式:

          1. 行内样式:就是css代码直接写在标签内,如

     <p style="color:Black;background:#ccc;font-size:larger" title="123" >这是行内样式</p>
    

         2. 内嵌样式:就是整个css代码写在head标签内

         3. 链接样式:css写在一个外部文件中,在head标签内用link连接到此文件,大多数情况使用这种样式

     <link href="Styletest03.css" rel="stylesheet" type="text/css" />
    

          4. 导入样式:与连接样式很像,又与区别(不常用)注:一般情况使用第三种链接样式

    二.Css选择器

          1.标签选择器,控制所有对应标签的

          2.id选择器,’#’

          3.类选择器,’.’

          4.通用选择器,’*’

    p
    {
    /*这是标签选择器,针对所有P标签都应用此样式*/
    color
    :White;
    background-color
    :Red;
    font-size
    :12px;
    }

    #one
    {
    /*这就是id选择器,只为对应id是one的标签进行样式表现,注意使用#号*/
    color
    :Green;
    background-color
    :White;
    font-size
    :20px;
    }

    .classOne
    {
    /*这是类选择器,所有标签class=classOne的标签都具有此属性,并且,一个标签可以有多个类选择器的值,中间用空格分开*/
    color
    :White;
    Background-color
    :Blue;
    font-size
    :15px;
    }

    *
    {
    /*这是通用选择器,对html页面中的所有标签都应用样式,用*号标注*/
    margin
    :5;
    padding
    :0;
    }

    三.Css两种优化方式

          1.选择器的集体声明

    body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

          2.选择器的嵌套声明

    #div1 p a{color:red;}/*意思是在ID为div1内癿p标签内癿链接a标签癿文字

    四.Css选择器的命名 常用的有三种命名法

          1. 骆驼命名:第一个单词小写,从第二个单词开始,首字母大写,如:headerBlock

          2. 帕斯卡命名:每个单词的首字母都大写,如:HeaderBlock

          3. 匈牙利命名:就是在前面加前缀,使名称容易理解,如:head_navigation

      五.盒子模型:(content,border,padding,margin)

       Css中的盒子模型和现实中的盒子一样 content(内容):表示盒子中放物品的区域空间 border(边框):就是盒子的边框 padding(内边距):就是盒中物品与盒子之间的距离(因为放在盒子中的东西不可能完全和盒子大小一样,那样也放不进去吧) margin(外边距):假如存在多个盒子,盒子和盒子之间的边距就是这个

      六.Css元素

         1.内联元素 可同行,宽度高度无效 ,比如p

         2.块状元素:不可同行,宽度高度有效,比如div

     以上为一些最基础的知识,我是看-2天驾驭DIV+CSS(全新发布2.0.2版本)这本教材学的呵呵

  • 相关阅读:
    摄影初识之一
    Photoshop CS6的安装
    chcon可实现对文件的SEAndroid安全标签的修改
    ubuntu启动失败the system is running in low graphics mode
    将ubuntu14.04设置为文本模式启动?
    Android数据库之SQLite数据库
    系统崩溃分析
    Oops 的栈信息分析
    android framework 之JNI
    SecureCRT语法高亮设置
  • 原文地址:https://www.cnblogs.com/80hou/p/2030380.html
Copyright © 2011-2022 走看看