• css学习心得

    css

    • 通过内嵌样式表来选择文本字体的大小和颜色
    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			p{
				font-size:16px;
				color: blue;
			}
		style>
	head>
	<body>
		
		<p>你好p>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 通过导入外部样式表来选择文本字体的大小和颜色

    css代码：

    p{
	font-size:16px;
	color: blue;
}

    • 1
    • 2
    • 3
    • 4

    HTML代码

    
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		 <link href="css/new_file.css" rel="stylesheet"/>
	head>
	<body>
		<p>你好p>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    选择器

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			/* 标签选择器 */
			p{
				color:blue;
				font-size:20px;
			}
            
			/* id选择器 */
			#title{
				color:blue;
				font-size:15px;
			}
            
			/* 类选择器 */
			.p1{
				color:green;
			}
			.p2{
				color:pink;
				}
            
			/* 选择器优先级 
			id>类>标签
			*/
		   
		    /* *：通配选择器，匹配网页中所有的标签 */
		   *{
			   font-family:楷体;
			   }
		  
		  /* 选择器组合：可以为多个选择器定义相同的样式表 */ 
		   #title,.p1,h1{
			   font-family:黑体;
		   }
            
		style>
	head>
	<body>
		<h1>真的吗h1>
		<p id="title" class="p1">你好p>
		<p class="p1">我也好p>
		<p class="p2">他也好p>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    文本

    text-decoration对文字进行修饰
    underline 下划线
    line-through 删除线

    letter-spacing:字符间距

    word-spacing:字母间距

    text-indent:首行缩进

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.p1{
				font-weight: 900;
				font-size: 1.25rem;
				text-align: center;
				text-decoration:none;
				/*
				text-decoration对文字进行修饰
					underline 下划线
					line-through 删除线
				 */
				letter-spacing: 10px;
				/* letter-spacing:字符间距 */
				word-spacing: 5px;
				/* word-spacing:字母间距 */
				text-indent: 2rem;
				/* text-indent:首行缩进 */
				font-family: 字魂49号-逍遥行书;
			}
			a{
				text-decoration: none;
				font-size: 6.25rem;
			}
		style>
	head>
	<body>
		<p class="p1">张兰直播间再现经典！与汪小菲前任同框，现任女友却被前夫爆料<br />
		在娱乐圈这个充满八卦和话题的世界里，汪小菲一家可谓是自带流量。最近，张兰在直播间与前夫的现任妻子意外同框，这一罕见画面瞬间点燃了网友们的八卦之火。<br 
		/>
		直播中，张兰与汪小菲的前任妻子谈笑风生，两人似乎并没有因为过去的恩怨而尴尬。相反，她们的互动还显得十分自然，这让不少网友纷纷表示：“这气度，真是绝了！”p>
		<a href="选择器.html">百度a>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    背景

    background-image:设置图片背景

    background-position:设置背景位置

    background-size:设置背景大小

    <html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			p{
				color: white;
				text-align: center;
				background-color: chartreuse;
				width: 800px;
				height: 800px;
				font-family: 字魂49号-逍遥行书;
				font-size: 20ex;
				background-image: url("img/1.jpg");
				background-position: center center;
				background-size: 100%;
			}
		style>
	head>
	<body>
		<p>你好p>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    css的伪类

    hover：当鼠标移入某标签时，会自动切换到此样式表

    active：当鼠标点击标签时 ，会自动切换到此样式表

    focus：拥有鼠标焦点的标签

    		/* 当鼠标移入某标签时，会自动切换到此样式表 */
			a:hover{
				color: black;
				font-family: 字魂49号-逍遥行书;
			}
		/* 当鼠标点击标签时 ，会自动切换到此样式表*/
		input:active{
			color: aliceblue;
		}
		
		/* 拥有鼠标焦点的标签 */
		.txt:focus{
			background-color: aqua;
		}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    标签分类

    • 块级标签：无论内容多少，都会独占一行，一般用来进行网页布局。

    可以设置宽高 width-height

    • 行级标签：只占自身大小，不会占一行。设置宽高无效。
    • 行级块标签：

    div和span

    • div：是一个无任何默认格式的块级标签，用于进行网页布局，其不会有默认属性影响分布的情况

    • span：行级标签，类似于div

    盒模型

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • 标签=内容区+内边距+边框

    • 内容区（content）

      1. width设置内容区宽度
      2. height设置内容区高度

      **注：**如果没有设置标签的内边距和边框，则内容区默认和盒子大小一样

    • 内边距（padding）：内容区到边框以内的区域

      1. padding：上px 右px 下px 左px
      2. padding：上下px 左右px
      3. padding：上下左右10px

    • 边框（border）：标签可见标的最外部

      1. border: ;
      2. border-radius: ;

    • 外边框（margin）

      1. 外边距可以设置为auto：

        左右设置auto时，两边边距相等，标签水平居中

        上下设置auto时，上下边距相等，标签水平居中

      2. 外边距不能改变标签大小，只能改变标签位置

    文档流

    浮动

    

	
		
		
		
	
	
			
    网站首页
    
			
    产品案例
    
			
    公司一览
    
		
    in你导航切换
    
	


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    • 此时浮动后效果如图所示

      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • 要使浮动目标内容居中则需使这三个内容在同一块级标签上并使左右居中

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.navbox{
				width: 600px;
				margin: 0px auto;
			}
			.nav:hover{
				background-color: brown;
			}
		style>
	head>
	<body>
		<div class="navbox">
			<div class="nav">网站首页div>
			<div class="nav">产品案例div>
			<div class="nav">公司一览div>
		div>
		<div style="background-color: blue;">in你导航切换div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    效果如图：

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • 此时浮动的内容处于顶层图层，要消除这种问题有两种解决方法：

      1. 为父级标签设置一个高度，将父级标签撑开
      DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.navbox{
				width: 600px;
				margin: 0px auto;
				height: 40px;
			}
			.nav:hover{
				background-color: brown;
			}
		style>
	head>
	<body>
		<div class="navbox">
			<div class="nav">网站首页div>
			<div class="nav">产品案例div>
			<div class="nav">公司一览div>
		div>
		<div style="background-color: blue;">in你导航切换div>
	body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30

      2.在浮动的标签后使用清除浮动的属性

      DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.navbox{
				width: 600px;
				margin: 0px auto;
				height: 40px;
			}
			.nav:hover{
				background-color: brown;
			}
		style>
	head>
	<body>
		<div class="navbox">
			<div class="nav">网站首页div>
			<div class="nav">产品案例div>
			<div class="nav">公司一览div>
			<div style="clear: left;">div> <！--清除浮动的影响，自动撑开父级标签  -->
		div>
		<div style="background-color: blue;">in你导航切换div>
	body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31

      结果如下：

        height: 40px;
  	}
  	.nav:hover{
  		background-color: brown;
  	}
  

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      网站首页
      产品案例
      公司一览
      <！--清除浮动的影响，自动撑开父级标签 -->
      in你导航切换
      ```

      结果如下：

      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 相关阅读:
    基于javaweb的企业绩效考核管理系统(java+ssm+jsp+bootstrap+jquery+mysql)
    springboot供应商管理系统毕业设计源码121518
    NeurIPS 2022 | 涨点神器！利用图像辅助三维点云分析的训练新范式
    数据结构-----二叉树的基本操作
    缓存把我坑惨了..
    R语言统计与绘图：生存率的比较
    【毕业设计】stm32微信天气机器人 - 物联网 嵌入式 单片机
    网络技术二十一：ACL包过滤
    [杂记]C++中移动语义与完美转发的一些理解
    函数式编程初探
  • 原文地址：https://blog.csdn.net/lalala1213888/article/details/136583473