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版本)这本教材学的呵呵

  • 相关阅读:
    Leetcode Plus One
    Leetcode Swap Nodes in Pairs
    Leetcode Remove Nth Node From End of List
    leetcode Remove Duplicates from Sorted Array
    leetcode Remove Element
    leetcode Container With Most Water
    leetcode String to Integer (atoi)
    leetcode Palindrome Number
    leetcode Roman to Integer
    leetcode ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/80hou/p/2030380.html
Copyright © 2011-2022 走看看