XiYuJing|文章:CSS学习

[[ slide_text ]]

[[item.c]]

CSS学习

发布时间：2022年09月20日 作者：靖华来源：XiYuJing

CSS

# CSS入门

## CSS介绍与基本使用
### CSS样式：
层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
### CSS作用：
CSS就是网页的化妆师，可以让页面变得更加美观
### CSS使用方法

1.直接写在标签

```html

    <h1 style="color: red;">行内样式</h1>
 ```

2.写在style标签内

```html

<style>
    /*标签选择器*/
    h2 {
        color: yellow;
    }
</style>
<h2>内部样式</h2>
```

3.使用外部.css文件

```html


<link rel="stylesheet" href="01.css">
```

01.css文件
```css
h3 {
    color: blue;
}
```

## CSS选择器

### 选择器的作用：

给指定的元素设置样式，能够更加精准

### 选择器的权重：

选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式

### 选择器的种类：

有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器

#### 标签选择器：

```css
/* 默认标签选择器--作用于后面所有的div标签*/
div {
    background:yellowgreen;
    width:300pk;
}
```

#### ID选择器：

通过标签的 id 属性，选择 对应的元素
注意： id是唯一的

使用“#”来标识，后面紧跟着id名

```css
/* id选择器--作用于某个id,给标签添加一个id属性*/
#div1{
    background:orange;
    width:200pk;
}
```

#### Class选择器：

通过标签的 class 属性 ，选择对应的元素 
借助了一个类的概念，一处定义，可以多处使用
使用“.”来标识，后面紧跟着class名

```css
/* class选择器--作用于多个class标签，可以给多个标签添加class属性 */
.wrap{
    background:azure;
    height:150pk;
}
```

#### 通配符选择器：

```css
/* *是通配符选择器，作用于页面上所有的选择器  */
* {
  	margin:0; /*外边距*/
    padding:0; /*内边距*/
}
```

> 以上选择器为简单选择器，比较常用

#### 群组选择器：

群组选择器是可以同时选择多个标签的选择器

```css
/* 群组选择器--同时对多个选择器进行样式设置，每个选择器之间用逗号分隔  */
div,p{
    background:yellowgreen;
    width:300pk;
}
```
#### 属性选择器：

```css
/* 属性选择器 在什么标签上使用就把标签的<>改为[] */
p[id="p1"]{
    color: red;
}
<p id="p1">我是段落1</p>
```

#### 层次选择器：

层次选择器分为，子代、后代、相邻和兄弟等四种选择器

##### 兄弟选择器：

```css
/* 兄弟选择器--div后面的兄弟都会选中，~两边的空格可写可不写 */
div~ul{
    background:skyblue;
}
```

##### 相邻选择器：

```css
/* 相邻选择器--只会选择相邻的标签，这个+号可以写多个 */
div+ul{
    background:skyblue;
}
```

##### 后代选择器：

```css
/* 后代选择器--作用于所有满足的后代上面 中间是空格 这个是使用最多的选择器 */
div ol{
    list-style:none;
}
```

##### 子代选择器：

```css
/* 子代选择器--只会作用于子代，不会作用于孙子辈 */
div>ol{
	list-style:none;
}
```

> 以上为复杂选择器，主要满足于简单选择器过多的情况

#### 伪类选择器

通过伪类选择器可以实现用户操做之后再运行

```css
/* 伪类选择器, 以需要用伪类选择器的标签名后加:为标识*/
/*未访问*/
a:link {
    color: red;
}

/*访问过后*/
a:visited {
    color: yellow;
}

/*鼠标经过*/
a:hover {
    color: blue;
}

/*鼠标点击没有松开 激活状态*/
a:active {
    color: green;
}

<a href="07%20div.html">超链接</a>
```

### 选择器总结

选择器优先级概括如下：

1. id > class > 标签
2. 复杂选择器的优先级比较如下：
    1. 先比 id（最高位），再比 class，最后比 tagName （标签个数）
    2. id 个数不等，id越多，优先级越高
    3. id相同，class越多，优先级越高
    4. id，class都相同，则标签越多，优先级越高
3. 行内样式>内部=外部

## CSS字体/文本

### 字体样式

color(字体颜色)，font-size(字体大小)，font-style(字体样式)，font-weight(字体粗细)，font-family(字体类型)，font(复合样式)

### 字体

```css
.he1{
    /* font-family 字体浏览器 ， 不同平台的默认字体不一样，Windows默认是微软雅黑 */
    font-family:"arial black";
    font-size:10pk;
    /* font-size 字体大小 单位pk rem em %
    pk 谷歌浏览器默认字体大小为16pk
    rem 相当于html(根标签)的字体大小
    rm 等于父级的字体尺寸--相对于父级字体大小而言
    % 相对于父容器中字体的%调整
    */
}
```

> font-family 更改字体，字体可以两个或以上的备选，用逗号分隔即可

### 字体粗细与样式

```css
.he2{
    font-weight:bolder;
    /* font-weight  字体粗细
    normal 默认字体 400
    lighter 较细 100
    bold 加粗 700
    bolder 很粗 900
    也可以直接用数字*/
}
```

```css
.he3{
    font-style:oblique;
}
/* font-style 字体类型
	normal 默认 文字正常
	italic 文字斜体(属性)
	oblique 文字斜体
*/
```

### 复合类型

> 使用单个类型，比较麻烦，因此可以使用复合类型，便于书写。
> 注意：复合类型一定要严格按照样式来书写

```
/* 顺序： 字体样式，字体大小写，字体粗细，字体大小，字体类型.
如果不设置，则需要填none*/
```

```css
.he5{
    /* 复合样式 */
    /* size | family  */
    /* font:20pk "agency fb"  */
    
    /* style | size | family  */
    /* font: italic 20pk "agency fb","agency narrow" */
    
    /* style | weight | size | family */
    /* font: italic bold 20pk "microsoft yahei" */
    
    /* style | variant(字体大小写) | weight | size | family */
    /* font: italic small-caps bold 20pk "bodoni mt" */
}
```

### 文本常用样式

text-align(对齐方式)，text-indent(首行缩进)，text-decoration(文本线)，letter-spacing(字距)，word-spacing(词距)，line-height(行高)单行文本的垂直居中：行高=高度

```css
#p1 {
    text-align: left; /*一、对齐方式*/

/*一个1em代表一个中文，就相当于是一个&emsp;的意思*/
    text-indent: 2em;   /*二、首行缩进*/

/*underline(下划线)/overline(上划线)/line-through(删除线)*/
    text-decoration: underline; /*三、文本线*/

/*letter-spacing: 10px;   !*四、字距 一个文字一个文字之间的距离*!*/

word-spacing: 20px;     /*五、词距 一个词语一个词语之间的距离*/

line-height: 20px;  /*六、行高*/
}

/*讲解行高*/
div {
    width: 100px;
    height: 100px;
    background-color: green;
}

div a {
    line-height: 100px;
}

h1 {
    /*uppercase(全部转换为大写)/lowercase(全部转换为小写)/capitalize(首字母大写）*/
    text-transform: lowercase;  /*七、字体转换*/
}
```

## CSS背景

background-color(背景颜色)，background-image(背景图片)，background-repeat(背景铺盖)，background-size(背景大小)，background-position(背景定位)，background(复合样式)

```css
div {
    width: 200px;   /*一、宽度*/
    height: 200px;  /*二、高度*/
    background-color: cornflowerblue;   /*三、背景颜色*/

/*边框样式：dotted(点线)/dashed(虚线)/
    solid(实线)/double(双实线)/groove(凹型线)/ridge(凸型线)*/
    border: 3px double red;     /*四、边框*/

background-image: url("images/img1.jfif");  /*五、背景图片*/

background-repeat: repeat;   /*六、背景平铺*/

background-size: 200px 200px;      /*七、背景大小 */

background-position: bottom;  /*八、背景的位置*/

/*九、复合属性*/
    /* 顺序：颜色，图片，平铺，定位/大小 */
    /*background: red url("images/images1.jpg") no-repeat center/150px 100px;*/
}
</style>
```
# CSS提高

## 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

### 内容：

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

### 解释：

> Margin(外边距) - 清除边框外的区域，外边距是透明的。
> Border(边框) - 围绕在内边距和内容外的边框。
> Padding(内边距) - 清除内容周围的区域，内边距是透明的。
> Content(内容) - 盒子的内容，显示文本和图像。

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1skyAPA3vAAG8_qTOoXo5502878)

### 边框样式

> border(复合样式)，border-color(边框颜色)，border-width(边框宽度)，border-style(边框样式)，border-left(左边框)，border-right(右边框)，border-stop(上边框)，border-bottom(下边框)

```css
<style>
    div {
        width: 200px;
        height: 200px;
        /*border: 1px solid red;  !*复合样式*!*/

border-width: 2px;  /*边框的宽度*/

/*边框样式：dotted(点线)/dashed(虚线)/
        solid(实线)/double(双实线)/groove(凹型线)/ridge(凸型线)*/
        border-style: solid;    /*边框的样式*/

border-color: red;      /*边框的颜色*/

/*单独设置边框的写法*/
        border-left: 2px solid red;     /*左边边框*/
        border-right: 2px dotted blue;  /*右边边框*/
        border-top: 2px double yellow;  /*顶部边框*/
        border-bottom: 2px dashed blueviolet;   /*底部边框*/
    }
</style>
```

### 内边距样式
![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1slyAEJXRAAKGF1WTwrA6253992)

> padding(复合样式)，padding-top(上内边距)，padding-bottom(下内边距)，padding-right(右内边距)，padding-left(左内边距)

```css
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;

padding-left: 50px;
        /*padding-top: 50px;*/
        /*padding-right: 50px;  !*距离右边的边距*!*/
        /*padding-bottom: 50px; !*距离下边的边距*!*/

/*复合样式*/
        /*1、当参数值为一个的时候：上下左右都会*/
        /*padding: 50px;*/

/*2、当参数值为两个的时候：第一个上下  第二个左右*/
        /*padding: 50px 100px;*/

/*3、当参数值为三个的时候：第一个上  第二个左右 第三个下*/
        /*padding: 50px 100px 150px;*/

/*4、当参数值为四个的时候：第一个上  第二个右 第三个下 第四个左*/
        /*padding: 50px 100px 150px 200px;*/

/*内边距的特点：
        1、内边距会撑大盒子
        2、内边距是不能设置负值
        */
    }
</style>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1soaANKABAAHYxDwN5nU6569032)

### 外边距样式

> margin(复合样式)，margin-top(上外边距)，margin-bottom(下外边距)，margin-right(右外边距)，margin-left(左外边距)

```css
<style>
    div {
        width: 100px;
        height: 100px;
    }

#div1 {
        border: 1px solid red;
    }

#div2 {
        border: 1px solid green;
        /*margin-top: -50px;*/
        /*margin-top: 50px;*/
        /*margin-right: 50px;*/

/*margin-top: 50px; !*上外边距*!
        margin-left: 50px; !*左外边距*!
        !*margin-bottom: 50px;!*下外边距*!*!
        margin-right: 50px; !*右外边距*!*/

/*复合样式*/
        /*1、当参数值为一个的时候：上下左右都会*/
        /*margin: 50px;*/

/*2、当参数值为两个的时候：第一个上下  第二个左右*/
        /*margin: 50px 100px;*/

/*3、当参数值为三个的时候：第一个上  第二个左右 第三个下*/
        /*margin: 50px 100px 150px;*/

/*当参数值为四个的时候：第一个上  第二个右 第三个下 第四个左*/
        /*margin: 50px 100px 150px 200px;*/

margin:auto; /*水平居中*/

/*外边距的特点：
        1、不会撑大盒子
        2、可以设置负值
        */
    }
    #div1 span {
        text-align: center;
        /*block(块状元素)/inline(内联元素)/inline-block(行内块状元素)
        如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。*/
        display: block; /*变为块级元素*/
        line-height: 100px;
    }
</style>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1spqAT_ZWAAIRwgvfhzI3394572)

### 盒子阴影

```css
<style>
    h1 {
        font-size: 100px;
        /*text-shadow(文字阴影): 水平距离 垂直距离 模糊距离 阴影颜色;*/
        text-shadow: 10px 3px 3px rgba(0,0,0,.4);
    }
    div {
        width: 200px;
        height: 200px;
        border: 10px solid red;
        /* box-shadow(盒子阴影):水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内阴影（inset）/外阴影（ouset）*/
        /*
        注意：
        1、前两个属性是必须写的。其余的可以省略;
        2、最后一个值不写的话，默认是外阴影。
        */
        box-shadow: 10px 10px 5px 3px rgba(0,0,0,.4) inset;
    }
</style>
```

## CSS浮动

### 文档流

> 像水流，流动的是水，电磁流流动的是电磁。文档流流动的就是元素！可以将屏幕中显示的内容都可以一一对应为文档中的一个元素

### CSS浮动

> 浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。

### CSS浮动的优缺点

> 优点：使元素脱离文档流，按照指定的(左右)方向移动，遇到父级边界或者相邻元素停下来
>
> 缺点：浮动会带来高度塌陷的问题。

```css
<style>
    #main {
        width: 500px;
        /*height: 300px;*/
        background-color: #cccccc;
        overflow: hidden;   /*方法二 可以使浮动元素也参加一个高度的计算*/
        margin: 0 auto;
    }

/*伪元素 在父级元素的最后 方法三*/
    /*#main::after {*/
    /*    content: "";    !*书写我们显示在页面的内容*!*/
    /*    display: block;     !*变为块级元素*!*/
    /*    clear: both;*/
    /*}*/

.clear-float::after {
        content: "";    /*书写我们显示在页面的内容*/
        display: block;     /*变为块级元素*/
        clear: both;
    }

#child1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin-left: 150px;
    }

#child2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }

/*p {*/
    /*    clear: both;    !*清除浮动 方法一*!*/
    /*}*/
</style>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sqeAB6OHAALYFYmM0Sg8164463)

### 解决高度坍塌的办法

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sq-AP6NzAAM_DbUHIxY4920924)

### 浮动的特点

> 浮动的特点：
>
>  脱离文档流。
>
> 向左/向右浮动直到遇到父元素或者别的浮动元素
>
> 浮动会导致父元素高度坍塌。
>
> 浮动元素不占空间

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07 浮动的案例</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li >
            <a href="#">读书</a></li>
        <li>电影</li>
        <li>音乐</li>
        <li>同城</li>
    </ul>
</body>
</html>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sryAI7XiAAARHU_1Vio5454811)

## CSS定位

定位就是将元素定在网页中的任意位置。

### static 静态定位(没有定位)

> 默认

### relative 相对定位

> ht相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08 相对定位</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
        }

#child {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            position: relative;
            margin: auto;
            /*left: 20px;*/ /*只有定位了之后才有这个属性，否则没有*/
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="child"></div>
        111
        
    </div>
</body>
</html>
```

![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1ss6AbD02AAAbgb5A2eo5481837 "undefined")

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1stqAfN7hAALHG7nP4ao9511604)

### fixed 固定定位

> 相对于浏览器窗口进行定位方形词；
>
>  left 、right、 top、 bottom

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10 固定定位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin-bottom: 5px;
        }

.backtop {
            width: 100px;
            height: 50px;
            background-color: green;
            text-align: center;
            line-height: 50px;
            position: fixed;    /*固定定位*/
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    
    <p id="p1">你好呀</p>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="backtop">
        <a href="#p1">返回顶部</a>
    </div>
</body>
</html>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sxuAVJhuAACTF5jGHFc3698170)

### absolute 绝对定位

> 没有占据位置，使元素完全脱离文档流； 没有定位父级，则相对整个文档发生偏移； 参考最近非static定位的父级进行定位
>
> 绝对定位，如果没有父级的话，是相对于整个文档定位，这里的父级定位和父级是两个概念。
>
> 如果有多个父级定位，会使用最近的那个定位

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09 绝对定位</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
            position: relative;
        }

#child {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            left: 20px;
            top: 40px;
        }
    </style>
</head>
<body>
    <!--
            脱标 完全不占据位置
            如果父级没有定位 那么相对的是整个浏览器

父相子绝	解决脱标问题 轮播图
            因为子级是绝对定位，不会占据位置，可以放到父盒子的任何一个地方
            父盒子布局时，需要占据位置，因此父亲只能是相对定位
    -->
    <div class="box">
        <div id="child"></div>
        111
    </div>
</body>
</html>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1syaAKwG_AAJVsfPcnmc0318591)

### 层级

> 当多个窗口在一起的时候会有覆盖，那么到底该显示那个，可以通过层级来控制，z-index 默认都是0，可以通过这个来控制优先级

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11 层级</title>
    <style>
        ul {
            list-style: none;   /*取消前缀*/
            position: relative;
        }

ul li {
            width: 100px;
            height: 100px;
            position: absolute;
        }

.li1 {
            background-color: red;
            z-index: -7;     /*层级*/
        }

.li2 {
            background-color: green;
             z-index: 5;
        }

.li3 {
            background-color: yellow;
        }
    </style>
</head>
<body>
    
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
        <li class="li3">3</li>
    </ul>
</body>
</html>
```

你觉得文章怎么样

已浏览 60 次，0 条评论