CSS学习心得(三)

CSS Margin(外边距)

  • 简写
    margin:100px 50px;
    表示上下边距100px,左右边距50px.

CSS Padding(填充)

  • 简写
    padding:25px 50px;
    同上。

选择器

  • 分组选择器
    h1,h2,p
    {
    color:green;
    }

  • 嵌套选择器

    p
    {
    color:blue;
    text-align:center;
    }
    .marked
    {
    background-color:red;
    }
    .marked p
    {
    color:white;
    }
    

.marked p指 为所有class="marked"元素内的p元素指定一个样式

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。

注意元素是块状的,如果是文字段落则表示的一块而不是一个个字。

CSS Display(显示) 与 Visibility(可见性)

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

  • 隐藏元素 display:none;visibility:hidden
    h1.hidden {visibility:hidden;}
    /visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。/
    ------------------------------------------------------------------------------------
    h1.hidden {display:none;}
    /display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐
    藏了,而且该元素原本占用的空间也会从页面布局中消失。
    /

  • 改变元素显示

    可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定 的方式组合,并仍然遵循web标准

    把列表项显示为内联元素:
    li {display:inline;}

    下面的示例把span元素作为块元素:
    span {display:block;}

CSS Positioning(定位)

  • Fixed 定位
    元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:
    p.pos_fixed
    {
    position:fixed;
    top:30px;
    right:5px;
    }

  • Relative 定位
    相对定位元素的定位是相对其正常位置。

    position:relative;
    left:-20px;
    
  • Absolute定位
    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:

    position:absolute;
    left:100px;
    top:150px;
    /*标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.*/
    
  • 重叠的元素
    z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面).具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    
  • 剪裁元素的外形(clip)
    剪辑一个绝对定位的元素
    position:absolute;
    clip:rect(0px,100px,100px,0px);
    /遵循上右下左顺序/

  • 设置自动溢出处理(overflow)
    overflow:scroll使用滚动条显示溢出内容
    overflow:visible直接显示溢出内容
    overflow:hidden不显示溢出内容

  • 显示光标指定类型(cursor)
    用于改变指针类型

CSS Float(浮动)

  • float
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    /left表示浮动元素会尽可能往左移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
    /
    如果把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻*/

  • 清除浮动clear
    指定不允许元素周围有浮动元素。
    clear:both;

CSS 水平对齐(Horizontal Align)

  • 使用margin属性进行中心对齐
    margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:
    margin:auto;
    width:70%;/*这里貌似要设置宽度不能到100%,否则就和没设置居中一样了

  • 使用position属性设置左,右对齐
    使用绝对定位进行对齐
    position:absolute;
    right:0px;
    width:300px;/同上,也要设置宽度/

  • 使用float属性设置左,右对齐
    float:right;
    width:300px;


使用position个和float时始终设置在DOCTYPE声明中!

CSS 组合选择符

  • 后代选取器(以空格分隔):匹配所有值得元素的后代元素

  • 子元素选择器(以>分隔):子元素选择器(Child selectors)只能选择作为某元素子元素的元素


    I will not be styled.



    /可以,因为是子元素/

    I will not be styled.

    /*不可以,p不是子元素*/
  • 相邻兄弟选择器(以加号分隔):选择紧接在另一元素后的元素,且二者有相同父元素。

  • 普通相邻兄弟选择器(以~分隔):取所有指定元素的相邻兄弟元素。

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器特殊效果的工具。

 selector:pseudo-class {property:value;}
  • anchor伪类
    a:link {color:#FF0000;} /* 未访问的链接 /
    a:visited {color:#00FF00;} /
    已访问的链接 /
    a:hover {color:#FF00FF;} /
    鼠标划过链接 /
    a:active {color:#0000FF;} /
    已选中的链接 */
    注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才有效
    注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才有效

  • CSS - :first - child伪类
    可以使用 :first-child 伪类来选择元素的第一个子元素

  • 匹配作为任何元素的第一个子元素的

    元素:
    p:first-child

  • 选择相匹配的所有

    元素的第一个 元素:
    p > i:first-child

  • 匹配所有作为第一个子元素的

    元素中的所有元素
    p:first-child i

  • CSS - :lang 伪类
    :lang 向带有指定 lang 属性开始的元素添加样式。
    q:lang(no)
    {
    quotes: "~" "~";
    }
    ........

    Some text A quote in a paragraph Some text.

  • CSS-:focus伪类
    input:focus
    {
    background-color:yellow;
    }

做表单时美化输入时可以用到,起到鼠标点进输入框时改变属性(颜色)的作用。

CSS 伪元素

类似伪类

 selector:pseudo-element {property:value;}  
  • first-line和first-letter伪元素
    用于对文本首行和首字母进行设置
    注意:只能够用于块级元素

  • before和after伪元素
    用于在元素内容的前面和后面进行添加内容

CSS导航栏

  • 垂直导航栏
    ul
    {
    list-style-type:none;/去掉列表前的小圆点/
    margin:0;/取消外边距和填充/
    padding:0;
    }
    a:link,a:visited
    {
    display:block;/显示块级元素链接,使得整个区域可以点击而不是单单文本允许只等宽度/
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;/设置块状元素宽度,不设置则会为最大宽度/
    text-align:center;/使文字位于设置宽度的中间/
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }
    ........

  • 水平导航栏
    有两种方法实现水平:inline和float,但如果想要使每一个链接都有相同的大小,就要使用float

  • 使用内嵌的方法
    li
    {
    display:inline;
    }
    具体见使用内嵌的导航栏

  • 使用浮动的方法
    li
    {
    float:left;
    }
    a
    {
    display:block;/显示块元素的链接,让整体变为可点击链接区域(不只是文本),
    它允许我们指定宽度
    /
    width:60px;
    }

CSS下拉菜单

你可能感兴趣的:(CSS学习心得(三))