• css知识点回顾(一)


    (1)css:层叠样式表   css层叠体现在权重和继承  语法规则:选择符{属性:属性值}(属性:属性值也可称为声明);

    (2)css的引入方式:内部、外部、内联;

    (3)link和@import的区别

      1、从本质上讲,link是HTML的一种形式,而@import是css的引入方式;

      2、从兼容上讲:link没兼容,@import低版本不兼容(IE5以下);

      3、加载顺序上:link随着页面结构一起加载,@import是等页面结构加载完以后再加载;

    (4)关于权重

      内联样式的权重是1000;

      元素选择器的权重是0001;

           继承样式的权重是0;

      class选择器的权重是0010;

      包含选择器的权重是所有选择器权重之和;

      id选择器的权重是0100;

      通配符的权重是0;

      important的权重为1000;

      伪类选择器的权重是0010;

    (5)伪类选择器

      a:link{属性:属性值}超链接的初始状态;

      a:visited{属性:属性值}超链接被访问后的状态;

      a:hover{属性:属性值}鼠标滑过链接时的状态;

      a:active{属性:属性值}超链接被激活时的状态,即鼠标按下时超链接的状态;

    四个都需要写的时候必须按顺序写,;hover可以给div,p,strong,b。。。。加,但link、visited、active只能给a加

    (6)浮动  float:none/left/right

    浮动的目的:让竖着的东西横着

      1、如果是文本和盒子的话,盒子浮动,文字环绕盒子显示;

      2、如果是两个竖着排的盒子

        a、第一个盒子float:left,后面的盒子没有浮动,那么后面的盒子会顶上去;

        b、第一个盒子float:right,后面的盒子没有浮动,那么该盒子靠右显示,后面的盒子会顶上去;

        c、第一个盒子float:left;第二个盒子float:left,第二个盒子跟在第一个盒子后面,从左往右排列;

        d、第一个盒子float:left,第二个盒子float:right,两个盒子一左一右显示;

      3、浮动会导致高度塌陷:子元素浮动了,父元素没有高度的时候,父元素会高度塌陷;

    (7)css文本相关属性

      1、文本大小(font-size)

        a、属性值为数值时,必须给属性值加单位,0除外;

        b、单位可以是pt,em,9pt=12px,1em=16px 0.75em=12px;

        c、16px为默认字体大小;

        d、使用绝对大小关键字 xx-small=9px,x-small=10px,small=13px,medium=16px,large=18px,x-large=24px,xx-large=32px;

      2、文本颜色(color:颜色值)color:red    color:#fff   color:rgb(0,0,0)

      3、文本字体(font-family)是中文字体的时候需要加引号,有空格的时候也要加;

      4、文本加粗(font-weight)font-weight:bold(加粗)/normal(常规)/bolder(更粗);

      5、文本倾斜(font-style)font-style:italic/oblique/noraml;

      6、水平对齐方式(text-align)text-align:center/left/right/justify(两端对齐);

      7、行高(line-height)  单行文本如果line-height=height的话,文字是垂直居中的;

      8、文字font属性简写  font:font-style  font-weight  font-size/line-height font-family    必须按顺序写;

      9、文本修饰(text-decoration)text-decoration:none/underline(下划线)/overline(上划线)/line-through(删除线);

      10、首行缩进(text-indent)text-indent:value     value可以取负值  text-indent属性只对第一行起作用;

      11、字间距(letter-spacing)letter-spacing:value    控制文字与文字之间的间距

    (8)css列表相关属性

      1、定义列表符号样式   list-style-type:disc/circle/square/none

      list-style-type:none=list-style:none

      2、使用图片作为列表符号 list-style-image:url(路径);

      3、定义列表符号的位置  list-style-position:outside/inside;

    (9)css背景相关属性

      1、背景颜色(background-color:颜色值);

      2、背景图片的设置(background-image:url(背景图片路径));

      3、背景图片的平铺属性(background-repeat)background-repeat:no-repeat/repeat/repeat-x(横向平铺)/repeat-y(纵向平铺);

      4、背景图片的定位(background-position)background-position:left/center/right/数值    top/bottom/center/数值;第一个值表示水平方向上的位置,第二个值表示垂直方向上的位置;

      5、background的简写(background)如background:url(路径)   no-repaet  center  top    #fff;

      6、背景固定(background-attachment)background-attachment:fixed     只是固定在盒子范围内

      7、背景图大小(background-size)background-size:100% 100%/cover/contain   cover:背景图全部显示在容器内,并保证图片不失真,但是有可能背景图的有一小部分看不到

      8、空余空间(white-space单行文本溢出)white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit

      overflow:hidden;(超出隐藏) text-overflow:ellipsis(显示省略号)三个属性加起来可以做单行文本溢出;

    (10)元素类型转换

      display:block/inline/inline-block/none/list-item/table-header-group/table-footer-group

        1、block:块状显示,就是让元素竖着显示

        2、inline:行内显示,就是让元素横着显示

        3、当元素设置了float属性后,就相当于有了块元素的特征

        4、inline-block:行内块元素显示(vertical-align(只对行内块元素适用,用的时候父元素需要设置行高,图片不能加display):top/bottom/middle/baseline/text-top/text-bottom)

    (10)position:absolute/relative/fixed

      1、position;absolute;绝对定位

        a、会飘起来,脱离文档流

        b、偏移位置相对于浏览器窗口来说(前提是没有父元素或者父元素没有定位),如果存在父元素并且有定位,子元素的偏移位置是相对于父元素来说;

        c、多个并列的元素同时有定位的时候,后面的元素会盖在前面元素上;

        d、z-index改变定位元素的层叠顺序,z-index不带单位;

      2、position;relative;相对定位

        a、不会脱离文档流

        b、偏移位置是相对于元素本身的位置

        c、包含块:该元素是父元素,有相对定位

      3、position:fixed;固定定位    ie6不支持 会脱离文档流

    (11)透明度写法

      1、IE浏览器写法:filter:alpha(opacity=value)value的取值范围是0-100

      2、其他:opacity:0.value;value的取值范围是0-1;

    (12)改变指针样式:cursor:pointer/help/move/wait

    (13)最小高度兼容写法

      1、min-height:value;_height:value;

      2、min-height:value;height:auto !important;height:value;(使用这种方法顺序不能变)

       

  • 相关阅读:
    本地运行FlashPlayer怎么样才能访问本地文件
    html em和px的关系
    css display 的用法
    关于css中div的定位(绝对定位和相对定位)(转载)
    html id同name的区别
    免费软件 认出图像文件中文字的利器
    js鼠标滑过弹出层的定位bug解决办法(转)
    开始看struts2
    NYOJ 106(背包)
    HDOJ 1012
  • 原文地址:https://www.cnblogs.com/niuxiaoxian/p/8428431.html
Copyright © 2020-2023  润新知