学习CSS时做的笔记，方便复习。

CSS学习笔记

01.CSS的声明

• 一、在head标签中使用style标签声明：此声明一般声明当前网页的公共样式或者给某个标签的单独样式

• 二、在标签上使用style属性进行声明：此声明会将CSS样式直接作用于当前标签。

• 三、在head标签中使用link标签引入外部声明好的CSS文件：此声明相当于调用,解决了不同网页间样式重复使用的问题，一次声明，随处使用。

• 注意：不同的声明给同一个标签操作了同一个样式，如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。

<style type="text/css">
    hr{
        width: 50%;
        height: 20px;
        color: red;
        background-color: red;
    }
</style>

<hr style="background-color: blue;height: 50px;"/>

<link rel="stylesheet" type="text/css" href="css/my.css"/>

02、CSS的选择器学习

CSS选择器

• 标签选择器

  • 标签名{样式名1:样式值1;…..}
  • 作用：会将当前网页内的所有该标签增加相同的样式。

• id选择器

  • #标签的id属性值{样式名1:样式值1;……}
  • 作用：给某个指定的标签添加指定的样式。

• 类选择器

  • .类选择器名{样式名1:样式值1;……}
  • 作用：给不同的标签添加相同的样式。

• 全部选择选择器

  • *{样式名1:样式值1;……}

  • 作用：选择所有的HTML标签，并添加相同的样式。

• 组合选择器

  • 选择器1,选择器2,……{样式名1：样式值1;……}

  • 作用：解决不同的选择器之间重复样式的问题。

• 子标签选择器

  • 选择器1 子标签选择器{样式名1：样式值1;……}

• 属性选择器

  • 标签名[属性名=属性值]{样式名1：样式值1;……}

  • 作用：选择某标签指定具备某属性并且属性值为某属性值的标签。

03、CSS盒子模型

• div标签

  • 块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。

  • 特点：默认宽度是页面的宽度，但是可以设置。高度默认是没有的，但是可以设置(可以顶开)。如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。

• 盒子模型

  • 外边距：margin

    • 作用：用来设置元素和元素之间的间隔。

    • 居中设置：margin:0px auto;上下间隔是0px,水平居中。

    • 可以根据需求单独的设置上下左右的外边距。

  • 边框：border

  • 内边距：padding

    • 作用：设置内容和边框之间的距离

    • 注意：内边距不会改变内容区域的大小

  • 内容区域

04、CSS定位

• position：

  • 相对定位：relatiive

    • 作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)，可以使用top,left,right,bottom来进行设置。

    • 注意：其他元素的位置是不改变的。

  • 绝对定位：absolute

    • 作用：可以使用元素参照界面或者相对父元素来进行移动

    • 注意：如果父级元素成为参照元素，必须使用相对定位属性。默认情况下是以界面为基准进行移动的。

  • 固定定位：fixed

    • 作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。

  • 以上定位都可以使用top,left,right,bottom来进行移动。

• z-index：此属性是用来声明元素的显示级别的。