css

HTML的块标签:

​    div标签: 默认占一行,自动换行

​    span标签:  内容显示在同一行

CSS概述:

​    Cascading Style Sheets : 层叠样式表

​        红砖, 抹了一层水泥, 白灰

主要用作用:

​    用来美化我们的HTML页面的

​    HTML 决定网页的骨架    ,CSS  化妆

​    将页面的HTML和美化进行分离

CSS的简单语法:

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

```html
<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>
```

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

元素选择:

```html
元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}
```

ID选择器:

```html
以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}
```

类选择器:

```html
以 . 开头 
.类的名称{
   属性名称:属性的值;
      属性名称:属性的值;
}
```

CSS的引入方式:

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

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

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

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

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

 CSS的优先级

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

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

      ​

- CSS中的其它选择器

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

  - 属性选择器:

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

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

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

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