CSS基础学习

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

cqq00

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

阅读量262

点赞数

分类专栏：前端基础文章标签： css 学习前端

本文链接：https://blog.csdn.net/cqq00/article/details/126231979

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一，选择器

1. 标签选择器

使用标签名作为选择器

   p {
            color: red;
            font-size: 20px;
        }

2.类选择器

以.开头，后边名称自定义

 .p3{
            color: aliceblue;
        }
 <p class="p3">段落1</p>

在标签内使用class属性来引用类选择器的样式

3.ID选择器


 #p3{
     color: aliceblue;
    }
 <p id="p2">段落1</p>

在标签内定义id属性，id值与ID选择器的名字保持一致
优先级;ID选择器 > 类选择器 > 标签选择器
高优先级选择器的样式会覆盖低优先级选择器的样式

4.后代选择器

  后代选择器：
       选择器1 选择器2 选择器3 ...{
           样式声明;
       }
       后代选择器中的每个选择器可以是基本选择器的任意一种，只要能准确定位到想要渲染的标签即可
       子代选择器：
       选择器1 > 选择器2{
           样式声明;
       }
       子代选择器只能选择孩子节点

   <style type="text/css">
            div p span{
                color: red;
            }
            
            #div2 > #p3{
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                段落1
                <span>span1</span>
            </p>
        </div>
        <span>span2</span>
        
        <div id="div2">
            <p id="p3">段落3</p>
            <p >
                <span>span3</span>
            </p>
        </div>
    </body>

5.属性选择器

属性选择器：
   标签名[属性1][属性2]...{
       样式声明;
   }

举例

  a[href][target]{
         color: aqua;
     }  表示同时包含href和target属性的所有a标签
     
     a[href*='baidu'][target]{
         color: aqua;
     }  表示同时包含href和target属性，并且href属性包含baidu字符串的所有a标签
     a[href^='http'][target]{
              color: aqua;
     }  表示同时包含href和target属性，并且href属性以http开头的所有a标签
     a[href$='com'][target]{
              color: aqua;
     }  表示同时包含href和target属性，并且href属性以com结尾的所有a标签
     
     *:通配符，表示所有标签
     *[href$='com'][target]{
              color: aqua;
     }  表示同时包含href和target属性，并且href属性以com结尾的所有标签

6.群组选择器

群组选择器：
   当不同的标签元素要使用同样的样式渲染的时候使用
   每个选择器之间以英文逗号隔开
   p,
   span,
   ul li{
       color: red;
   }
   群组选择器中的单个选择器可以使用任意一种选择器，比如：基本选择器，组合选择器
   通配:*表示所有标签

二，css基础设计

1.引入css

引入css样式的三种方式：
   1.内联方式，在标签内使用style属性来加载样式
   <div style="background-color: red;">文字</div>
   2.内部样式表，css样式代码写在html文档中，使用style标签对作为css代码的环境
   3.外部样式表：css样式单独写在css文件中，在html文件中通过link或者@import方式引用
   优点：
   1.实现代码分离
   2.实现代码的复用

   区别：
   link：在html文档加载完成之前引入css
   @import:在html文档加载完成之后在引入css，问题:当网络环境差的情况下，页面会发生闪动的情况

   
    <link href="css/css_demo03.css" rel="stylesheet"/>
    <!-- <style>
        @import url("css/css_demo03.css");
    </style> -->
    <body>
        <p>段落1</p>
        <span>sapn</span>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
        
        <div style="background-color: red;">文字</div>
    </body>

2.盒子模型

margin：外边框。这是盒子的“外壳”，也就是盒子的最外层。 border：边框。这是盒子的第二层（由外而内）。

padding：内边框。这是盒子的最后一层。 width和height：是盒子内容（content）的宽度和高度。在style标签中书写CSS代码。style标签写在head标签中。 > 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

bordersytle属性可取值：

none：定义无边框。

hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted：定义点状边框。在大多数浏览器中呈现为实线。

dashed：定义虚线。在大多数浏览器中呈现为实线。

solid：定义实线。

double：定义双线。双线的宽度等于 borderwidth 的值。

groove：定义 3D 凹槽边框。其效果取决于 bordercolor 的值。

ridge：定义 3D 垄状边框。其效果取决于 bordercolor 的值。

inset：定义 3D inset 边框。其效果取决于 bordercolor 的值。

outset：定义 3D outset 边框。其效果取决于 bordercolor 的值。

inherit：规定应该从父元素继承边框样式。

元素的可见宽度：width+左padding+右padding+左border+右border
元素的可见高度：height+上padding+下padding+上border+下border

元素的总宽度：元素的可见宽度+左margin+右margin
元素的总高度：元素的可见高度+上margin+下margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				/* margin-top: 50px;
				margin-bottom: 50px; */
				/* 四个参数：上，右，下，左 顺时针顺序*/
				/* margin: 20px 30px 40px 50px; */
				/* 三个参数：上，左右，下*/
				/* margin: 20px 30px 40px ; */
				/* 两个参数：上下，左右*/
				/* margin: 20px 30px ； */
				/* 一个参数：上下左右*/
				/* margin: 20px ； */
				
				width: 100px;
				margin: 100px auto;
				
				/* border-top-width:1px;
				border-top-style: solid;
				border-top-color: aqua; */
				/*三个参数：width,style,color;*/
			/* 	border-top: 1px solid red;
				border-left: 1px solid red;
				border-bottom: 1px solid red;
				border-right: 1px solid red; */
				
				border: 1px solid red;	
				/* 四个参数：上，右，下，左 顺时针顺序
				三个参数，两个参数，一个参数顺序同margin
				*/
				padding:10px 12px 15px 20px ;
				text-align: center;
			
			}
		</style>
	</head>
	<body>
		<p>段落</p>
	</body>
</html>

3.CSS display、浮动、定位

3.1 标准文档流

标准文档流：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#div1{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			background-color: red;
		}
		#div2{
			width: 50px;
			height: 50px;
			border: 1px solid green;
			background-color: green;
			margin: 50px;
			padding: 25px;
		}
		#div3{
			width: 50px;
			height: 50px;
			border: 1px solid yellow;
			background-color: yellow;
			
		}
	</style>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					&nbsp;
				</div>
			</div>
		</div>
	</body>
</html>

3.2 display

display:可以脱离标准文档流
       inline:行内元素
       block：块级元素
       inline-block:同时具有行内和块级元素的特性
       none:可以实现元素隐藏功能

inline-block产生的问题
       1.元素之间有缝隙
       2.当元素的文本换行时，其他元素跟文本的最后一行对齐
       3.没有文字环绕效果

 
        <style>
            div{
                border: 1px solid red;
                width: 100px;
                height: 100px;
                display:inline-block;
            }
            span{
                border: 1px solid gray;
                display: inline-block;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>文字1</div>
        <div>文字2</div>
        <span>span1</span>
    </body>

3.3 float

1.float：浮动，left：向左，right：向右

2.两个标签之间没有缝隙

3.文字有环绕效果

4.设置float后，需要手动设置标签的宽高，否则宽高随着内容自适应

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>浮动</title>
<style type="text/css">
body{
margin: 0px;
}
#div1{
width: 200px;
height: 200px;
backgroundcolor: red;
float: right; /*left、right*/
}
#div2{
width: 200px;
height: 200px;
backgroundcolor: green;
float: right;
}
</style>
</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>

4.position定位

position 属性用来指定一个元素在网页上的位置，

一共有4种定位方式： 1. static 2. relative 3. fixed 4. absolute

4.1 static

static 是 position 属性的默认值。按标准文档流的格式排列元素，元素与元素之间不产生重叠

4.2 relative

相对定位：relative
相对于自己原来的位置进行偏移 top,left,right,bottom
偏移的空间不会被释放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		div{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			background-color: aqua;
			position: relative;
			top: 20px;
			left: 20px;
		}
		span{
			
		}
	</style>
	<body>
		<div>div1</div>
		<span>sapn</span>
	</body>
</html>

4.3 absolute
绝对定位：absolute
以父级元素的左上角为中心点进行位置偏移
前提：
父级元素要有定位的样式属性，如果父级元素没有做定位，则向上继续查找，知道body元素，然后以body左上角为中心进行偏移
absolute和float都会脱离标准文档流，两个不能同时使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			#div1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			#div2{
				width: 100px;
				height: 100px;
				border: 1px solid yellow;
				position: absolute;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">&nbsp;</div>
		</div>
	</body>
</html>

4.4 fixed
固定定位：fixed

生成绝对定位的元素，相对于浏览器窗口进行定位，将元素固定在特定的位置上，需要添加偏移属性：top，bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			body{
				margin: 0px;
			}
			#div1{
				width: 100%;
				height: 50px;
				background-color: red;
				position: fixed;
				top: 0px;
			}
			.div2{
				height: 400px;
				border: 1px solid gray;
			}
		</style>
	</head>
	<body>
		<div id="div1">导航</div>
		<div class="div2">div2</div>
		<div class="div2">div3</div>
	</body>
</html>

5.案例

使用css制作用户注册界面

0<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0px;
			}
			.main{
				width: 100%;
				font-family:"方正舒体" ;
			}
			.top{
				width: 100%;
				height: 20px;
				background-color: aliceblue;
			}
			.center{
				width: 100%;
				height: 20px;
				
			}
			.sp{
				height: 18px;
				font-size: 25px;
				margin-top: 3px;
				
			}
			.sp1{
				border-bottom: 5px solid aqua;
			}
			.bottom{
				width: 100%;
				height: 600px;
				margin-top: 30px;
				margin-left: 50px;
				font-size: 20px;
				
			}
			input{
				
				margin-top: 20px;
				border-radius: 5px;
				
			}
			.inp{
				width: 300px;
				height: 20px;
				border: 2px solid aqua;
			}
			select{
				width: 120px;
				height: 30px;
				margin-top: 5px;
				border-radius: 5px;
				font-family:"方正舒体" ;
				border: 2px solid aqua;
			}
			textarea{
				margin-top: 15px;
				border-radius: 5px;
				border: 2px solid aqua;
			}
			button{
				width: 80px;
				height: 30px;
				margin-top: 15px;
				margin-left: 40px;
				background-color: aqua;
				border-radius: 3px;
				font-family:"方正舒体" ;
				font-size: 20px;
				border: 2px solid aqua;
			}
			button:hover {
			  background-color: darkgrey;
			  color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="top">
				<span><b>位置：</b>首页 -> 表单</span>
			</div>
			<div class="center">
				<div class="sp">
				<span class="sp1"><b>注册信息</b></span>
				</div>
				<hr />
			</div>
			<div class="bottom">
				<form action="#" method="POST">
					账号:<input  class="inp" type="text" name="userName"  placeholder="请输入账号" /><br />
					密码:<input class="inp" type="password" name="pwd" placeholder="请输入密码"/><br />
					性别:<input type="radio" name="sex" value="male" />男
					     <input type="radio" name="sex" value="female" />女<br />
					爱好:<input  type="checkbox" name="hobby" value="basketball"/>篮球
					     <input  type="checkbox" name="hobby" value="football"/>足球
						 <input  type="checkbox" name="hobby" value="dance"/>跳舞<br /><br />
				    星座:<select name="star">
						
						   <option value="1">白羊座</option>
						   <option value="2">巨蟹座</option>
						   <option value="2">狮子座</option>
						   <option value="4">处女座</option>
				     	</select><br />
					备注:<textarea name="remark" rows="5" cols="50"></textarea><br />
					<button id="btn" onclick="function">注册</button>
				</form>
			</div>
		</div>
	</body>
</html>