CSS学习第三天

CSS重点总结

        1.选择器

        2.盒子模型

        3.浮动

        4.定位

CSS介绍 (  Cascading Style Sheets )

    概念：层叠样式表或者级联样式表

    层叠：CSS的特性

CSS作用：设置网页结构样式（改变html标签样式），通过CSS给html标签设置属性

                达到改变标签样式。

CSS书写位置介绍：

            内嵌式写法

            外链式写法

            行内式写法

内嵌式写法

        内嵌：将css放到html文件设置，放在head标签里

        

CSS语法

        选择器 {属性：值; 属性：值}

        选择器：选择标签的过程

                    标签选择器：

                    类选择器：

                    ID选择器

                    通配符选择器

                    交集选择器（标签指定式）

                    后代选择器

                    子代选择器    

                    并集选择器

        

        补充选择器（c3）：

                伪类选择器 ：目标选择器 空选择器 等

                属性选择器

                伪元素选择器

1.标签选择器

            Html标签名{属性：值；}

                常用属性：

                    color前景色（文字颜色）         

                     设置内容(文字图片)对齐方式  text-align: left | center | right 注意该属性只能给块级元素设置

                   text-indet:设置首行缩进

                     background-color背景色

                    font-size  设置文字大小        文字大小数值px

                    width  设置宽度   height设置高度

        

            p,div用逗号隔开可以都改变

2.单位介绍

        px像素  

        em         1em=一个文字大小    

3.颜色的表示方式

        1.直接设置颜色的名称

        2.使用十六进制表示  #0-f

     

        3.使用三原色表示

                rgb  r:red   g:green  b:blue     (0-255)

        半透明 

                rgba(0,0,0,1)     a取值0-1，a代表透明度   1代表不透明

                            rgba(0,0,0,0.5)

                opacity实现半透明  

                   文字也会实现半透明

              结局IE低版本不支持  

        

类选择器

     .自定义类名  {属性：值；}

        使用：

            通过.自定义类名  定义一个类样式   .p_red{}

                标签通过class书行调用类样式  <p class="p_red" ></p>

类选择其特点

        一个类样式可以被多个标签同时调用

                例如<p class="p_red p_green">文字1</p>

        一个标签可以同时调用多个样类

类选择器命名规范

            合法类名：不能使用纯数字或者以数字开头定义类名

            不推荐使用汉字定义类名   不能使用特殊字符或以特殊字符定义类名      

            个人不推荐使用表签名定义类名

Id选择器

    语法  #自定义名称{属性：值；}

    使用 首先通过#自定义名称  定义一个 id选择器样式

                #p_color{color:red;}

     标签通过id属性调用id样式

                <p   id="p_color"></p>

        id选择器与类选择器的区别：

                1.页面中标签的id值必须唯一            例（不可以）：<p id="color size">你好啊</p>

                2.一个标签只能调用一个id样式

通配符选择器

            *{属性：值；...}

        特点：该选择器会将页面中所有的标签都选中

        以前一般样式初始化的时候用，不同浏览器默认样式不同，就需要用通配符选择器

font属性介绍

        font-size            文字大小

        font-weight        文字加粗效果  属性值：normal(文字正常)  |    700(文字加粗)  |  bold  (文字加粗)|400(文字正常)

        font-style       文字是否斜体显示  属性值：normal(正常显示)| italic(文字斜体显示)

        font-family    设置文字字体

                带双引号不带都可以

            文字字体表示方式：直接设置字体对应的名称（宋体  黑体  幼圆）

                                           设置字体对应的英文称呼

                                            设置字体对应的unicode编码

                

        注意：font-family   一次可以设置多个字体，字体与字体之间用，隔开

                        

                   设置字体要设置常用字体       设置多个文字属性的作用：如果没有依次使用后面的文字属性

line-height 设置文字行高

font属性连写

                font: font-weight  font-style  font-size/line-height      font-family

                

            注意：1.属性联写中必须设置font-size和font-family

                       2.在属性联写中font-size必须放到font-family前面设置

                       3.如果font属性联写中的属性都要设置，按照图片中的顺序设置

复合选择器

        标签指定式选择器

            语法：标签名.类名{属性：值；}

                       或者

                        标签名#id名{属性：值；}

            关系：既。。。又。。。

后代选择器

            注意：后代选择器标签之间必须是嵌套关系

                       选择器与选择器之间必须使用空格隔开

                       后代选择器只能选中后代元素

                        后代元素可以是直接后代也可以是间接后代

            语法：选择器 选择器 {属性：值；}

并集选择器

            语法：选择器，选择器，选择器{属性：值；}

            注意：选择器与选择器之间必须用逗号隔开

                      选择器标签之间的结构可以是任意一种关系

补充知识（不需要重点掌握）

             子代选择器

                        语法：选择器>选择器（属性：值；）

                        注意：

                                子代选择器必须是嵌套结构

                                子代选择器只能选中直接后代元素

                                后代选择器可以选中所有的后代元素

            属性选择器

                        [属性名]{属性：值}

                                [id][class]{color: green;}       既。。。。又。。。。（同时满足）

                               [属性=值]｛｝      例如： [class="one"] {color:green;}  给属性赋值，同时满足   

                 [属性^=字母]      例如：[class^=t]{color: black;}  选中以字母开始的标签

                                [属性$=字母]      例如：[class$=o] 选中以字母结束的标签

                                [属性*=字母]       例如：[class*=o]选中包含字母的标签

            伪类选择器

                            结构伪类    语法：         选择器：first-child{属性：值；}

                                                                 选择器：last-child{属性：值；}

                                                                  选择器：nth-first-child{属性：值；}

                                                                  选择器：nth-last-child{属性：值；}

                                                                  选择器：nth-child(odd)(属性：值；)奇数

                                                                  选择器：nth-child(even)(属性：值；)偶数

                            目标伪类

                            空伪类

                            排除伪类