前端之CSS

以你之姓@ 2021-12-21 03:55 252阅读 0赞

# 一、CSS介绍 #

CSS（**C**ascading **S**tyle **S**heet，层叠样式表)定义**如何显示**HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

# 二、CSS语法 #

## CSS实例 ##

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

![1635153-20190529223221508-77973843.png][]

## CSS注释 ##

/*单行注释*/
    
    /* 多
       行
       注
       释*/

# 三、CSS的引入方式 #

### 行内样式 ###

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world!</p>

### 内部样式 ###

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
        
                background-color: #2b99ff;
            }
        </style>
    </head>

### 外部样式 ###

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

# 四、CSS选择器 #

## 基本选择器 ##

### 元素选择器 ###

p {
        color: "red";}

元素选择器中"p"代表标签，所有的段落标签p都会渲染出"\{\}"内的样式。

### ID选择器 ###

#i1 {
        background-color: red;}

指定HTML标签的ID，在HTML中ID是唯一的。“\#”后面跟ID号

### 类选择器 ###

.c1 {
        font-size: 14px;}
    p.c1 {
        color: red;}

类选择器以句点"."开头，HTML标签以类似于继承的形式使用类中设置的样式，可以使用多个类，类似于多继承。

标签内用属性class=类名的方式时，不加句点"."。但是在定义时要加。

### 通用选择器 ###

* {
        color:red;}

类似于Mysql的select语句，用\*代表所有的内容，也与Python的from \* import 模块名 语法相似。

## 组合选择器 ##

### 后代选择器 ###

li a {
        color: green;}

给标签li 内部的a标签添加样式。

所有在<li>与</li>之间的a标签都添加该样式。

### 儿子选择器 ###

div>p {
        font-family: "Arial Black", arial-black, cursive;}

给以div为父级的p标签添加样式。所选择的范围比后代选择器要小。

### 毗邻选择器 ###

div+p {
         margin: 5px;}

在</div>之后的所有标签，和<div>同级别。

### 弟弟选择器 ###

#i1~p {
         border: 2px solid royalblue;}

在</div>之后的第一个标签，和<div>同级别。

## 属性选择器 ##

p[title] {
        color: red;}
    p[title="213"] {
        color: green;}

代码的第一句：只要有title属性名的标签都找到并添加样式。

代码的第二句：当有title属性的标签，并且属性的值为213时才添加样式。

## 分组和嵌套 ##

### 分组 ###

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div, p {
        color: red;}

### 嵌套 ###

.c1 p {
        color: red;}

类c1内部所有的p标签的内容设置为红色。

div p,span {
        color: red;}

div p是一个后代选择器，span是一个属性选择器，写在一起表示div内部的所有p以及全部的span全部使用该样式。

## 伪类选择器 ##

伪类选择器主要是用在a标签上，设置链接的样式。

## 伪元素选择器 ##

p:first-letter {
        
                color: red;
                font-size: 24px;
            }
            p:before {
        
                content: '*';
                color: green;
            }
            p:after {
        
                content: '?';
                color: deeppink;
                font-size: 48px;
            }

给特定的元素的首和尾添加样式。

## 选择器优先级 ##

![1635153-20190529232110404-1260133078.png][]

# 五、样式修改 #

### 字体属性 ###

div {
        
                width: 400px;
                height: 100px;
            }
            p {
        
                font-family: "Sitka Banner", "Arial", sans-serif
            }
            p {
        
                font-size: 16px;
                font-weight: lighter;
            }

修改字体、宽高占的像素，字重等。

### 字重 ###

<table style="width:529px;"> 
 <thead> 
  <tr> 
   <th style="text-align:center;">值</th> 
   <th style="text-align:center;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">normal</td> 
   <td style="text-align:center;">默认值，标准粗细</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">bold</td> 
   <td style="text-align:center;">粗体</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">bolder</td> 
   <td style="text-align:center;">更粗</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">lighter</td> 
   <td style="text-align:center;">更细</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">100~900</td> 
   <td style="text-align:center;">设置具体粗细，400等同于normal，而700等同于bold</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">inherit</td> 
   <td style="text-align:center;">继承父元素字体的粗细值</td> 
  </tr> 
 </tbody> 
</table>

### 文本颜色 ###

p {
        color: red;}
     p {
        color: rgb(0,0,255);}
     p {
        color: #FF6700;}
     p {
        color: rgba(0,0,255,0.8);}

可以直接以英文指定颜色；

可以用rgb()指定三原色；

可以写颜色的代码；

可以用rgba（）设置透明度。

### 文本属性 ###

text-decoration: line-through;

删除线

text-decoration: overline;

上划线

text-decoration: underline;

下划线

text-align: right;

居右

text-indent: 48px;

在开头空出48个像素

a {
        
                text-decoration: none;
            }

链接的默认形式是有下划线的，用这个样式可以把下划线去掉。

### 背景属性 ###

background-color: green;

背景颜色

background-image: url()

背景图片的设置1

background-repeat: no-repeat;

设置背景图片不重复

background-position: center;

背景图片居中

background: no-repeat center url("http://i7.hexun.com/2018-02-27/192516381.jpg") blue ;

支持一次设置多个样式的属性，不重复、居中、背景图片和背景颜色，可以自由调整书写的顺序，但是不影响最终的效果。

### 边框 ###

border-width: 3px;

间距3像素

border-style: dashed;

边框是虚的方线

border: 3px solid red;

可以一次设置多个属性

### 画图 ###

代码<div style="width: 400px;height: 400px;background-color: red;border: 3px solid black;border;radius: 100%;"></div>的浏览器渲染效果。

###  display属性 ###

display: none;

隐藏标签的内容

display: inline;

将块儿级标签变成行内标签

display: block;

将选择的标签既具有行内标签特点又有块儿级标签的特点

#### 去除ul自带样式 ####

*  列表li1
 *  列表li2
 *  ![1635153-20190530212803822-966700956.png][]
    
    ##  CSS盒子模型 ##
    
     *  **margin**:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
     *  **padding**:           用于控制内容与边框之间的距离；   
     *  **Border**(边框):     围绕在内边距和内容外的边框。
     *  **Content**(内容):   盒子的内容，显示文本和图像。
    
    看图吧：
    
    ![867021-20180305155247808-885981996.png][]

## margin外边距 ##

![复制代码][Image 1]

.margin-test {
        
      margin-top:5px;
      margin-right:10px;
      margin-bottom:15px;
      margin-left:20px;
    }

![复制代码][Image 1]

推荐使用简写：

.margin-test {
        
      margin: 5px 10px 15px 20px;
    }

顺序：上右下左

常见居中：

.mycenter {
        
      margin: 0 auto;
    }

## padding内填充 ##

![复制代码][Image 1]

.padding-test {
        
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 15px;
      padding-left: 20px;
    }

![复制代码][Image 1]

推荐使用简写：

.padding-test {
        
      padding: 5px 10px 15px 20px;
    }

顺序：上右下左

补充padding的常用简写方式：

*  提供一个，用于四边；
 *  提供两个，第一个用于上－下，第二个用于左－右；
 *  如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
 *  提供四个参数值，将按上－右－下－左的顺序作用于四边；

## float ##

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

*  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
 *  由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

### 三种取值 ###

left：向左浮动

right：向右浮动

none：默认值，不浮动

## clear ##

clear属性规定元素的哪一侧不允许其他浮动元素。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>在左侧不允许浮动元素。</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>在右侧不允许浮动元素。</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>在左右两侧均不允许浮动元素。</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>默认值。允许浮动元素出现在两侧。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 clear 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

注意：clear属性只会对**自身**起作用，而不会影响其他元素。

### 清除浮动 ###

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

*  固定高度
 *  伪元素清除法
 *  overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
        
      content: "";
      display: block;
      clear: both;
    }

##  overflow溢出属性  ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible</td> 
   <td>默认值。内容不会被修剪，会呈现在元素框之外。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>内容会被修剪，并且其余内容是不可见的。</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 overflow 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

*  overflow（水平和垂直均设置）
 *  overflow-x（设置水平方向）
 *  overflow-y（设置垂直方向）

###  圆形头像示例 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>圆形的头像示例</title>
      <style>
        * {
          
          margin: 0;
          padding: 0;
          background-color: #eeeeee;
        }
        .header-img {
          
          width: 150px;
          height: 150px;
          border: 3px solid white;
          border-radius: 50%;
          overflow: hidden;
        }
        .header-img>img {
          
          width: 100%;
        }
      </style>
    </head>
    <body>
    
    <div class="header-img">
      <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
    </div>
    
    </body>
    </html>

圆形头像示例

## 定位（position） ##

### static ###

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

### relative（相对定位） ###

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

### absolute（绝对定位） ###

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style>
            .c1 {
          
                height: 100px;
                width: 100px;
                background-color: red;
                float: left;
            }
            .c2 {
          
                height: 50px;
                width: 50px;
                background-color: #ff6700;
                float: right;
                margin-right: 400px;
                position: relative;
    
            }
            .c3 {
          
                height: 200px;
                width: 200px;
                background-color: green;
                position: absolute;
                top: 50px;
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2">
        <div class="c3"></div>
    </div>
    
    </body>
    </html>

绝对定位

### fixed（固定） ###

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

示例代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>返回顶部示例</title>
      <style>
        * {
          
          margin: 0;
        }
    
        .d1 {
          
          height: 1000px;
          background-color: #eeee;
        }
    
        .scrollTop {
          
          background-color: darkgrey;
          padding: 10px;
          text-align: center;
          position: fixed;
          right: 10px;
          bottom: 20px;
        }
      </style>
    </head>
    <body>
    <div class="d1">111</div>
    <div class="scrollTop">返回顶部</div>
    </body>
    </html>

返回顶部按钮样式示例

### 是否脱离文档流 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .c1 {
          
                 height: 50px;
                width: 100px;
                background-color: dodgerblue;
            }
            .c2 {
          
                 height: 100px;
                width: 50px;
                background-color: orange;
                position: relative;
                left: 100px;
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div style="height: 100px;width: 200px;background-color: black"></div>
    </body>
    </html>

相对定位

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .c1 {
          
                height: 50px;
                width: 100px;
                background-color: red;
                position: relative;
            }
            .c2 {
          
                height: 50px;
                width: 200px;
                background-color: green;
                position: absolute;
                left: 50px;
            }
        </style>
    </head>
    <body>
    <div class="c1">购物车
        <div class="c2">空空如也~</div>
        <div style="height: 50px;width: 100px;background-color: deeppink"></div>
    </div>
    
    </body>
    </html>

绝对定位

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
    <div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
    <div class="c3" style="height: 10px;width: 100px;background-color: green"></div>
    
    </body>
    </html>

固定定位

上述例子可知：

**脱离文档流：**

绝对定位

固定定位

**不脱离文档流：**

相对定位

## z-index ##

#i2 {
        
      z-index: 999;
    }

设置对象的层叠顺序。

1.  z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.  只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.  z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.  从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>自定义模态框</title>
      <style>
        .cover {
          background-color: rgba(0,0,0,0.65);
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 998;
        }
    
        .modal {
          background-color: white;
          position: fixed;
          width: 600px;
          height: 400px;
          left: 50%;
          top: 50%;
          margin: -200px 0 0 -300px;
          z-index: 1000;
        }
      </style>
    </head>
    <body>
    
    <div class="cover"></div>
    <div class="modal"></div>
    </body>
    </html>

## opacity ##

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

转载于:https://www.cnblogs.com/forcee/p/10947201.html

[1635153-20190529223221508-77973843.png]: /images/20211221/b39db5d3738541378c9a2bb8b443bfc0.png
[1635153-20190529232110404-1260133078.png]: /images/20211221/a63866ef444041ff811befe9b9de8923.png
[1635153-20190530212803822-966700956.png]: /images/20211221/71cedf6f157b48d8b64e4ca21181e5e6.png
[867021-20180305155247808-885981996.png]: /images/20211221/62290973dfc6473f87249da98d7a1845.png
[Image 1]: 
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211221/11306a0aa19a4cb39de27b86eb6c196e.png