前端基础2——CSS3

最新推荐文章于 2022-06-13 12:21:58 发布

Bug一号质检员

最新推荐文章于 2022-06-13 12:21:58 发布

阅读量150

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_44238066/article/details/122760954

版权

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现层（美化网页）
字体，颜色，边距，高宽，背景图片，网页定位，网页浮动。。。

CSS的导入方式

行内样式
内部样式
外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
<!--    外部样式,链接式 链接css文件-->
    <link rel="stylesheet" href="css/style.css">
<!--    外部样式 导入式，不推荐使用-->
    <style>@import "css/style.css";</style>
<!--    内部样式-->
    <style>
/*style标签内只能是css代码，注释样式为“/* * /”*/
        h1{
            color: green;
        }
    </style>
</head>
<body>
<!--行内样式，在标签元素中，添加style属性，参数中直接写声明句-->
<h1 style="color: red">h1</h1>
</body>
</html>

注：在多个样式同时对一个元素进行样式设置时，遵循“就近原则”

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器：

标签选择器：选择页面中所有该标签元素：标签名{}
类选择器：选择页面中所有该类元素：.类名{}
id选择器：选择页面中id对应的元素：#id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*标签选择器:会选择页面上该标签的所以元素*/
        h1 {
            color: green;
        }
        /*类选择器的格式：.class的名字{}*/
        .a{
        color: red;
        }
    /*    id选择器：#ID名称{} 注意：全局id必须唯一*/
        #h{
            font-size: 100px;
        }
    </style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1>标题2</h1>
<p class="a">内容1</p>
<p id="h">内容2</p>
</body>
</html>

注意：在这三个选择器之间，存在明确的优先级，不遵循所谓就近原则，优先级：id选择器＞类选择器＞标签选择器。

层次选择器：

后代选择器: 1 2{}会选择1内所有的2元素
子选择器: 1>2{}会选择1下所有2（只能一代）
相邻兄弟选择器：1+2{}选择！紧跟！1的所有2元素（1可能是多个，每个1最多只能选择一个2）
通用兄弟选择器：1~2{}选择1后面所有兄弟关系的2元素

	/*后代选择器: 1 2{}会选择1内所有的2元素*/
	body p{
	    color: red;
	}
	/*子选择器: 1>2{}会选择1下所有2（只能一代）*/
	body>p{
	    color: green;
	}
	/*相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素
	（1可能是多个，每个1最多只能选择一个2）*/
	p + h1{
	    color: gray;
	}
	/*通用兄弟选择器 1~2{}选择1后面所有兄弟关系的2元素*/
	p~p{
	    color: blue;
	}

注意：其中1、2可以使用包括标签、类、id选择器的格式，且在以上四种选择器之间，应该没有明显优先级，遵循就近原则和基本选择器的优先级。考虑基本选择器的优先级时，以2的优先级为准。

结构伪类选择器

/*第一个元孩子素*/
    nl li:first-child{
        color: red;
    }
    /*最后一个儿子元素*/
    nl li:last-child{
        color: green;
    }
    /*选择第i个 1:nth-child(i)选择1的父元素内的第i个子元素，且只有在父元素的
    第i个子元素是1时，才生效*/
    p:nth-child(1){
        color: gray;
    }
    /*1:nth-of-type(i) 选择1父元素内第i个类型为1的子元素*/
    p:nth-of-type(2){
        color: blue;
    }

属性选择器
通过属性甚至属性的值来选择元素

	/*1[2]{} 存在2属性的1类型的元素*/
    a[id]{
    }
    /*1[2=3]{} 存在2属性的值等于3的1类型的元素
    可以使用*=表包含3或者^=表示以3开头，$=表示以3结尾*/
    a[id="123"]{}

美化网页元素

字体样式
文字的字体、文字大小、颜色等属性

body{
            /*字体 可以设置两种用逗号隔开，中英文分别应用两种*/
            font-family: 楷体;
            /*字体大小*/
            font-size: 50px;
            /*字体粗细*/
            font-weight: bold;
        }
        /*也可一行设置多个属性：*/
        p{
            font: oblique bold 16px 楷体;
        }

文本样式
背景颜色、对其方式、首行缩进、行距和装饰等

/*文字与图片居中对齐*/
	a,b{
		vertical-align: middle
	}
	body{
		/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命
		或者使用rgb()rgba()函数，后者多一个透明度参数*/
		color: rgb(0, 0, 0);
		/*排版：居中等*/
		text-align: center;
		/*首行缩进 em为一个字母位置*/
		text-indent: 2em;
		/*行高和块高，如果一样可以有上下居中的效果*/
		height: 100px;
		line-height: 100px;
		/*上、下、中划线 设置划线颜色大多浏览器不支持
		同时只能有一个划线，应该遵循覆盖的就近原则*/
		text-decoration-color: #d60005;
		text-decoration: underline;
		text-decoration: overline;
		text-decoration: line-through;
		/*超链接去除下划线*/
		text-decoration: none;
		/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/
		text-shadow: black 5px 5px 1px
	}

超链接伪类
让超链接在被选中或者点击等状态时，有不同的形态

	/*正常显示*/
    a{}
    /*鼠标悬浮的状态*/
    a:hover{}
    /*鼠标悬浮未释放的状态*/
    a:active{}
    /*已访问的链接（点过链接紫色的样子）*/
    a:visited{}

列表样式
可以更改列表中点的样式或者去掉点
复习之前内容

#nav{
            width: 300px;
        }
        .title{
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
        }
        ul li{
            height: 30px;
            /*列表的点 none：去除 circle：空心圆 decimal：数字123. square正方形*/
            list-style: none;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }

背景
背景颜色、图片
渐变背景

    div{
         width: 1000px;
         height: 700px;
         border: 1px solid red;
         /*设置背景：默认为平铺*/
         background: image("xxx/xxx.jpg");
         /*横向平铺和纵向平铺不平铺*/
         background-repeat: repeat-x;
         background-repeat: repeat-y;
         background-repeat: no-repeat;
     }

Grabient是一个在GitHub上开源的项目，可以获取各种渐变背景的CSS代码。

盒子模型

元素大小=margi+border+padding+内容

在这里插入图片描述
margin：外边距
padding：内边距
border：边框

border
在最上方选择body标签可以进行边距、字体等的初始化

/*设置默认边距为0 初始化*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        from{
            background: blue;
        }
        #box{
            /*border:粗细，样式，颜色*/
            width: 300px;
            border: 1px solid red;
            /*外边距*/
            padding: 0;
        }
        /*结构伪类选择器搭配子类选择器*/
        /*border: solid实线，dashed虚线*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed black;
        }
        div:nth-of-type(3) input{
            border: 3px dashed black;
        }

margin&padding
可以用来居中


        #box{
            /*可以是1、2、4个参数，1个参数代表上下左右边距一样
            2个参数则分别为上下、左右边距，4个分别为上、下、左、右
            auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/
            margin: 0 auto;
        }

圆角边框
实现按钮等元素的圆角
绘制圆形扇形

	div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        /*边框圆角大小：一个参数则四个角相等
        两个参数则左上右下一样，剩下两个一样
        四个参数则从左上开始顺时针*/
        border-radius: 50px 20px 10px 5px;
        /*可以用来画圆，当圆角大小大于（高宽的一半加上边框粗细）就是圆*/
        border-radius: 60px;
        /*扇形需要三个角为0，另一个圆角大小为（两倍边框粗细加上div的边长）*/
    }

盒子阴影

     div{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         box-shadow: 10px 10px 100px yellow;
     }

浮动

块级元素：独占一行 h1~h6 p div 列表…
行内元素：不独占行 span a img strong…
行内元素可以被包含在块级元素中，反之则不可以。

display和float

        div{
            width: 100px;
            height: 100px;
            border: 1px red;
            /*display: xxx; inline:变为行内元素 block：变为块元素
             inline-block 块元素但是可以内联，在一行*/
            display: inline;
            /*浮动：float 左右浮动*/
            float: right;
            /*clear：不允许有浮动元素 both：两侧 right、lefe：左、右
            none 默认 允许*/
            clear: right;
         }

父级边框塌陷问题
增加父级元素的高度：固定了父元素高度，就会被限制

在父级元素内最底部增加一个空的div块，清除两侧浮动：简单，但代码中应该尽量避免空div

在父类添加一个伪类：稍微复杂，没有副作用，推荐使用

        #father{
            border: 1px #000 solid;
            height: 800;
        }

        .clear{
            padding: 0;
            margin: 0;
            clear: both;
        }

        #father:after{
            content: '';
            display: block;
            clear: both;
        }

overflow
如果块内内容大小超过了块所规定的大小，可以使用overflow来控制隐藏超出部分或者添加块内滚动条。

其中overflow：hidden；放在父元素中，可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。

        #content{
            width: 200px;
            height: 100px;
            /*overflow: ; hidden:超出部分隐藏 scroll：滚动条*/
            overflow: hidden;
        }

定位

相对定位
相对定位：position: relative;

相对于自己原来的位置进行指定的偏移，但是，在标准文档流中，仍然处在原来的位置不变（比如说最后一个div进行向下的偏移，并不会使得父级元素的大小向下扩展）

        div{
            /*相对于自己原来的位置移动*/
            position: relative;
            /*上下左右移动*/
            top: -20px;
        }

绝对定位
定位：基于xxx定位，上下左右
若没有父级元素定位，基于浏览器定位
如果父级元素有绝对或者相对定位，则基于父元素定位
在标准文档流中，原来的位置会被改变

    div{
        position: absolute;
        right: 100px;
    }

固定定位
fixed：相对于窗口定位

        div{
            /*固定定位fixed*/
            position: fixed;
            bottom: 300px;
            left: 50px;
        }

z-index
图层堆叠

        div{
            /*设置图层，默认是0，在最底层*/
            z-index: 10;
            /*设置透明度 此下两句等价*/
            opacity: 0.5;
            filter: alpha(opacity=50);
        }