CSS样式表笔记

2019.8.1  CSS样式表学习笔记

一、css的简介

1、什么是css？

css就是层叠样式表，css是对html进行样式修饰语言（层叠就是层层叠加，如果不同的css样式对同一html标签就行修饰，样式有冲突的部分应用优先级高的 id>class>元素，不冲突的部分共同作用。样式表就是css属性样式的集合。

2、css的作用

（1）修饰thml，使其html样式更加好看

（2）提高样式代码的复用性

（3）html的内容与样式相分离，便于后期维护

3、css的引入方式和书写规范

（1）内嵌样式（不建议使用）

内嵌样式是把css的代码嵌入到html标签中

例：

你好啊，css

语法：

    （1）使用style属性将样式嵌入到html标签中

    （2）属性的写法：属性：属性值

    （3）多个属性之间用分号隔开嗷

（2）内部样式

在head标签中使用style标签进行css的引入

例：

语法：

    （1）使用style标签进行css的引入（属性：type：告知浏览器使用css解析器进行解析）

    （2）属性的写法：属性：属性值

    （3）多个属性之间使用分号隔开

（3）外部样式

将css样式抽取成一个单独css文件为html所引用

例：

语法：

    （1）创建css文件将css属性写在css文件中

    （2）在head标签中进行引入

       例：
                    rel:代表要引入的文件与html的关系
                    type：告知浏览器使用css解析器去解析
                    href：css文件地址

    （3）属性的写法：属性：属性值

    （4）多个属性之间使用分号隔开

（4）import方式

例：

    link与@import方式的区别：
                (1)link所有浏览器都支持 import部分低版本IE不支持
                (2)import方式是等待html加载完毕之后在加载
                (3)import方式不支持js的动态修改

所以还是使用外部和内部样式比较好

二、css选择器

1、基本选择器

    （1）元素选择器

                 语法：html标签名{css属性}

                 例：hello css!!!

                       

    （2）id选择器     id要确保唯一

                语法：#id{css属性}  

    （3）class选择器

                语法：.class{css属性}

2、属性选择器

                语法：基本选择器[type='属性值']{css属性}

3、伪元素选择器

                 a标签的伪元素选择器

                                 语法：

                                          静止状态 a:link{css属性}

                                          悬浮状态a:hover{css属性}

                                          点击状态a:active{css属性}

                                          完成状态a:visited{css属性}

4、层级选择器

                    语法：父级选择器   子级选择器

层级选择器的好处是对于不用种类的同意属性可以更加容易的辨认。

三、css属性

1、文字属性

    font-size：大小

    font-family：字体类型

2、文本属性

    color：颜色

    text-decoration：下划线

               属性值：none 无 underline有

    text-align：对齐方式

               属性值：left center right

3、背景属性

    background-color：背景颜色

    background-image：image：背景图片

    background-repeat：平铺方式

               属性值：默认横向纵向平铺

                           repeat：横向纵向平铺      

                           no-repeat：不平铺   

                           repeat-y：纵向平铺

                           repeat-x：横向平铺   

4、列表属性

    list-style-type：列表前的标志

    list-style-image:列表前的小图片

5、属性尺寸

    width：宽度

    height：高度

6、显示属性

             display：

               属性值：none：隐藏                 

                            block：块级显示

                            inline：行级显示

7、浮动属性

             float：

               属性值：left  right  (clear：清除浮动 属性：left right  both)  

    浮动的缺点：相邻的元素块不能正常显示，影响父元素块不能正常显示

四、css盒子模型 ***

    border:
        border-width:边框的宽度
        border-color:边框的颜色
        border-style:边框的线型
        border-top:上边框
        border-bottom:下边框
        border-left:左边框
        border-right:右边框           

    padding:
        代表边框内壁与内部元素之间的距离
        padding:10px;代表上下左右都是10px
        padding:1px 2px 3px 4px;上右下左
        padding:1px 2px;上下/左右
        padding:1px 2px 3px;
        padding-top:单独设置

    margin:
        代表边框外壁与其他元素之间的距离
        margin:10px;代表上下左右都是10px
        margin:1px 2px 3px 4px;上右下左
        margin:1px 2px;上下/左右
        margin:1px 2px 3px;
        margin-top:单独设置