CSS权重及常用方法

 

 

CSS(层叠样式表:Cascading Style Sheets):对网页样式的编写

引入CSS

   1. 行间样式:<div style = ""></div>

    2.页面级css:<head><style type="text/css"></style> </head>

    3.外部css文件:<head><link rel="stylesheet" type="text/css" href ="xx.css"></head>

选择器:

    选择器的优先级:

          即:  CSS权重(由高至低):

                                                        !important                        Infinity

                                                        行间样式                               1000

                                                        id                                          100

                                                        class/属性/伪类                     10

                                                        标签/伪元素                            1

                                                        通配符(*)                             0

            进制为256进制(IE7.0测试数据)

            当权重相同时后面覆盖前面

css中的注释: /*  */

文本:

    font-size:字体大小(正常默认值为16px,常用值为12px)

    font-weight:字体加粗(lighter,normal,bold,bolder)

                                    (数值法:100,200,300,...,900)

    font-family:字体(常用值:arial)

    color:字体颜色(1.纯英文 2.颜色代码 3.颜色函数)

    transparent: 透明色

    text-align:文本对齐方式:left(左对齐),

                                             center(居中),

                                                    right(右对齐),

                                                    justify(两端对齐),

                                                    inherit(继承父元素)

    line-height:单行文本行高,默认值(normal)

    单行文本水平垂直居中时:text-align:center;

                                             line-height=容器高度;

 

    text-indent:缩进(单位通常用:em)

    text-decoration:文本修饰: none(常用的标准文本),

                                                 underline(下划线),

                                                        overline(上划线),

                                                        line-through(中划线),

                                                        blink(闪烁文本)

    text-overflow:ellipsis溢出文字以。。。展示

    overflow:1.visible(默认值)

                   *  2.hidden 溢出隐藏

                       3.scroll 内容会被修减,但浏览器会显示滚动条以便查看

                       4.auto 内容如果被修减,但浏览器会显示滚动条以便查看

    

    cursor:光标移入后的样式:default(默认),

                                               pointer(常用,一只手)

                                                     help(问好)

伪类选择器:    

    :hover:改变鼠标移入后的样式

    :link:未访问的

    :visited 已访问的

 

标签类别:

    1.行级元素:内容决定元素所占位置。特征:不可以通过css改变宽高。{span, strong, em, a, del,...}

    2.块级元素:独占一行。 特征:可以通过css改变宽高。{div, p, ul, li, ol, form, ...}

    3.行级块元素:内容决定大小。特点:可通过css改变宽高。{img ...}

*(凡是带有inline的元素都带有文字特性)

改变标签类别:

    display:1.inline 行级元素

                    2. block 块级元素

                    3.inline-block 行级块元素

 

盒子模型:       

 

  • 外边距 margin,
  • 盒子壁 border,
  • 内边距 padding,
  • 盒子内容  width+height
  • 元素 element

盒子总大小:margin + border + padding + (content = width + height);     

 

定位:在定位后可用left, right, top, bottom进行位置改动

    position:  1.static(默认值)

                       2.relative(相对于正常位置新型定位,保留原有位置)

                       3.absolute(相对于上一个有定位的元素进行定位,不保留原有位置)

                       4.fixed(相对于浏览器窗口进行定位)

浮动:

    float:left/right

    浮动元素产生了浮动流

伪元素: 

    主要可用于清除浮动流(clear:both)

   应用于css : 元素名::before

                        元素名::after

   伪元素内参数:content:“”输出文本

伪元素清除浮动:  ::after{  content:“”; clear:both; display:inline-block;

 

 

    

    

         

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值