08_css

文章目录

CSS
- 概念
- 在HTML中引入CSS的三种方式
- CSS的选择器
- - 标签选择器
  - 类选择器
  - id选择器
  - 后代选择器
  - 子类选择器
  - 并集选择器
  - 伪类选择器
  - 伪元素选择器
  - 属性选择器
  - 选择器的优先顺序
- 盒子模型
- - 边框的写法
  - 内外边距的写法
  - 外边距合并
- 标签的分类
- - 块级元素
  - 行级元素
  - 行内块
- 浮动

CSS

概念

css是层叠样式表，主要作用是设置HTML页面中的文本内容格式（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。

css是以HTML为基础，提供丰富的样式功能
需要和HTML结合使用，无法单独使用。

在HTML中引入CSS的三种方式

内联样式
- 写在一个html标签的属性位置，写在开始标签上
- 多个css样式以分号分割

eg：

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- html和css结合的第一种方式：直接在html标签上，新增一个style属性，在style属性里面去添加属性-->
<!--内联样式-->
<div style="width: 600px; height: 200px; background-color: silver; 
font-size: 30px; border-radius: 30px">
    hello
</div>

</body>
</html>

内部样式
- 写在head标签内部的style标签内
- 内部样式使用是最多的

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*内部样式：把样式写在head内部，再加一个标签<style> 在里面去写样式*/
        div {
            width: 600px;
            height: 300px;
            background-color: silver;
            font-size: 40px;
        }
    </style>
</head>
<body>

<div>
    hello world
</div>

</body>
</html>

外部样式
把css样式写在一个单独的css文件中, 引入到html文件中。
引入方式：
- <link rel="stylesheet" type="text/css" href="./01_css.css" />
- <style type="text/css">
  @import url(./01_css.css);
  </style>

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   <style>-->
<!--       @import "Demo2.css";-->
<!--   </style>-->

<!--    可以直接写一个link，然后href写相对路径-->
    <link rel="stylesheet" type="text/css" href="./Demo2.css" />
</head>
<body>

<div>
    hello world
</div>

</body>
</html>

CSS的选择器

标签选择器

会作用于所有指定的标签

使用方式：标签名{css样式}
eg：div{}、p{}

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 200px;
            height: 100px;
            /*background-color改变的是背景颜色*/
            background-color: aqua;

            font-size: 50px;
            /*color改变的是字体的颜色*/
            color: coral;

            /*框框的圆角半径*/
            border-radius: 30px;
        }

        p{
            font-size: 100px;
            color: brown;
        }


    </style>
</head>
<body>

<div>
    hello world
</div>


<p>
    !!!!!!!!!
</p>

</body>
</html>

类选择器

- 标签上有一个属性，属性名class，属性值即类名。<div class="div1">
使用方式：.类名{css样式}

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: blue;
            font-size: 30px;
        }

        .div2{
            width: 100px;
            height: 100px;
            background-color: brown;
            font-size: 20px;
        }
    </style>
</head>
<body>

<div class="div1">
    hello world
</div>

<div class="div2">
    Yes! I can
</div>

</body>
</html>

id选择器

标签上有一个属性，属性名id，属性值即id。<div id="div1">
使用方式：#id{css样式}
eg：#div1{}、#div2{}
另外在一个html页面上, 每个标签的id都应该是唯一的

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        #div-id {
            width: 200px;
            height: 200px;
            background-color: yellow;
            font-size: 40px;
        }

    </style>
</head>
<body>

<div id="div-id">
    这个div—id
</div>

</body>
</html>

后代选择器

选择div的后代p
使用方式： 元素1 元素2 {样式声明}

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div p{
            font-size: 30px;
            color: crimson;
        }
    </style>
</head>
<body>

<div>
    这是div
    <p>
        这是第一个p
    </p>

    <p>
        这是第二个p
    </p>
</div>

</body>
</html>

子类选择器

只会选择直接的子类
使用方式：元素1> 元素2{}

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        div >p{
            font-size: 30px;
            color: blue;
        }

    </style>
</head>
<body>

<div>
    <p>
        hello world
    </p>
</div>

<div>
    !!!!
</div>

<p>
    ????
</p>

</body>
</html>

后代选择器与子类选择器的区别：

后代选择器会选择所有的后代div p{}
子类选择器只会选择直接子类div > p{}

并集选择器

使用方式：元素1, 元素2

eg：

    <style>
        div,p{
            font-size: 30px;
            color: crimson;
        }
    </style>

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

选择标签的hover状态
a:hover{} 当a标签hover时候，样式
选择第一个元素,选择第n个元素
p:first-child{} p:nth-child(2){}

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        a:hover{
            background-color: brown;
        }
        div{
            width: 200px;
            height: 200px;
            color: blue;
            font-size: 20px;
            background-color: silver;
        }
        div:hover{
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>
    这是div
</div>

</body>
</html>

伪元素选择器

伪元素是用来添加一些选择器的特殊效果

eg：

想往h1标签前面插入元素
  h1:before{
    content: url("1.jpg")
  }

属性选择器

选择标签中带有某个属性的
使用方式：[target] {}

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 属性选择器*/
        [href] {
            font-size: 30px;
            background-color: crimson;
        }

    </style>
</head>
<body>


<a href="https://baidu.com">这是百度</a>

</body>
</html>

选择器的优先顺序

id选择器 > 类选择器 > 标签选择器
可以加一个important提高它的优先级
只有在多个选择器，都对同一个属性

盒子模型

盒子模型：是指一个HTML元素，在经过浏览器解析之后，最终会变成一个矩形的盒子

盒子模型分四部分：

内容区域
内边距
边框
外边距

边框的写法

border：指代边框的属性
可以有2或者3个属性

eg：

border: 1px solid
- 2个参数的：边框厚度，线的类型
border: 1px solid red
- 3个参数的：边框厚度，线的类型，线的颜色
- 如果不填写颜色，则默认为黑色

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            /*设置的宽和高，其实是内容区域的大小*/
            width: 200px;
            height: 100px;
            background-color: brown;
            border: 1px solid;
            border: 10px solid yellow;
            /*1px 控制的是边框的粗细； solid控制的是线性*/
        }
    </style>
</head>
<body>

<div>
    this is div!!
</div>

</body>
</html>

内外边距的写法

内边距（padding）/ 外边距（margin）的设置：

只写一个，上下左右则都是内边距
- eg：padding : 30px
写两个，则第一个参数是上下，第二个参数是左右
- eg：padding : 20px 10px
写三个，则第一个参数是上，第二个参数是左右，第三个参数是下
- eg：padding : 30px 20px 10px
写四个，则从上开始顺时针（上 -> 右 -> 下 -> 左）
- eg：padding : 30px 20px 10px 5px

外边距合并

就是两个框框，他们的外边距在垂直方向上 “紧相邻”，它们的外边距会合并。

情况1：兄弟紧相邻（不能解决紧相邻现象）

eg：

<style>
        .div1 {
            width: 300px;
            height: 200px;
            background-color: #e38c21;
            margin-bottom: 50px;
        }

        .div2 {
            width: 300px;
            height: 200px;
            background-color: #2175e3;
            margin-top: 50px;
        }

</style>

<div class="div1">
    div1
</div>

<div class="div2">
    div2
</div>

情况2：父子紧相邻（可以解决紧相邻现象）

eg：

<style>
  .div-father {
  width: 300px;
  height: 500px;
  background-color: #e38c21;
  margin-top: 50px;

}

.div-son {
  width: 300px;
  height: 200px;
  background-color: #2175e3;
  margin-top: 50px;
}
</style>

<div class="div-father">
    <div class="div-son">

    </div>
</div>

标签的分类

块级元素

块级元素, 可以设置 高度 / 宽度 / 内边距 / 外边距
块级元素默认有一个display属性，属性值为block
- eg：display:block
常见的块级元素：
div、p、h1、 h2、 h3、 h4、 h5、 h6，ol、ul、li、form、table

行级元素

行级元素不能设置宽度 / 高度，内外边距也只有左 / 右起作用
- 块级元素默认有一个display属性，属性值为inline
  - eg：display:inline
常见的行级元素：
- span 常用行级容器，定义文本内区块;
- a 锚点;
- b 加粗;
- strong 加粗强调;
- i 斜体;
- strike 中划线;
- br 强制换行;
- u 下划线;
- textarea 多行文本输入框;
- input 输入框;
- select 下拉列表;
- img 引入图片

块级元素和行级元素的区别：

块级元素可以设置宽高、内外边距；行级元素设置宽高不起作用，内外边距也只有左右起作用
所占行的区别

块级元素，独占一行；行级元素，不独占一行

宽度继承的问题

块级元素，会继承父类的宽
行级元素，不会继承

行内块

本质属于行级元素：可以与其他行级元素共处一行
常见的行内块元素：
- input 输入框
- img 引入图片
- button
- select
默认属性为display:inline-block;

可以通过display属性，来完成行级元素、块级元素、行内块之间的转换

浮动

形象的讲，我们可以使一个html的盒子模型，脱离标准文档流， "漂浮"起来

特点：

浮动只影响后面的元素
连续浮动一行显示
浮动以元素顶部为基准对齐
浮动可实现模式转换

clear: 谁受影响谁清除

left:在左侧不允许浮动元素。

right:在右侧不允许浮动元素。

both:在左右侧不允许浮动元素。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: yellow;

            float: left;
        }

        .div2 {
            width: 300px;
            height: 400px;
            background-color: red;

            float: left;
        }
        /*浮动是顶对齐*/

        .div3{
            width: 500px;
            height: 600px;
            background-color: blue;

            float: left;
        }

        .div4{
            width: 400px;
            height: 500px;
            background-color: green;

            /*谁受影响，谁清除浮动*/
            clear: both;
        }
    </style>
</head>
<body>

<div class="div1">
</div>

<div class="div2">
</div>

<div class="div3">
</div>

<div class="div4">
</div>

</body>
</html>