CSS

CSS

CSS是什么

层叠样式表 (Cascading Style Sheets).CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.说白了就是让网页变得好看

什么是样式呢？
大小，位置，间距，颜色，字体，边框，背景…统称为样式，也就是描述了一个网页长啥样
什么是层叠呢？
针对一个html的元素/标签，可以同时应用多组css样式，多组样式会叠在一起（就像打游戏的叠buff的感觉），一个元素的属性，由很多方面，描述大小是一个样式，描述颜色，是一个样式，需要把这些样式都叠加起来，才能组成一个漂亮的html页面

基本语法

选择器 + {一条/N条声明}
选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)
声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值

hello

注意:
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

CSS的引入方式

和html，js类似，css也是在浏览器中运行的

1.内部样式

    
    
    
    


    

        滴滴答答滴
    

2.外部样式

3.内联样式

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
   


    
"color: blueviolet; font-size: 200px;">
        滴滴答答滴
    

内联样式的优先级比上面两种高
实际开发中，上述三种写法都很常见

代码风格

样式格式

1. 紧凑风格

p { color: red; font-size: 30px;}

2，展开风格（推荐）

p {
    color: red;
    font-size: 30px;
}

样式大小写

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

空格规范

冒号后面带空格
选择器和 { 之间也有一个空格.

CSS选择器

选择器的功能

选中页面中指定的标签元素.
要先选中元素, 才能设置元素的属性.

选择器的种类

1.基础选择器

（1）.标签选择器

使用标签名，把页面中所有同名标签的元素都选中了
缺点：难以针对某个元素进行个性化定制，比如下面代码想让呃呃呃变成蓝色，就不能只通过标签选择器了，需要搭配别的

    
    
    
   


    
啊啊啊
    
哦哦哦
    
呃呃呃

以上代码就是把所有在div标签里面的东西都变成黄绿色的了

（2）.类选择器

CSS中创建一个类名，这个类名对应一组css属性，让指定的html元素应用这样的类名即可
注意：这里的类和java的类没有任何关系

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
   


    
啊啊啊
    
哦哦哦
    
"eee">呃呃呃


```![在这里插入图片描述](https://img-blog.csdnimg.cn/8678140a7c404dc9a86a0b6876221251.png)
**注意：一个类名是可以被多个标签引用的**
**可以定义很多的CSS类，每个类都是一组属性的集合**
**一个标签还可以引入多个类名，多个类名之间用空格来分割**

比如一大串字符，想让某些字符变色，咋整呢？
比如有  哦哦哦哦哦哦哦哦哦滴滴滴滴哦哦哦哦哦哦，我想让滴滴滴滴变色，加入span就好了

```css
哦哦哦哦哦哦哦哦哦"eee">滴滴滴滴哦哦哦哦哦哦

（3）.id选择器

一个html标签，可以有一个id属性，这个属性的值作为标签的身份标识，在页面中也是唯一的，同样也可以通过id选择器，把这个指定的元素给获取到

上述选择器，是css中最基础的选择器，其实css还有很多复杂的“符合选择器”，这里只介绍一种

2.复合选择器

后代选择器：效果就是把上述三种选择器进行组合，同时能够体现出“标签的层次结构”

CSS选择器种类非常多，用法也很丰富，此处只学习上述四种写法！！！

常用元素属性

属性也就是你的{}里的键值对都能写啥，css这里的属性是非常多的，不要背，多去查,这里只介绍常见属性

字体属性

    
    
    


  

    啊啊啊~~~我的妻~~~王氏~宝钏~~
  
  

以上几个属性的叠加，构造成了下图

文本相关

.two{
        /* 文本颜色 */
        color: brown;
        /* 文本对齐：左对齐（left），右对齐（right），居中（center） */
        text-align: left;
        /* 文本装饰：加个下划线啥的 */
        text-decoration: underline;
        /* 文本缩进，首行缩进多大空间 */
        text-indent: 20px;
         /* 行高（行间距） */
        line-height: 300px;
    }

其中color属性的值，有很多种写法
1.直接写一些表示颜色的单词
2.使用rgb的方式来表示
rgb–red green blue
每个分量都是一个字节，取值范围是0-255

color: rgb(255,0,0);

通过上述的操作，就可以调出一些非常好看的颜色
3.使用十六进制的方式表示（本质也是RGB）

color: #ff0000;
/*红色*/

背景属性

拿个蔡徐坤的照片举例

   .three{
        font-size: 100px;
        width: 2000px;
        height: 1600px;
        color: red;
        /* 设置背景颜色 */
        background-color: pink;
        /* 设置背景图片 */
        background-image: url(image/kun.png);
        /* 禁止平铺 */
        background-repeat: no-repeat;
        /* 垂直居中，水平居中 */
        background-position: center center;
        /* 设置背景大小 */
        background-size: 2000px 1600px;
    }

设置圆角矩形

平常的html页面都是第一种，圆角矩形的第二种

    .four {
            width: 500px;
            height: 300px;
            background-color: red;
            /* 下面是设置圆角矩形，10就是内切圆半径 */
            border-radius: 100px;
        }

对于后端来说，上述交代了这么多属性，不用记！！！！！！！！现在就是看一下，有个印象，之后稍微练习一下，加深一下印象就够了，过几天忘了也没啥，用的时候去查看就好了

盒子模型

边框

基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color

test
div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green;
}

支持简写, 没有顺序要求

border: 1px solid red;

可以改四个方向的任意边框.

border-top/bottom/left/right

以下的代码只给上边框设为红色, 其余为蓝色.
利用到的层叠性, 就近原则的生效.

border: 1px solid blue;
border-top: red;

边框会撑大盒子
可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

* {
    box-sizing: border-box;
}

• 为通配符选择器.

内边距

padding 设置内容和边框之间的距离.
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right

加上 padding 之后

div {
    height: 200px;
    width: 300px;
    padding-top: 5px;
    padding-left: 10px
}

此时可以看到带有了一个绿色的内边距.
注意:
整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒
子).
使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)
复合写法
可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

 div {
 			* {
            /* 此时边框不会撑大元素了.  */
            box-sizing: border-box;
        	}
            width: 500px;
            height: 300px;
            background-color: gray;

            margin-top: 50px; 

            border: red 20px solid; 
            /* 边框还可以分开设置 */
             border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid;

            /* 给四个方向都设置 30px 内边距 */
             padding: 30px; 
            /* 也可以给四个方向分别设置内边距 */
             padding-left: 20px;
            padding-top: 50px; 

            /* 给上下设置 30px, 左右设置 20px */
             padding: 30px 20px; 
             给四个方向分别设置. 上右下左 顺时针顺序设置的
             padding: 10px 20px 30px 40px; 
        }

外边距

基础写法
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right

蛤蛤
呵呵
div {
    background-color: red;
    width: 200px;
    height: 200px;
}
.first {
    margin-bottom: 20px;
}

复合写法
规则同 padding

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

把margin左右方向设置成auto，可以实现让元素水平居中
如果把垂直设为auto，则不能实现元素居中

.two {
            width: 500px;
            height: 300px;
            background-color: gray;
            /* 让元素水平居中 */
            margin-left: auto;
            margin-right: auto;
        } 

弹性布局

刚才说，对于块级元素，默认是独占一行（垂直方向排列的），有时候想让块级元素水平排列，此时就可以使用弹性布局了
下图就是弹性布局

1.flex 布局基本概念
flex 是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
被设置为 display:flex 属性的元素, 称为 flex container

某个元素一旦开启了弹性布局，此时内部的子元素就会按照水平方向排列，子元素内的子元素不受影响
flex就是弹性布局
2.justify-content
设置水平方向的排列规则，是居中，还是靠右靠左，还是分散开

3.align-items
设置垂直方向的排列规则

.one {
            width: 1000px;
            height: 300px;
            background-color: gray;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

本来是

弹性布局之后