CSS基础

平平无奇的小天才
189 阅读8分钟

css是“Cascading Style Sheet”d的缩写，中文意思是“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等等。css的主要作用是定义网页样式）

css样式

1.行内样式

行内样式：定义在HTML标签body标签的style属性中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--行内样式-->
    <p style="color: green;">我是一个段落</p>
    <p style="color: blueviolet;">我是一个段落</p>
    <p style="color: plum;">我是一个段落</p>
  </body>
</html>

2.内嵌样式

内嵌样式：定义在HTML头部（head标签中）的style标签中定义css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: bisque;
            color: blue;
        }
    </style>
</head>
<body>
<!--行内样式-->
<p>我是一个段落</p>
<p>我是二个段落</p>
<p style="color: plum;">我是三个段落</p>

</body>
</html>

输出结果：

image.png

这里值得注意的是，在内嵌样式和行内样式的格式有点区别，并且内嵌样式在head标签的style属性中设置了之后，后面的内容都会变成统一的样式，除非像第三个段落那里又重新设置了一个行内样式。

3.外部样式

外部样式：将css样式定义在一个css.格式的文件中，然后是用HTML的link标签将这个.css格式的文件应用到HTML文档中。 css文件

div{
    background: aquamarine;
}
p{
    color: red;
    background: blueviolet;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <LINK href="d1.css" rel="stylesheet">
</head>
<body>
<div>
<p>我是一个段落</p>
<p>我是二个段落</p>
<p>我是三个段落</p>
</div>
</body>
</html>

结果输出：

image.png

注意：这里的css设置的div是分区的作用，意思是对于div这一块的内容起作用。

样式优先级

行内样式 > 内嵌样式 > 外部样式。注意：尽量不要在同一个Html文件中使用多种样式

  • 如果样式是固定的并且后续不修改或者修改很少的情况，一般采用内部样式
  • 如果样式针对当前的html页面做的样式，并且代码量不是很大情况下，采用行内样式
  • 如果样式是通用，并且css代码很多，一般采用外部样式

css选择器

1.通用选择器

通用选择器采用星号*表示，它不匹配某个特定的HTML元素，而是匹配HTML文档中的每一个元素，开发中通常是用通用选择器来清除HTML元素中默认的内外边距

通用选择器格式：*{}

* {
    margin: 0 auto;
    padding: 0;
}

2.标签选择器

根据标签的名字，进行选择匹配（常用在head标签中的style属性中）

标签选择器格式：标签名{}

p{
   color: red
}
span{
   color: blue
}

3.ID选择器/类选择器

根据标签的ID属性或者class属性来匹配，ID选择器的定义需要用到#，后面紧跟ID属性值，类选择器的定义需要用到一个.，后面紧跟class属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background: aquamarine;
        }
        .c1{
            background: pink;
        }
    </style>

</head>
<body>
<div>
    <span id="d1">ID选择器</span><br><br>
    <span class="c1">类选择器</span>
</div>
</body>
</html>

输出结果：

image.png

注意：ID选择器和类选择器的区别是，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

4.层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    div span{
        color: red
    }
    div > a{
        background: blue;
    }
</style>
</head>
<body>
<div>
    <span id="d1">ID选择器</span><br>
    <span class="c1">类选择器</span><br>
    <a href="#"><span>这是一个超链接</span></a>
    <ul>
        <li><span>这是第一项</span></li>
        <li><span>这是第一项</span></li>
    </ul>
<!--    span标签和a标签都是div标签的子标签-->
</div>

</body>
</html>

输出结果：

image.png

后代选择器的格式： 父标签名，子标签名{}，通过父标签去定位找到子标签 能够匹配到div下面所有符合条件的标签

子代选择器的格式： 父标签名 > 子标签{} 通过父标签去定位找到子标签 能够匹配到div下直系的子标签

<div>
    <span id="d1">ID选择器</span><br>
    <span class="c1">类选择器</span><br>
    <a href="#"><span>这是一个超链接</span></a>
    <ul>
        <li><span>这是第一项</span></li>
        <li><span>这是第一项</span></li>
    </ul>
</div>

span标签是div标签的后代标签，a标签也是div的后代标签

后代选择器的格式： 父标签名 子标签名{}  通过父标签去定位找到子标签 能够匹配到div下面所有符合条件的标签
子代选择器的格式： 父标签 > 子标签{}  通过父标签去定位找到子标签 能够匹配到div下直系的子标签

后代选择器使用
div span{
color: red
}

子代选择器使用
div > span{
background: black;
}

总而言之：后代选择器是后面所有的都会变，子代选择器是直系的子标签才行。

5.组合选择器

组合选择器可以将同样的样式应用到多个选择器中，每个选择器中用逗号隔开

<div>
    <span id="d1">ID选择器</span><br>
    <span class="c1">类选择器</span><br>
    <a href="#"><span>这是一个超链接</span></a>
    <ul>
        <li><span>这是第一项</span></li>
        <li><span>这是第一项</span></li>
    </ul>
</div>

样式代码
span,a{
color:red
} /* 该样式将会运用在所有的span标签和a标签中  */

#d1,.c1{
color:blue
} /* 该样式将会运用在所有id属性为d1,class属性为c1的标签中  */

输出结果：

image.png

6.伪类选择器

伪类选择器是一种特殊的选择器，可以用来选择处于特定状态的元素，例如未被访问的链接、已被访问的链接、鼠标悬停在上面的元素、活动元素和获得焦点的表单元素等

  • :link伪类选择器：选择所有未被访问的链接。
  • :visited伪类选择器：选择所有已被访问的链接。
  • :hover伪类选择器：选择鼠标悬停在上面的元素。
  • :active伪类选择器：选择活动元素，即鼠标按下未弹起的元素。
  • :focus伪类选择器：选择获得焦点的元素，一般是表单元素，如input类。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span:hover{     /*悬停*/
            color: red;
        }

        a:link{        /*未被访问*/
            color: pink;
        }
        a:active{      /*按下为弹起*/
            color: blue;
        }
        a:visited{      /*已被访问*/
            color: yellow;
        }
        a{
            font-size: larger;
        }
    </style>
</head>
<body>
<div class="f">
    <div class="box1"><span>这是第一个span标签</span></div>
    <div class="box1"><span>这是第二个span标签</span></div>
    <div class="box2"><a href="#">这是一个链接</a></div>
</div>
</body>
</html>

CSS盒子模型

盒子模型是网页设计中经常用到的一种模型，从内到外分为四个部分，分别是内容区（content），内边距（padding），边框（border）和外边距（margin），css为这四部分提供了一系列相关的属性，通过对这些属性的设置可以丰富盒子的表现效果。

image.png

盒子的组成：

  • 内容区（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>盒子模型</title>
   <style>
      div {
         background-color: lightgrey;
         width: 300px;
         border: 25px solid green;
         padding: 25px;
         margin: 25px;
      }
      p {
         
      }
   </style>
</head>
<body>
   <h2>盒子模型演示</h2>
   <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
   <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>

输出结果：

image.png

1.外边距margin

  • 盒子的外边距，是透明的，只能设置他的边距
  • margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

image.png

2.内边距padding

  • 盒子的内边距
  • 与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
  • 与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。
值的个数表达意思
padding：5px;1个值，代表上下左右都是5px
padding：5px 10px;2个值，代表上下5px，左右10px
padding：5px 10px 20px;3个值，代表上5px，左右10px 下20px
padding：5px 10px 20px 30px;4个值，代表上5px，右10px 下20px 左30px（顺时针）

image.png

3.边框border

  • border表示盒子的边界，它可以设置成可见的，样式多样的。
  • border像margin和padding一样可以分别对每一条边进行设置。

image.png

浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止 float 属性有三个可选值，如下图所示：

image.png

当父元素未设置高度时，父元素的高度会取决于子元素的高度。当子元素设置浮动后，会脱离文档流，造成子元素的内容在父元素外出现，这种情况下，父元素的高度可能会塌陷到0

<!DOCTYPE html>
<html>
<head>
    <style>
        .box{
            border: 2px solid red;
            height: 400px;
            width: 312px;
        }
        .div1{
            height: 100px;
            width: 100px;
            float: left;
            border: 2px solid yellow;
        }
        .div2{
            float: left;
            height: 100px;
            width: 100px;
            border: 2px solid blue;
        }
        .div3{
            height: 100px;
            width: 100px;
            float: left;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
</body>
</html>

输出结果：

image.png

清除浮动

元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性的可选值如下：

image.png

定位

CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position常用的属性值 有relative, absolute, fixed

属性名描述
position: relative相对定位，即相对于元素的正常位置进行定位，不会对其他元素造成影响 元素原位置不会被占用
position: absolute绝对定位，相对于第一个带有定位属性的父元素进行定位 默认是浏览器
position: fixed固定定位，相对于浏览器的创建进行定位

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            opacity: 0.5; /*透明度*/
            position: relative;
            left: 150px;  /*相对于浏览器而言*/
            top: 150px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

输出结果：

image.png

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            opacity: 0.5; /*透明度*/
            /*绝对定位 不会保留原来的位*/
            position: absolute;
            left: 150px;
            top: 150px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

输出结果：

image.png

avatar
文章
阅读
粉丝