css基础操作知识点总结

最新推荐文章于 2024-04-19 06:06:10 发布

3379

最新推荐文章于 2024-04-19 06:06:10 发布

阅读量205

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weizheng751676/article/details/122579915

版权

css层叠样式表

定义网页外观样式，网页长什么样

div在页面布局中，主要作为承载内容的容器，没有任何的默认样式

1、css的引入方式

1.1、行间引入：

<body>
    <!-- 
        在标签的行间使用style属性，为标签设置css样式
        css样式编写的语法格式：
            css样式名称: 值;
        弊端：
            代码重复度高、代码冗余度高、代码可读性差、没有实现样式与结构的分离！
     -->
    <div style="width: 200px; height: 200px; background-color: red;"></div>
    <div style="width: 200px; height: 200px; background-color: red;"></div>
</body>

1.2、内部引入：

<!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>css引入方式2：内部引入</title>
    <!-- 
        在head标签内部，使用style标签，为标签设置css样式(选择器)
        弊端：
            没有从本质上实现样式与结构的分离！
            当前页面中编写的css样式，无法应用于其他的页面
     -->
     <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
     </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

1.3、外部引入（实际开发应用最广）

<!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>

	<!-- 一个html文件中可以设置链接多个css文件 -->
	<link rel="stylesheet" href="路径（在外部创建css文件）" >
	<link rel="stylesheet" href="路径" >
</head>
<body>
	<h3>hjhjhj</h3>
	<p>dcsvsvsfv</p>
</body>
</html>

2、选择器

选择器优先级顺序：

标签<类class<id<行间引入style

2.1、标签选择器

<!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>
	<style>
	//所有的div都具备这样的样式
		div {
				font-size: 30px;
				font-weight: bold;
		}
	</style>
</head>
<body>
	<div>哈哈哈</div>
	<div>嘿嘿嘿</div>
</body>
</html>

2.2、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>
	
	<style>
		#div1 {
				color: red;
		}
		#div2 {
				color: blue;
		}
	</style>
	
</head>
<body>
	<div id="div1">哈哈哈</div>
	<div id="div2">嘿嘿嘿</div>
</body>
</html>

2.3、类class选择器

<!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>
	
	<style>
		.blod {
			font-weight: bold;
		}
		.italic {
			font-style: italic;
		}
	</style>
	
</head>
<body>
	<div id="div1" class="blod">哈哈哈</div>
	<div id="div2" class="italic">嘿嘿嘿</div>
</body>
</html>

3、css样式的设置

3.1、尺寸的设置

<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>
	
	<style>
		body {
			height: 2000px;
		}
		div {
				width: 50%;
				height: 20%;
				background-color: red;
		}
	</style>
	
</head>
<body>
	<div>哈哈哈</div>
</body>

3.2、边框的设置

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            
            /* 分开设置标签的四条边框 */
            border-left: 10px blue solid;
            border-right: 10px green dashed;
            border-top: 10px orange dotted;
            /* 
                在css样式中涉及到颜色的赋值：
                英文单词
                十六进制代码
                rgb(三原色值)
            */
            border-bottom: 10px rgb(69,76,91) double;
            /* border-width: 10px;
            border-color: black; */
            /* 
                solid 实体线
                dashed 虚线
                dotted 点状线
                double 双层线
            */
            /* border-style: solid; */

            /* 边框设置的复合写法 */
            /* border: 10px blue solid; */
        }
    </style>
</head>
<body>
    <div></div>    
</body>
</html>

3.3、边框圆角 border-radius

边框脚边有四个：左上、右上、右下、左下

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;

            /* 分别设置标签四个方向的圆角效果 */
            /* border-top-left-radius: 30px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 90px;
            border-bottom-right-radius: 120px; */

            /* 一起给定圆角 */
            /* border-radius: 100px; 四个圆角效果一致 */
            /* border-radius: 50px 100px; 左上右下  右上左下 */
            /* border-radius: 50px 100px 150px; 左上    右上左下    右下 */
            /* border-radius: 30px 60px 90px 120px; 左上 右上 右下 左下 */

            border-radius: 30px 120px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

3.4、文本样式

常用样式：
color：字体颜色
英文单词、十六进制代码、rgb(0_255，0255, 0~255)
font-size：字体大小
font-weight：字体加粗效果
bold值，可以实现字体加粗效果
font-style：字体样式
italic值，可以实现字体倾斜
font-family：字体，想要呈现不同的字体，首先你得保证浏览器内能有识别的字体库！
text-decoration：文本修饰
underline下划线、overline上划线、line-througn删除线、none无修饰
text-align：文本横向的对齐方式
默认值left左对齐、center居中对齐、right右对齐
letter-spacing：字符间距
line-height: 行高
单行文本行高与容器高度一致，可以实现垂直居中
多行文本行高的设置会影响行与行之间的距离，为了确保行间距产生，那么行高的值要大于字体大小

四个font开头的：size、weight、style、family
两个text开头的：align、decoration
三个没有规律的：color、letter-spacing、line-height

3.5、背景样式

背景样式的常用属性：
background-color：背景颜色
background-image：url(“路径”) 背景图片
background-size：背景图片的尺寸
background-repeat：背景重复效果
默认值为repeat，既有横向重复，也有纵向重复
repeat-x，只有横向重复
repeat-y，只有纵向重复
no-repeat，没有重复
background-position：背景图片的位置
background-position-x，设置背景图片的横向位置：left、center、right
background-position-y，设置背景图片的纵向位置：top、center、bottom
background-position：横向位置纵向位置

3.6、伪类选择器

主要针对a标签来使用，为了确保伪类选择器都可以起作用，我们在书写时，必须按照Java的顺序书写

<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>
    <style>
        a {
            font-size: 30px;
        }
        /* 未被访问时 */
        a:link {
            color: red;
            text-decoration: none; 		//文本修饰无
        }
        /* 访问过后 */
        a:visited {
            color: greenyellow;
        }
        /* 鼠标悬停时 */
        a:hover {
            color: purple;
            text-decoration: underline;  //文本修饰为下划线
        }
        /* 正在访问 */
        a:active {
            color: deeppink;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div:hover {
            background-color: blue;
        }
    </style>
</head>
<body>
    <a href="#">伪类选择器</a>
    <div></div>
</body>
</html>

3.7、盒模型

盒模型，是每个标签都具备的内容，组成部分，从外往内分别是：
外边距margin
边框border
内边距padding
内容content

margin:100px 200px 300px 400px;  /*上右下左*/

3.7.1、margin的冲突问题

margin如果在纵向产生了冲突，取大作为两者之间的距离
margin如果在横向产生了冲突，取和作为两者之间的距离

3.7.2、margin的横向居中

margin: 50px auto

3.7.3、在盒模型的加持下，一个元素，现在显示的范围应该包含哪些内容？

横向：边框左侧+左侧的内填充padding+宽度width+右侧的内填充padding+边框右侧
纵向：边框上侧+上侧的内填充padding+高度height+底部的内填充padding+边框底侧

3.7.4、在盒模型的加持下，一个元素的作用范围包含哪些内容？

横向：边框左侧+左侧的内填充padding+宽度width+右侧的内填充padding+边框右侧+左右侧的外边距margin
纵向：边框上侧+上侧的内填充padding+高度height+底部的内填充padding+边框底侧+上下侧的外边距margin

3.8、浮动float

div本身是不能一行多个显示的，它是独占一行显示的，为了达到这样的横向排版效果，我们就可以使用浮动解决这个问题

<!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>
    <style>
        #div1 {
            width: 100px;
            height: 50px;
            background-color: red;
            float: left;
        }
        #div2 {
            width: 150px;
            height: 75px;
            background-color: blue;
            float: left;
        }
        #div3 {
            width: 200px;
            height: 100px;
            background-color: orange;
            float: right;
        }
        #clearDiv {
            clear: both;   //清除浮动
        }
        #testDiv {
            width: 600px;
            height: 300px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="clearDiv"></div>
    <div id="testDiv"></div>
</body>
</html>

3.9、定位position

默认值为static，元素的排版就是默认的排版，按照从左到右、从上到下显示
当元素设置了定位position之后，就可以通过left、right、top、bottom这四个属性，来改变元素的位置！！！

3.9.1、relative相对定位

relative，相对定位。偏移的参照为自身原先的位置
left正值向右偏移、right正值向左偏移、top正值向下偏移、bottom正值向上偏移
而且元素偏移之后，原先的位置依旧存在

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				font-weight: bold;
				font-size: 50px;
				float: left;
				border: 1px black solid;
			}
			#div1 {
				background-color: red;
			}
			#div2 {
				background-color: blue;
				position: relative;   	/*相对定位  */
				left: 50px;	    /*向右偏移50px*/
				top: 100px;    /*向下偏移50px*/
			}
			#div3 {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="div1">1</div>
		<div id="div2">2</div>
		<div id="div3">3</div>
	</body>
</html>

3.9.2、absolute绝对定位

a、如果元素设置了定位属性为absolute，其父级或者父级的父级设置了定位属性，那么偏移参照就是这个设置定位属性的父级元素：

left正值，从父级左侧向右偏移
right正值，从父级右侧向左偏移
top正值，从父级顶部向下偏移
bottom正值，从父级底部向上偏移

<!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>
    <style>
        #big {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;   /*相对定位   相对网页定位*/
        }
        #small {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;   /*绝对定位   根据父级big进行定位*/
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="small">哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div>
    </div>
</body>
</html>

b、如果元素设置了定位属性为absolute，其父级或者父级的父级没有设置定位属性，那么偏移参照就是当前网页。

c、fixed，固定定位。定位的参照物为浏览器的可视化窗口

		left正值，浏览器可视化窗口左侧向右偏移
		right正值，浏览器可视化窗口右侧向左偏移
		top正值，浏览器可视化窗口顶部向下偏移
		bottom正值，浏览器可视化窗口底部向上偏移

<!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>
    <style>
        body {
            height: 2000px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            position: fixed;   /*fixed固定定位，定位的参照物为浏览器的可视化窗口*/
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>我是一段测试流氓广告的标题！</h1>
    <div>流氓广告</div>
</body>
</html>

3379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础操作知识点总结

css层叠样式表定义网页外观样式，网页长什么样div在页面布局中，主要作为承载内容的容器，没有任何的默认样式1、css的引入方式1.1、行间引入：<body> 
复制链接

扫一扫