CSS3.0(Cascading Style Sheet) 层叠级联样式表

太过爱你忘了你带给我的痛 2022-12-06 05:26 157阅读 0赞

**CSS3.0(Cascading Style Sheet) 层叠级联样式表**

--------------------

**快速入门：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS01</title>
        <style> h1 { color: red; } </style>
    </head>
    
    <body>
        <h1>标题一</h1>
    </body>
    
    </html>

![在这里插入图片描述][20200912194035329.png_pic_left]

**CSS的三种导入方式：**

*  **行内样式（优先级最高，但不建议这样写）：**

*  **内部样式表（不建议这样写）：**

<head>
    	<style> h1 { color: red; } </style>
    </head>
    
    <body>
        <h1>标题一</h1>
    </body>

*  **外部样式表（优先级最低，但实现了HTML与CSS的分离，推荐使用）：**

h1 { 
        color: red;
    }

--------------------

**选择器：**

**3种基本选择器：**

*  标签选择器（权重最低）
 *  类选择器
 *  id选择器（权重最高）

/* 标签选择器，会选择所有h1标签 */
    h1 { 
        color: red;
        background: #3cbda6;
        border-radius: 20px;
        font-size: 80px;
    }
    /* 类选择器，会选择所有类名为text-red的元素 */
    .text-red{ 
    	color: red;
    }
    /* id选择器，会选择id为description的元素，id必须保证唯一 */
    #description{ 
    	color: black;
    }

<h1>标题一</h1>
    <p class="text-red">content</p>
    <span class="text-red">content</span>
    <p id="description">some content</p>

**层次选择器：**

*  后代选择器：在某个元素内的元素（包括子代、孙代…）
 *  子选择器：在某个元素内一层的元素（只包括子代）
 *  相邻选择器（一个弟弟选择器）：某个元素 **之后** 的 **一个** 同级选择器
 *  通用选择器（所有弟弟选择器）：某个元素 **之后** 的 **所有** 同级选择器

/* 后代选择器 */
    body p{ 
    }
    /* 子选择器 */
    body>p{ 
    }
    /* 相邻选择器（弟弟选择器） */
    .active + p{ 
    }
    /* 通用选择器（所有弟弟选择器） */
    .active~p{ 
    }

**结构伪类选择器：**

/* div中的第一个p元素 */
    div p:first-child{ 
    }
    
    /* div中的最后一个p元素 */
    div p:last-child{ 
    }
    
    /* div中的最后一个p元素 */
    div p:last-child{ 
    }

**属性选择器：**

/* class为demo中的所有a标签 */
    .demo a{ 
    }
    
    /* 存在id的a标签 */
    a[id]{ 
    }
    
    /* id为first的a标签 */
    a[id=first]{ 
    }
    
    /* href以http开头的a标签 */
    a[href^=http]{ 
    }
    
    /* href以pdf结尾的a标签 */
    a[href$=pdf]{ 
    }

字体样式(字体，字体风格，字体大小，字体粗细，字体颜色)：
    font-family: 楷体;
    font-style:oblique;
    font-size: 40px;
    font-weight: bold
    color: #a13d30;
    
    font: italic bolder 12px "楷体";

文本样式（文本居中对齐，首行缩进两个字母，行高，文本装饰）
    text-align: center;
    text-indent: 2em;
    line-height:30px;
    text-decoration: underline;
    
    文本阴影（阴影颜色，水平偏移，垂直偏移，阴影半径）
    text-shadow: #3cc7f5 -5px 5px 2px
    
    a标签去除下划线：
    text-decoration: none;

**超链接伪类：**

//默认属性 a{ 
    	text-decoration: none;
    	color: #000000;
    }
    
    //鼠标进入 a:hover{ 
    	color: orange
    }
    
    //鼠标按住未松开 a:active{ 
    	color: green
    }
    
    //鼠标点击之后 a:visited{ 
    	color: red
    }

**li 标签的样式：**

//去除圆点
    list-style: none;
    //空心圆
    list-style: circle;
    //数字编号
    list-style: decimal;
    //正方形
    list-style: square;

**背景样式：**

//背景颜色
    background-color: blue
    //背景图片(默认是 repeat 平铺效果)
    background-image: url("");
    //水平平铺,垂直平铺,不平铺
    background-repeat:repeat-x;
    background-repeat:repeat-y;
    background-repeat:no-repeat;

**盒子模型：**  
![在这里插入图片描述][2020091411175344.png_pic_left]

上下外边距为0，左右居中:			margin: 0 auto;	
    上下左右外边距为0:				margin: 0;
    上下外边距为0，左右外边距为1px:	margin: 0 1px;
    设置上左下右外边距:				margin: 0 10px 1px 10px;
    
    上下左右内边距为10px:			padding: 10px;
    上下内边距为0，左右内边距为10px:	padding: 0 10px
    设置上左下右内边距:				padding: 10px 10px 10px 10px

**浮动：**

(图文详细)最通俗易懂的CSS 浮动float属性详解：[https://blog.csdn.net/qq\_36595013/article/details/81810219][https_blog.csdn.net_qq_36595013_article_details_81810219]

**标准文档流：** 元素默认自左往右，从上往下的流式排列方式。分为块级元素和行内元素

块级元素：								display: block;
    block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
    
    行内元素：								display: inline;
    inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
    
    是块元素，但可以内联（在一行）：			display: inline-block;
    简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
    比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
    
    元素不显示也不占用空间：					display: none;

**定位：**

**相对定位（相对自己原本的位置偏移，它原来的位置仍然被保留在标准文档流中）**

相对自己原本位置上移20px，右移20px：
    position: relative;
    top: -20px;
    left: 20px;

**绝对定位（它原来的位置脱离了标准文档流）**

**绝对定位 absolute 一般和 relative 搭配使用，绝对定位的元素会一层一层地寻找父元素，然后相对于 relative 父元素定位，否则相对于浏览器定位**

<body>
        <div class="b g">
            ll
            <div class="a r">
                最外面
                <div class="s b">
                    中间
                    <div class="ss y">
                        最里面
                    </div>
                </div>
            </div>
        </div>
    
        <style> .b { height: 900px; width: 600px; position: relative; } .a { height: 500px; width: 600px; /* position: relative; */ } .s { height: 200px; width: 200px; position: absolute; right: 0px; bottom: 0px; } .ss { height: 50px; width: 50px; } .r { background-color: red; } .b { background-color: blue; } .y { background-color: yellow; } .g { background-color: green; } </style>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left]  
**固定定位（相对于浏览器定位，不随页面滚动而滚动）**

<div class="ss g">
    </div>
        
    <style> .ss { height: 50px; width: 50px; position: fixed; top: 30px; right: 20px; } .g { background-color: green; } </style>

**z-index**

**z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。**

**注释：元素可拥有负的 z-index 属性值。**

**注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）**

**补充：**

**设置元素透明度：**  
opacity: 0.5

[20200912194035329.png_pic_left]: /images/20221123/aaff08e37e594570ade231e8dbf0400d.png
[2020091411175344.png_pic_left]: /images/20221123/53ef8b306c2a4298aa1b50e8368c3c56.png
[https_blog.csdn.net_qq_36595013_article_details_81810219]: https://blog.csdn.net/qq_36595013/article/details/81810219
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/4d978559260642c98e63ba48907f6a30.png