前端CSS

秦朝胖子得加钱

已于 2023-07-21 21:23:48 修改

阅读量380

点赞数

分类专栏：前端文章标签：前端 css

于 2023-07-09 20:48:02 首次发布

本文链接：https://blog.csdn.net/qq_20427967/article/details/131627228

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基础语法

/*
    CSS注释
*/

宽高的百分比是按照父级大小来计算的

CSS样式

CSS应用方式

内联式

在标签上写样式

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

嵌入式

在head标签中写style标签

外联式

样式写到文件中，放到static目录下的css文件，class='c1'，c1是css文件中的变量名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

选择器

id选择器

id标准写法是id唯一性，所以不太常用

类选择器

标签选择器

所有的标签统一设置属性，同时设置多个标签h1,p,h2{color:gold}

属性选择器

后代选择器

找儿子 .类名>儿子标签名

找所有后代 .类名>标签名

背景颜色

背景图片

background-repeat属性
repeat-x：按照x轴平铺
repeat-x：按照y轴平铺
no-repeat：无平铺样式

background-repeat: no-repeat;

background-position: center; 这两个组合一起设置图片位置

background-position: center,top; 中间的顶部

background-attachment: fixed; 固定在一个位置

背景大小

样式覆盖逻辑

无重复全部应用。重复内容按照头部顺序覆盖，和标签内顺序无关。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c2 c1">中国联通</div>
</body>
</html>

声明不要覆盖样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c2 c1">中国联通</div>
</body>
</html>

hover样式(伪类，冒号后边追加的)

hover正常应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
            background-color: gold;
        }
        .c1:hover{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

hover升级应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: red;
            font-size: 18px;
        }

        .c1:hover {
            color: green;
            font-size: 50px;
        }

        .c2 {
            height: 300px;
            width: 500px;
            border: 3px solid red;
        }

        .c2:hover {
            border: 3px solid green;
        }

        .download {
            display: none;
        }

        .app:hover .download {
            display: block;
        }
        .app:hover .title{
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>

<div class="app">
    <div class="title">下载APP</div>
    <div class="download">
        <img src="images/qcode.png" alt="">
    </div>
</div>

</body>
</html>

显示/隐藏

显示 display: none;

隐藏display: block;

after追加(伪类)

相当于后置处理追加内容
只对追加的内容设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: '追加的内容';
            font-size: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1">吴阳军</div>
    <div class="c1">梁吉宁</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: '追加的内容';
            font-size: 50px;
            background-color: green;
            clear: both;
        }
        .c1{
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1">吴阳军</div>
        <div class="c1">梁吉宁</div>
        <div class="c1">梁吉宁</div>
    </div>
</body>
</html>

块级标签和行内标签

宽高

宽高可以设置百分比

块级标签：默认有效（霸道，右侧区域空白，也不给你占用），div

行内标签：默认无效，span

综合块级行级属性

display: inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>
    <span class="c1">联通</span>
    <span class="c1">联通</span>
    <span class="c1">联通</span>
</body>
</html>

5 文字设置

5.1 文字基本设置

大小 font-size: 58px;
颜色 color: #00FF7F;
字体 font-family: Microsoft Yahei;
加粗 font-weight: 50;

文字对齐方式

水平方向居中 text-align: center;

垂直方向居中 line-height: 59px; 文本框对应高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;
            text-align: center; /* 水平方向居中 */
            line-height: 59px; /* 垂直方向居中 */
        }
    </style>
</head>
<body>
    <div class="c1">智利</div>
</body>
</html>

6 浮动模式

飘起来了，飞了，他飞了。没有浮动属性的在地面，会被盖住！

6.1 行内标签浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>

6.2 块级标签浮动

脱离了父类，无法撑起来父类，需要增加

<div style="clear: both;"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item">第一个</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <div>你哦啊呀</div>
</body>
</html>

解决浮动元素对其他元素的影响

7 内边距

内边距，我自己内部设置一点距离。

上下左右为统一值，则为：padding: 20px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            border: 1px solid red;
            height: 200px;
            width: 200px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="outer">
    <div style="background-color: gold;">听妈妈的话</div>
    <div>小朋友</div>
    <span>行内</span>
</div>
</body>
</html>

8 外边距

外边距，我与别人加点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            margin-top:20px;
            background-color: gold;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="c1" ></div>
    <div class="c1" ></div>
</body>
</html>

9 区域居中

margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
            background-color: gold;
        }
        .c2{
            height: 30px;
            width: 50px;
            border: 1px solid red;
            margin: 0 auto;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

在页面正中间居中

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

10 透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1{
            background-color: green;
            opacity: 0.5;
        }
        .c1:hover{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="c1">你好</div>
 </body>
</html>

11 position 定位/位置

11.1 position: fixed;固定定位
11.1.1 永远在窗口的右下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 150px;
            height: 50px;
            border: 1px solid red;
            
            position: fixed;
            right: 100px;
            bottom:100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1">吴阳军</div>
    </div>
</body>
</html>

11.1.2 居中设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 150px;
            height: 50px;
            border: 1px solid red;

            position: fixed;
            right: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1">吴阳军</div>
    </div>
</body>
</html>

11.1.3 全屏覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: bisque;
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1"></div>
    </div>
</body>
</html>

11.2 位置定位

position: relative 相当于参照物，相对定位。相对于自己添加相对属性前的位置，进行移动。
absolute 相当于移动物，绝对定位，相对于已经定位的父级元素进行定位。
通常在使用绝对定位时，会将父级元素设置为相对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;
            height: 100px;
            border: 1px solid red;
            position: relative;
        }
        .c1 .c2{
            width: 110px;
            height: 50px;
            background-color: green;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1">
            <div class="c2">

            </div>
        </div>
    </div>
</body>
</html>

12 border 边框

border: 1px solid red

1px 边框粗细
solid 边框样式，实线。dotted 虚线
red 边框颜色

13 鼠标放上去变为小手

cursor: pointer;

页面布局Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.title{
				background: #0000FF;
				height: 80px;
				margin-bottom: 5px;
			}

			.content{
				background: #FAEBD7;
				height: 1000px;
			}

			.footer{
				margin: 10px;
				background: #9ACD32;
				height: 100px;
			}
			.left{
				width: 15%;
				background: #00FFFF;
				height: 100%;
				float: left;
				margin-right: 2px;
			}
			.right{
				width: 80%;
				background: #FF0000;
				height: 100%;
				float: right;
			}
		</style>
		
	</head>
	<body>
		<!-- 顶部菜单栏 -->
		<div class="title">
		</div>
		<!-- 中间的主题内容 -->
		<div class="content">
			<!-- 左边的菜单 -->
			<div class="left"></div>
			<!-- 右边的内容 -->
			<div class="right"></div>
		</div>
		<!-- 底部的内容 -->
		<div class="footer"></div>

	</body>
</html>

秦朝胖子得加钱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端CSS

垂直方向居中 line-height: 59px;水平方向居中 text-align: center;块级标签：默认有效（霸道，右侧区域空白，也不给你占用），div。上下左右为统一值，则为：padding: 20px;脱离了父类，无法撑起来父类，需要增加。内边距，我自己内部设置一点距离。absolute 相当于移动物。行内标签：默认无效，span。找儿子 .类名>儿子标签名。找所有后代 .类名>标签名。外边距，我与别人加点距离。所有的标签统一设置属性。
复制链接

扫一扫