zoukankan      html  css  js  c++  java
  • CSS 学习笔记

    CSS 基础太差了,今天有空学习一下 CSS 知识。


    下面这篇文章介绍了些很基本也很常用的 Html 标签,比较不常用的有 ol 和 dl

    根本不存在 DIV + CSS 布局这回事

    选择符

    类选择符,.className{....}
    ID选择符,#idName{....}
    后代选择符,parent child{....}
    子选择符,parent > child{....}(IE6 不兼容),注:子选择符意味着只有当一个元素是父元素的直接子代时,该元素才会被样式化。
    通配选择符,*{....},作用:在该选择符中设定的属性会应用于所有元素。
    相邻选择符,XXX + XXX{....}(IE6 不兼容)
    属性选择符,XXX[attrName]{....} && XXX[attrName=value] && XXX[attrName~=value] && XXX[attrName|=value]
    伪类,作用:有时您可能想为一些不基于名称、性质或内容的元素添加样式,这时伪类就派上用场了。
          XXX:link{} && XXX:link{} && XXX:visited{} && XXX:hover{} && XXX:active{} && XXX:first-child{} && XXX:focus{} && XXX:lang{}
    伪元素,伪元素包括:first-letter、:first-line、:before和:after。PS: 不是很明白,这个元素的用法,暂时记录下来,以后遇到该元素再好好体会。

    参考文档:http://book.csdn.net/bookfiles/525/10052517791.shtmlhttp://www.w3.org/TR/CSS21/selector.html


    CSS属性

    CSS有很多属性,下面这个网址可以查到各个属性的作用。
    http://www.w3.org/TR/CSS21/propidx.html


    盒模型
    margin(外边距)、border(边框)及padding(内边距)
    这部分我在之前基本上都算比较理解,所有没有记录下什么内容。
    但记录两个网址,以作参考:
    http://book.csdn.net/bookfiles/525/10052517794.shtml
    http://www.w3.org/TR/CSS21/box.html 

    CSS 定位 


    CSS 定位属性

    CSS 定位属性允许你对元素进行定位。

    属性 描述
    position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
    bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
    left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    overflow 设置当元素的内容溢出其区域时发生的事情。
    clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
    vertical-align 设置元素的垂直对齐方式。
    z-index 设置元素的堆叠顺序。

    CSS position 属性
    通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
    position 的属性值有 static、relative、absolute、fixed
     

    通过下面这个例子好好理解一下 position:relative 相对定位


     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 <style>
     7 #container3 {
     8     float:left;
     9     /*100%;*/
    10     /*没有必要的代码被注释掉!*/
    11     background:green;
    12 }
    13 #container2 {
    14     float:left;
    15     /*100%;*/
    16     /*没有必要的代码被注释掉!*/
    17     background:yellow;
    18     position:relative;
    19     right:30%;
    20 }
    21 #container1 {
    22     float:left;
    23     100%;
    24     background:red;
    25     position:relative;
    26     right:40%;
    27 }
    28 #col1 {
    29     float:left;
    30     30%;
    31 }
    32 #col2 {
    33     float:left;
    34     40%;
    35 }
    36 #col3 {
    37     float:left;
    38     30%;
    39 }
    40 </style>
    41 </head>
    42 
    43 <body>
    44 <div id="container3">
    45     <div id="container2">
    46         <div id="container1">
    47             <div id="col1">Column 1</div>
    48             <div id="col2">Column 2</div>
    49             <div id="col3">Column 3</div>
    50         </div>
    51     </div>
    52 </div>
    53 </body>
    54 </html>
    55 



          提示:您可以先修改部分代码再运行
  • 相关阅读:
    C++学习总结 复习篇2
    C++ 学习总结 复习篇
    Git 安装与使用
    前两周工作总结
    [bzoj1033] [ZJOI2008]杀蚂蚁antbuster
    [bzoj1031] [JSOI2007]字符加密Cipher
    [bzoj1030] [JSOI2007]文本生成器
    [bzoj1029] [JSOI2007]建筑抢修
    [bzoj1028] [JSOI2007]麻将
    [bzoj1026] [SCOI2009]windy数
  • 原文地址:https://www.cnblogs.com/chy1000/p/1790268.html
Copyright © 2011-2022 走看看