前端学习全过程记录日志（二）css篇（一）

一、使用css来修改样式的三种方式：行内样式，内部样式表，外部样式表（最佳）

例：行内样式：<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

       内部样式表：

p{

            color: red;

            font-size: 60px;

        }

外部样式表： 外部写css文件，连接方式如：<link rel="stylesheet" href="./style.css">

二、选择器

常用选择器：元素选择器：标签名选定、id选择器：#id名（id必须是唯一的）、类选择器：.类名（类名可有多个，如： <h1 class="blue abc">我是标题</h1>）、通配选择器：*

复合选择器：交集选择器选中符合多个条件的，格式为：选择器1选择器2，并集选择器同时选择多个选择器对应的元素，格式为：选择器1，选择器2

关系选择器：子元素选择器：父元素>子元素

                      后代元素选择器：祖先 后代

                      下一个兄弟：前一个+后一个

                      选择下面所有兄弟：兄~弟

属性选择器：

            [属性名] 选择含有指定属性的元素

            [属性名=属性值] 选择含有指定属性和属性值的元素

            [属性名^=属性值] 选择属性值以指定值开头的元素

            [属性名$=属性值] 选择属性值以指定值结尾的元素

            [属性名*=属性值] 选择属性值中含有某值的元素的元素

伪类选择器：

                :first-child 第一个子元素

                :last-child 最后一个子元素

                :nth-child() 选中第n个子元素

                    特殊值：

                        n 第n个 n的范围0到正无穷

                        2n 或 even 表示选中偶数位的元素

                        2n+1 或 odd 表示选中奇数位的元素

                    - 以上这些伪类都是根据所有的子元素进行排序

                :first-of-type

                :last-of-type

                :nth-of-type()

                    - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

            - :not() 否定伪类

                - 将符合条件的元素从选择器中去除

a元素的伪类：   ：link未访问过的链接、：visited已访问过的链接、：hover鼠标移入时、：active鼠标点击时

伪元素选择器：

                ::first-letter 表示第一个字母

                ::first-line 表示第一行

                ::selection 表示选中的内容

                ::before 元素的开始 

                ::after 元素的最后

                    - before 和 after 必须结合content属性来使用，如：

div::before{
            content: 'abc';
            color: red;
        }

小tips：样式继承除开背景布局相关 

选择器权重问题：

                内联样式        1,0,0,0

                id选择器        0,1,0,0

                类和伪类选择器   0,0,1,0

                元素选择器       0,0,0,1

                通配选择器       0,0,0,0

                继承的样式       没有优先级

比较优先级时可累加不可越级

单位及颜色问题懂得都懂。

好，今天日志完成，今天也是划水的一天，啊啊啊振作起来年轻人！！！