CSS 学习笔记

CSS的简单语法:

​ 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>

选择器{

　　　　属性名称:属性的值; 属性名称2: 属性的值2;

　　　　} </style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择:

元素的名称{

　　　　属性名称:属性的值;

　　　　属性名称:属性的值;

　　　　　　 }

ID选择器:

以#号开头 ID在整个页面中必须是唯一的s

ID的名称{

　 　属性名称:属性的值;

　　 属性名称:属性的值;

　　　　　　} 

类选择器:

以 . 开头

.类的名称{

　　　　属性名称:属性的值;

　　　　属性名称:属性的值;

　　　　　　}

CSS的引入方式:

​ 外部样式: 通过link标签引入一个外部的css文件

​ 内部样式: 直接在style标签内编写CSS代码

​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS浮动 :

浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

            float属性:
                left
                right

            clear属性: 清除浮动
                both : 两边都不允许浮动
                left: 左边不允许浮动
                right : 右边不允许浮动
            流式布局

CSS的优先级

按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

CSS中的其它选择器    

- 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}


- 属性选择器:

     
    a[title]
    a[titile='aaa']
    a[href][title]
    a[href][title='aaa']
    ```

  - 后代选择器: 爷爷选择器  孙子选择器   找出所有的后代

  - 子元素选择器:  父选择器  > 儿子选择器

  - 伪类选择器: 通常都是用在A标签上

CSS的盒子模型

内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
 

外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS绝对定位:

​ position: absolute

​ top: 控制距离顶部的位置

​ left: 控制距离左边的位置