zoukankan      html  css  js  c++  java
  • 前端学习(三)css选择器(笔记)

    字体样式:
        color:red;
        font-size:12px;
        font-weight:bold/normal;
        font-style:italic/normal;
        font-family:""

    文本样式:
        text-indent:2em;
        text-decoration:none/line-through/underline/overline;
        text-align:left/center/right;
        line-height:200px;

    其他的样式:
        width:100px;
        height:100px;
        border:1px solid/dotted/dashed red;

        background-image:url(图片路径);
        background-repeat:no-repeat;
        background-position:10px 10px;
        background-color:red;

        background:url(图片路径) no-repeat 10px 10px red;    

    ===================================================

    继承:
        1.只和文字相关
        2.子级继承父级的字体样式


        注意:
            有默认样式的标签不继承父级的该默认样式

            有color默认样式的a不继承父级的color样式

            ----如果非要修改a的默认样式,就在我a本身上添加修改!

    ===============================================
    html注释:
        
        <!-- 被注释的内容 -->

    css注释:
        /* 样式内容  */

    --------------------------------------------
    提取行间样式:
        就是把行间样式写成内联样式

        行间:在标签里面写属性style

        内联:在head标签里面写一个标签<style>


    选择器:
        
        标签选择器 p

        类选择器 class=“p1”    .p1

            注意:
                1.一个标签可以有多个class
                2.所有的标签的class名可以重复


        id选择器 id=“pp1”      #pp1
            ---独一无二!
            注意:
                1.一个标签只能有一个id名
                2.所有的标签的id名不能重复
                3.最好不要用id选择器来书写样式
                4.id是留给js来获取写特效的

    优先级:
        id >  class  >  标签



    这些选择器可以混合使用!
    嵌套选择器:
    .p1 span{}


    <人></人>
    <人 class="张三"></人>
    <人></人>
    <人 class="张三"></人>
    <人></人>
    <人 class="张三" id="142034503243409"></人>

    群组选择器:
        .p1 div,p{ color:red;}

        前提是div和p的样式是一样的!!!

    -------------------------------------------------

    伪类选择器: 写法:div:XXX
        .p1:hover{}
        #p1:hover{}
        a 全部兼容

        a:link{ color:yellow;}--未访问之前    
        a:hover{ color:red;}----鼠标移入时
        a:active{ color:green;}---点击时
        a:visited{ color:#000;}---访问之后

    注意:
        页面上面可以点击的文字变色用的就是a:hover

    W3C规范:lv ha

    a:link{ color:yellow;}--未访问之前    
    a:visited{ color:#000;}---访问之后
    a:hover{ color:red;}----鼠标移入时
    a:active{ color:green;}---点击时

    ================================================

    优先级:
        id >  class  >  标签
        100   10       1

    嵌套选择器:
    #p1{}
    100

    .p1 span{}
    10+1=11

    #box .p1 span{}
    100+10+1=111


    新的优先级:

        行间样式    id  class 标签  默认样式  

        *(通配符-指代所有标签)


        行间样式 > id >  class  >  标签 > *  > 默认样式  
     
    ===================================================

    认知一下所学过的标签:


    标签类型    
        块标签(元素):
        div p h
        特性:
            1.独占一行
            2.支持设置宽高
            3.不受空格影响

        行内标签(元素):
        span b i em strong a    
        特性:
            1.共处一行
            2.不支持设置宽高
            3.受空格影响


    包含关系:
        1.块标签可以包所有标签!
            注意:
                1.div可以包含自己
                2.p不能包含块标签

        2.行内标签只能包行内元素!
            注意:
                a标签可以包含所有标签!

    ------------------------------

    行内和块可以互换!

        display:block; --可以把行内变成块!
        display:inline;---可以把块变成行内!

    注意:
        通过转换以后的标签不会改变:包含关系!

    ===================================================

    第三种类型:
        行内块!display:inline-block;
            (包含行内特性还有块特性)
            1.可以设置宽高
            2.可以共处一行
            3.受空格影响

            img与身巨来就是这样的类型

    在页面中只要有块元素排在一行,我不建议你用行内快!
        
        (浮动!)

    ==================================================

     cursor:pointer;---可以把鼠标模拟手型


    ===========================================

    新标签:
        
        组合使用!

    无序列表:
    <ul>
        <li></li>
    </ul>

    注意:
        1.ul和li都是块标签
        2.ul里面只可以放li
        3.li的最近父级只可以是ul
        4.li可以放任何标签
        5.默认每一个li前面有个小圆点(默认样式)
            ---取消默认:list-style:none;


    有序列表:
        <ol>
            <li></li>
        </ol>

  • 相关阅读:
    java 9+版本中,接口的内容总结
    发红包的案例
    java中成员变量和局部变量的区别
    分别使用面向对象和面向过程两个不同的思路编写代码,打印输出一个数组,输出数组的格式:“[10,20,30,40,50]”
    题目要求:不能使用新数组,就用原来的唯一的数组进行反转
    request.getRequestDispatcher()和response.sendRedirect()区别
    Maven是什么
    字符串中的各种方法
    数组中的各种方法
    字符串的模式匹配方法-match-search-repalce
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579162.html
Copyright © 2011-2022 走看看