CSS层叠样式表

  CSS

            层叠样式表   cascading style sheets

            语法：选择器{属性:属性值;属性:属性值;属性:属性值;}

            特点:

                1、分为两部分,分别是选择器和  { }（声明部分）

                2、属性和属性值用冒号连接

                3、属性和属性之间用分号隔开

            例如:

                罗聪{性别:男;年龄:20岁;身高:185cm;}

            选择器:给谁添加样式谁就是选择器(查找到页面元素的一种方式)

  CSS的使用方式:

                1、行内样式

                    语法:<p style=“width:100px;height:100px;”>文本内容</p>

                    弊端:导致页面看起来过于臃肿,代码比较多

                2、内部样式(在做案例或者小demo时使用)

                    语法:

                        <style>

                            样式

                        </style>

                    通常style标签放在head标签里面,title标签下面

                    弊端：内部标签过多时,页面会产生滚动条,需要来回拖拽滚动条书写样式,不方便,没有做到样式与结构的完全分离

                3、外部样式表(实际开发中使用)

                    语法:

                        HTML:使用link标签引入外部CSS文件

                            <link rel="stylesheet" href="路径">

                        在外部css文件夹中新建css文件

                        注意:文件夹后缀名不要写错了（.css）

                    优点:做到了结构与样式的完全分离

 补充：外部样式表的引入

            方法一：link标签     引入   （开发中常用link）

            方法二：@import     导入

            区别：

                1、link是标签

                    @import是方法，css提供的方法

                2、兼容上区别

                    link没有兼容问题

                    @import在IE低版本浏览器上不兼容（现在不存在了）

                3、加载顺序区别

                    link标签引入css，浏览器同时加载HTML与CSS

                    @import倒入css，浏览器先加载HTML，等HTML加载完成，再开始渲染CSS，可能存在页面当前几秒错乱的情况，

                    用户体验不佳

                4、JS操作DOM的区别

                    link引入的css，js能动态更改标签样式

                    @import导入的css，js不能动态更改标签样式

样式表优先级:

                同时使用多个样式表,修饰同一个标签

                    行内样式 VS   内部样式      行内样式生效

                    内部样式 VS   外部样式      内部样式生效

                    行内样式  VS  外部样式      行内样式生效

                样式表优先级:

                    !important>行内样式>内部样式>外部样式(前提外部引入的样式放在内部样式表前面)

                    注意:!important应用在属性后面,分号前面

                    遵循就近原则

                    样式表中,相同属性会被覆盖(优先级高的样式表中属性会生效),不同属性会保留

            常用选择器:

                1、标签选择器

                    <p>文本内容</p>

                    CSS中 :

                    用标签的名字来当选择器

                    p{样式}

                2、类选择器(class选择器)

                    语法:

                        HTML:

                            <p class="p1"></p>

                        CSS:

                            .p1{样式}

                    特点：1）多个标签可以共用同一个类名（class名）

                               2）一个标签可以有多个类名,不同类名之间用空格隔开

  3、id选择器

                语法：

                    HTML：

                        <div id="content"></div>

                    CSS：

                        #content{样式}

                注意：id名具有唯一性，一个id名只能出现一次，一个标签只能有一个id名

            4、通配符选择器

                语法：*

                表示匹配到页面中所有的标签

                通常写法：

                    *{

                        margin:0;-----------外边距为0

                        padding:0;----------内边距为0

                    }

选择器的权重：

                一个标签同时使用多个选择器,选择器的权重：

                    标签选择器  VS   class选择器     class选择器生效

                    class选择器  VS id选择器         id选择器生效

                    标签选择器   VS  id选择器         id选择器生效

                    ！important>行内样式>id选择器>class选择器>标签选择器>通配符选择器

                   

                    通配符选择器权重：0  (0000)

                    标签选择器权重：1  (0001)

                    class选择器权重：10   (0010)

                    id选择器权重：100   (0100)

                    行内样式权重：1000

                    相同属性被覆盖（生效的是权重大的选择器中的样式），不同属性保留

            5、群组选择器

                多个选择器共用一组样式

                语法：选择器1,选择器2,选择器3{样式}

            6、关系选择器（包含关系选择器）

                1）父子关系选择器

                    符号：>

                2)后代关系选择器

                    符号：空格

                包含关系选择器的权重是可以进行相加的

            7、伪类选择器（主要应用在超链接上面）

                a:link-------访问前

                a:visited------访问后

                a:hover--------鼠标滑过-------(实际开发中常用)

                a:active-------鼠标激活瞬间