CSS常用知识（后端开发必备）

ゝ一世哀愁。 2022-10-21 03:44 290阅读 0赞

### 目录 ###

*   *   *  一、CSS和HTML的关系
         *  二、CSS的三种使用方式
         *   *  （一）直接在属性上加 style="属性：值"
             *  （二）在head和body中间加style，在style中编写对应东西
             *  （三）创建CSS文件，在CSS文件中编写并在HTML中引进来
             *   *  1.在head中引用
                 *  在style中引用(style位于head和body中间）
         *  三、选择器
         *   *  （一）元素（标签）选择器
             *  （二）类选择器
             *  （三）id选择器
             *  （四）类选择器与id选择器区别
             *  （五）选择器组
             *  （六）派生选择器
         *  四、伪类（lhva顺序不可变）
         *  五、属性
         *   *  （一）文本属性
             *  （二）背景属性
             *  （三）列表属性
             *  （四）边框属性
             *  （五）轮廓属性
         *  六、定位
         *   *  （一）默认定位
             *  （二）浮动定位
             *  （三）相对定位
             *  （四）绝对定位
             *  （五）固定定位
         *  七、Z轴属性
         *  八、阴影
         *  九、圆角
         *  十、渐变
         *   *  （一）径向渐变
             *  （二）线性渐变
         *  十一、背景
         *   *  （一）背景位置
             *  （二）背景大小

### 一、CSS和HTML的关系 ###

HTML是网页制作的一个架构，而CSS则是美化这个网页的一个工具
        注意: CSS中style编写格式
            	选择器{
        
               		 属性：值
        		 }

### 二、CSS的三种使用方式 ###

#### （一）直接在属性上加 style=“属性：值” ####

#### （二）在head和body中间加style，在style中编写对应东西 ####

#### （三）创建CSS文件，在CSS文件中编写并在HTML中引进来 ####

##### 1.在head中引用 #####

引用方式： head中添加 <link href="CSS文件地址" rel="stylesheet"/> 
    
    <!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.0">
        <title>Document</title>
       <link href="css/01.css" rel="stylesheet"/> 
    </head>
    <body>
        <h1>CSS使用方法3：在head中使用linked</h1>
    </body>
    </html>

1.  ##### 在style中引用(style位于head和body中间） #####
    
        引用方式：style中添加@import url(对应CSS文件地址)
        
        <!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.0">
            <title>Document</title>
        </head>
        <body>
            <h1>CSS使用方法3：在style中使用 @import url(地址) </h1>
        </body>
        </html>
    
    ### 三、选择器 ###
    
    #### （一）元素（标签）选择器 ####
    
        <!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.0">
            <title>Document</title>
        </head>
        <style>
            /*
            	所有p标签字体都会变成红色
            	(也可以有其它格式设置，本处以颜色红举例)
            	标签选择器会选择所有对应的标签，即p标签
            */
            p{
               
                color: red;
            }
        </style>
        <body>
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
        </body>
        </html>
    
    #### （二）类选择器 ####
    
        <!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.0">
            <title>Document</title>
        </head>
        <style>
            /* 
                标签里面加上class="名字"
                .class名字  指定的会变成红色，即段落2以红色显示
            	(也可以有其它格式设置，本处以颜色红举例)
            */
            .p2{
               
                color: red;
            }
        </style>
        <body>
            <p>段落1</p>
            <p class="p2">段落2</p>
            <p>段落3</p>
            <p>段落4</p>
        </body>
        </html>
    
    #### （三）id选择器 ####

<!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.0">
        <title>Document</title>
    </head>
    <style>
        /* 
            标签里面加上id="名字"
            # id名字  指定的会变成红色，即段落2以红色显示
            (也可以有其它格式设置，本处以颜色红举例)
        */
        #p2{
        
            color: red;
        }
    </style>
    <body>
        <p>段落1</p>
        <p id="p2">段落2</p>
        <p>段落3</p>
        <p>段落4</p>
    </body>
    </html>

#### （四）类选择器与id选择器区别 ####

id选择器比类选择器更有限制，相对来说id选择器更窄一点

#### （五）选择器组 ####

<!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.0">
        <title>Document</title>
    </head>
    <style>
        /* 
            如果两个选择器内部设置相同，那么可以合并两个选择器，中间用逗号隔开
        */
        .p2,#p3{
         
            color: red;
        }
    </style>
    <body>
        <p>段落1</p>
        <p class="p2">段落2</p>
        <p id="p3">段落3</p>
        <p>段落4</p>
    </body>
    </html>

#### （六）派生选择器 ####

<!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.0">
        <title>Document</title>
    </head>
    <style>
    
        /* 
            div 标签 ：所有的标签都会变红（此处以变红为例，当然也可有有其它设置）
        */
        div p{
         
            color: red;
        }
    
    </style>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <span>
            <p>p6</p>
            <span>
                <p>p7</p>
            </span>
        </span>
        <p>p8</p>
    </body>
    </html>

<!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.0">
        <title>Document</title>
    </head>
    <style>
    
        /* 
            div > 标签 ：只有最外层的标签都会变红（此处以变红为例，当然也可有有其它设置）
        */
        div > p{
         
            color: red;
        }
    
    </style>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <span>
            <p>p6</p>
            <span>
                <p>p7</p>
            </span>
        </span>
        <p>p8</p>
    </body>
    </html>

### 四、伪类（lhva顺序不可变） ###

<!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.0">
        <title>Document</title>
    </head>
    <style>
        /* 未点击百度一下之前的颜色 */
        a:link{
         
            color:rgb(8, 7, 7)
        }
        /* 鼠标放在百度一下上面的样子 */
        a:hover{
         
            font-size: 50px;
        }
        /* 访问过百度一下的颜色 */
        a:visited{
         
            color: rgb(161, 15, 15);
        }
        /* 鼠标点住百度一下没松开时候的颜色 */
        a:active{
         
            color: lawngreen;
        }
    </style>
    <body>
       <a href="https://www.baidu.com">百度一下</a> 
    </body>
    </html>

### 五、属性 ###

#### （一）文本属性 ####

```java
     		font-family       设置文本字体 ———  
             font-size         设置字体尺寸
             font-weight       设置字体的粗细，一般用 normal/bold（加粗）
             color             字体颜色
             text-align        字体对齐方式
             line-height       行高
             text-decoration     文本装饰，none无，underline下划线
             text-indent       文本缩进
     ```

#### （二）背景属性 ####

background-image:url("图片地址")     设置背景图片
            background-color          设置背景颜色
            background-position           背景图片的位置
            background-repeat          背景的平铺方式———repeat 图片在垂直水平方向上重复
                                                  ———repeat-x  图片在水平方向上重复
                                                  ———repeat-y  图片在垂直方向上重复
                								  ——— no-repeat	  图片不重复																	
                                                  
            background-attachment：fixed；     背景图片固定

#### （三）列表属性 ####

list-style-type:  none 没有标记  disc默认标记（实心圆）
                              circle 标记是空心圆
                              dquare 标记是实心方块
                              decimal 标记是数字
                	          decimal-leading-zero  0开头的数字标记
              				  lower-alpha  upper-alpha  小写大写英文字母

#### （四）边框属性 ####

border-width     边框宽度
            border-color     边框颜色
            border-style     边框样式（solid实线）
            可以分别设置上下左右的样式
            border-right右/left左/bottom下-属性

#### （五）轮廓属性 ####

边框外面的一条线
            outline-width      轮廓宽度
            outliner-color     轮廓颜色
            outliner-style     边框轮廓样式（solid实线，dashed虚线）

### 六、定位 ###

#### （一）默认定位 ####

块级元素可以改变宽高： h,p,div等，自上而下垂直排列
            行内元素不能改变宽高：a,b,span等，自左向右水平排列

#### （二）浮动定位 ####

float: none 不浮动， left贴着左边浮动， right贴着右边浮动
            浮动定位不仅可以靠着左边或右边，还可以消除“块级元素”占一行的特性
            margin 外边距   padding 内边距

#### （三）相对定位 ####

和原来的位置进行比较，进行移动定位(偏移)
            position:relative;
    		top left  如果是对下和右采用top和left的负值即可实现

#### （四）绝对定位 ####

本元素与已定位的祖先元素之间的距离
                如果父级元素定位了，就以父级为参照物
                如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物
                如果爷爷没定位，继续向上找，都没定位的话，body是最终选择
            position: rabsolute;
    		top left  如果是对下和右采用top和left的负值即可实现

#### （五）固定定位 ####

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
            position: fixed;
    		top left  如果是对下和右采用top和left的负值即可实现

### 七、Z轴属性 ###

如果一个部分有多个元素重叠了，那么就需要使用Z轴属性，定义上下层次	
       	    z-index：值；    谁的值越大，谁的层次越靠前，也就是被显现出来

### 八、阴影 ###

box-shadow: 值1 值2 值3 值4 值5;
    		1 水平阴影
    		2 垂直阴影	
    		3 模糊半径
    		4 扩张半径
    		5 阴影颜色

### 九、圆角 ###

border-radius:值;   值可以改变圆角的程度	\
            写一个值代表border-radius:四个角都是这一个值，4个值代表4个角的值
            border-radius:50%; 代表框架是一个圆

### 十、渐变 ###

#### （一）径向渐变 ####

渐变描述的背景颜色,是向外发散，颜色可以多种
    		background:radio-gradient(颜色,颜色);

#### （二）线性渐变 ####

渐变描述的背景颜色,默认渐变色方向是从上到下，颜色可以多种
            background:linear-gradient(颜色，颜色);
    		background:linear-gradient(方向，颜色，颜色);
    		方向： to 方向（例如：to top left）
            background:linear-gradient(角度，颜色，颜色);
    		角度： 数值deg

### 十一、背景 ###

#### （一）背景位置 ####

背景位置设置必须配合边框
       	    background-origin: 值；
       	    值：border-box 从外边框开始
               padding-box  从内边框开始
               content-box  从内边距（内容）开始

#### （二）背景大小 ####

background-size:
    					cover 尽可能把照片放进去，但是div必须满，完全覆盖
                        contain  把照片放进去，div不一定铺满，完全适应