首页 > 编程知识 正文

css中权重,css3权重

时间:2023-05-05 21:18:38 阅读:234703 作者:1364

 

 

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五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。