前端篇—css_css导入wolf-CSDN博客

本文链接：https://blog.csdn.net/weixin_42016382/article/details/101070000

文章目录

css的四种引入方式
css选择器(selector)
伪类()
css的属性
文档流

CSS

css的四种引入方式

直接写在标签中,用分号隔开

<div style='background-color:red;color:yellow'>这里的背景是红色，字是黄色</div>

写在head标签中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            color:yellow;
        }
    </style>
</head>
<body>
    <div>这里的背景是红色，字是黄色</div>
</body>

写在css文件中，用link导入
建议使用方法

<!--css文件：style.css-->
div{
	background-color: red;
	color:yellow;
	}

<!--html文件style.html-->
<head>
	<link type='text/css' rel='stylesheet' href='style.css'>
</head>
<body>
	<div>这里的背景是红色，字是黄色</div>
</body>

import 导入
不建议用：在页面全部加载完之后，再整体渲染

<!--css文件：style.css-->
div{
	background-color: red;
	color:yellow;
	}

<!--html文件style.html-->
<head>
	<style>
		@import'style.css';
	</style>
</head>
<body>
	<div>这里的背景是红色，字是黄色</div>
</body>

4种方法的输出页面：

css选择器(selector)

基础选择器

<style>
	*{
		<!--通配符，选择全部-->
	}
</style>

标签选择器

<style>
	p{
		<!--选择所有p标签-->	
	}
</style>

css选择器

<style>
	#p1{
		<!--选择所有id='p1'的标签-->	
	}
	.p2{
		<!--选择所有class='p2'的标签-->
	}
</style>

多项选择器

<style>
	p,div,.span1{
		<!--选择所有p标签-->	
	}
</style>

后代选择器

<style>
	#div1 p{
		<!--选择id='div1'的后代中的所有p标签-->
	}
</style>

子代选择器

<style>
	#div1>p{
		<!--选择id='div1'的子代中的所有p标签-->
	}
</style>

毗邻选择器

<style>
	#div1+p{
		<!--选择id='div1'后面紧挨着的一个p标签，如果没有就没用-->
	}
</style>

属性选择器

<head>
	<style>
		[class]{
			<!--选择所有有class属性的标签-->
		}
		[class='div1']{
			<!--选择所有class='div1'的标签-->
		}
		[class~='div2']{
			<!--选择所有class='div1 div2'中含有div2的标签-->
		}
		[class^='div1']{
			<!--选择所有class='div1 div2'以div1开头的标签-->
		}
		[class$='div2']{
			<!--选择所有class='div1 div2'以div2结尾的标签-->
		}
		[wolf]{
			<!--可以自己写一个属性，选择所有有wolf属性的标签-->
		}
		div[class='p']{
			<!--选择div标签中class='p'的标签-->
		}
	</style>
</head>

<style>
	p:after{
		content:'add';
		color:red;
	} 
	p:before{
		content:'add';
		color:yellow;
	} 
<!--在p标签文本前后添加文本和样式-->
</style>

伪类()

<head>
	<style>
		a:link{
			<!--未选择样式-->
			}
		a:hover{
			<!--鼠标悬浮时样式-->
		}
		.a1:hover .a2{
			// 鼠标悬浮在a1时，a2改变样式
		} 
		a:visited{
			<!--访问后样式-->
		}
		a:active{
			<!--鼠标点击时样式-->
		}
	</style>
</head>
<body>
	<a href='https://blog.csdn.net/weixin_42016382/article/details/100873921'></a>
</body>

css的属性

颜色代码表

color/font-size/font-weigth/font-family/height/width/line-height/position/display/z-index/opacity/float/clear/overflow/visibility

hover/active/after/before

padding/marign/border/border-radius/

字体属性

    <style>
        div{
            /*字体颜色*/
            color:red;
            /*color:#G3c;*/
            /*color:#GG33cc*/
            /*color:rgb(255,255,255)*/
            /*字体大小*/
            font-size:45px;
            /*字体粗细(0,100,200~900,bold,bolder,lighter...)*/
            font-weight:900;
            /*font-style:italic;*/
            /*字体样式*/
            font-family:'Times New Roman';
            /*字体居中：center、left、right*/
            text-align: center;
            /*背景行高*/
            height: 100px;
            /*文本行高：文本上下居中*/
            line-height: 100px;
            /*单词间距*/
            word-spacing: 5px;
            /*字母间距*/
            letter-spacing: 2px;
            /*文本转换格式*/
            text-transform: capitalize;
            /*宽度*/
            width:50%;
        }
    </style>

背景属性

<style>
	/*background-color: #cc3399;*/
    /*background-image: url('ico.png');*/
    /*!*平铺方式：repeat/no-repeat*!*/
    /*background-repeat: no-repeat;*/
    /*位置*/
    background-position: center center;
    background: url('ico.jpg') no-repeat 100px 50px red;
</style>

边框属性

<style>
	/*3种边距都可以设置4个方向*/
    /*盒子之间的间距/居中*/
    margin:0 auto;
    /*margin-bottom: 1px;*/
    /*margin-left: 1px;*/
    /*margin-right: 1px;*/
    /*margin-top:1px;*/
    /*盒子边框：粗细/颜色/样式*/
    border:1px red groove;
    padding:1px;
</style>

列表属性

ul,ol{
	list-style:decimal-leading-zero;
	list-style:none;<br>	list-style:circle;
	list-style:upper-alpha;
	list-style:disc;
}

display属性
块级标签内联标签转换

<style>
	div{
		display:block;/*none;inline;inline-block;*/
	}
</style>

a标签属性

a{
	text-decoration: none;	/*设置超链接下划线格式*/
}

文档流

正常文档流：
脱离文档流：

1. float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

设置左float：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            /*设置左浮动设置左浮动设置左浮动设置左浮动*/
            float:left;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

<style>
	.div2{
            height:50px;
            width:50px;
            background-color: green;
            /*设置右浮动设置右浮动设置右浮动设置右浮动*/
            float:right;
        }
</style>

在这里背景会浮动覆盖，但是文本不会被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:gold;
        }
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            float:left;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="div1">111</div>
    <div class="div2">222</div>
    <div class="div3">333</div>
</body>
</html>

2. clear

    <style>
        div{
            color:gold;
        }
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            float:right;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
            /*clear:right;*/
        }
    </style>

    <style>
        div{
            color:gold;
        }
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            float:right;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
            /*右边清除，右边有浮动时自动向下移*/
            clear:right;
        }
    </style>

clear解决浮动混乱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        div{
            color:gold;
            font-weight: 900;
        }
        .top{
            background-color: blue;
        }
        .div1{
            width: 200px;
            color:black;
            float: left;
        }
        .div2{
            width: 200px;
            float: left;
        }
        .bottom{
            background-color: #cc3399;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="div1">111111111</div>
        <div class="div2">222222222</div>
    </div>
    <div class="bottom">3333333</div>
</body>
</html>

这里并不能得到我们想要的浮动结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        div{
            color:gold;
            font-weight: 900;
        }
        .top{
            background-color: blue;
        }
        .div1{
            width: 200px;
            color:black;
            float: left;
        }
        .div2{
            width: 200px;
            float: left;
        }
        .div3{
            clear:both;
        }
        .bottom{
            background-color: #cc3399;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="div1">111111111</div>
        <div class="div2">222222222</div>
        <div class="div3"></div>
    </div>
    <div class="bottom">3333333</div>
</body>
</html>

在浮动标签下面添加一个空标签，设定样式 clear:both; 隔离下面的标签，解决浮动混乱

清除浮动的主流方法：

<style>
	// 写这样一个样式：
	.clearfix:after{		// 在浮动的盒子父级最后添加以下盒子
		content:'...';		// 盒子内容(随意，但不能为空)
		display:block;		// 使盒子为块级元素，占整行
		clear:both;			// 隔离上面的浮动元素
		visibility:hidden;	// 隐藏盒子文本内容content
		height:0;			// 使盒子高度为0，不占页面位置
	}
</style>
// 用这样一个空标签来隔离浮动

3. overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        div{
            color:gold;
            font-weight: 900;
        }
        .top{
            background-color: blue;
            overflow: hidden;
        }
        .div1{
            width: 200px;
            color:black;
            float: left;
        }
        .div2{
            width: 200px;
            float: left;
        }
        .bottom{
            background-color: #cc3399;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="div1">111111111</div>
        <div class="div2">222222222</div>
    </div>
    <div class="bottom">3333333</div>
</body>
</html>

在外层class='top’的样式加入 overflow:hidden; 也能实现正确的需求。隐藏超出部分

4.position

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        .div1{
            height: 1000px;
            background-color: aqua;
        }
        .div2{
            height: 1000px;
            background-color: aquamarine;
        }
        .a{
            position: fixed;/*固定标签*/
            bottom:10px;
            right:10px;
        }
    </style>
</head>
<body>
    <div class="div1" id="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <a class="a" href="#div1">回到顶部</a>
</body>
</html>

在滚动条的滚动中，标签有position:fixed的标签位置固定

2.position:relative; 改变盒子位置，不脱离文档流，以原位置为基础移动。
2. position:absolute; 改变盒子位置，脱离文档流，后面的盒子前移，该标签会向上找有position:releative; 的前辈标签为基础移动，找不到时以html为基础移动。
对于脱离文档流的，即 position:absolute; 使用 text-align:center; 时，必须加入宽度 width:100%; 脱离文档流后，不指定宽度，盒子不知道浏览器宽度，无法居中

悬浮示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
            margin:0;
        }
        .left{
            float:left;	// 左飘
        }
        .right{
            float:right;	// 右飘
        }
        .pg-head{		// 上部分背景，基本样式
            height:48px;
            background-color: deepskyblue;
            line-height: 48px;
        }
        .pg-head .logo{		// logo样式，background
            width:200px;
            height:48px;
            text-align: center;
        }
        .pg-head .info{		// 右侧头像部分样式及position定位前提relative
            width: 100px;
            height:48px;
            position:relative;
            right:200px;
            text-align: center;
        }
        .pg-head .info:hover{		// 头像悬浮样式
            background-color: darkgray;
        }
        .pg-head .info:hover .accessory{		// 鼠标悬浮到头像时，展示额外内容
            display: block;
        }
        .pg-head .info .a img{		// 头像样式
            width:40px;
            height:40px;
            border-radius: 50%;
            margin: 4px;
        }
        .body-left{		// 下部分左边菜单基本样式
            width:200px;
            position: absolute;
            top:50px;
            bottom:0;
            left:0;
            border:1px red solid;
        }
        .body-right{		// 下部分右边主要内容样式
            z-index: 9;		// 与头像额外内容分层
            position: absolute;
            left: 210px;
            right:0;
            bottom:0;
            overflow: auto;
            top:50px;
            border:1px red solid;
        }
        .pg-head .info .opr{		// 额外内容标签样式
            display: block;
            background-color: deepskyblue;

        }
        .pg-head .info .accessory{		// 额外内容整体样式及position定位
            display: none;
            text-align: center;
            line-height:48px;
            width: 100px;
            height: 48px;
            position: absolute;
            top:48px;
            z-index: 10;
        }
        .pg-head .info .accessory a:hover{		// 额外内容鼠标悬浮样式
            background-color: darkgray;
        }
    </style>

</head>
<body>
    <div class="pg-head">
        <div class="left logo">Python</div>
        <div class="right info">
            <a class="a">
                <img src="09.jpg">
            </a>
            <div class="accessory">
                <a class='opr'>用户信息</a>
                <a class="opr">注销用户</a>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="body-left"></div>
        <div class="body-right">
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>

        </div>
    </div>
<script src="jquary-3.4.js"></script>
<script>

</script>
</body>
</html>