前端学习(三）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>