1. 全栈程序员必看首页

CSS简单入门

全栈程序员-用户IM • • 未分类

CSS简单入门

无心发个博客，没想到访问量暴增，实在是惭愧，因为写的太水了，特此说明，本篇内容浅薄，适合啥都不会的新手，大佬或者有基础就跳过吧，不忍心浪费各位的时间。

目录

一、css的介绍

CSS引入

CSS选择器

CSS选择器-浮动

布局-盒子

布局-相对定位

布局-固定定位和重叠

布局-CSS练习

 

最近视频看的差不多了，就是一直没总结，这几天在上班之余，偷偷地总结吧，毕竟一些大牛已经快起飞了。

一、css的介绍

一.什么是CSS：

CSS是Cascading Style Sheets的缩写，通常为级联样式表。

CSS已经是网络不可或缺的元素，为浏览者呈现五彩缤纷的页面效果起到了重要作用。

CSS是一种标记语言，不需要进行编译，直接就可以在浏览器中执行。

二.使用CSS的优势：

（1）.能够极大提高代码的简洁度：

在大型的页面中显现的尤为突出，通过引入外部样式表可以有效的减小页面体积，不但能够节省一定的带宽资源，也能够提高关键词和有效代码的比重，对搜索引擎优化有着巨大的作用。

（2）.便于网页的改版：

使用css可以有效的控制网页的显示效果。这要比使用html元素自带的属性更加方便，比较突出的一点就是便于网页的后期改版，因为只要修改样式表中的css代码即可，而不是直接修改html元素的中的属性。

（3）.使用css可以实现精准控制:

html元素自带的属性虽然可以在一定程度上控制外观，但通常比较粗糙，使用css则会更加精准。

CSS样式规则的一些要点：

  • 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
  • 属性和属性值以“键值对”的形式出现。
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
  • 属性和属性值之间用英文”:”连接。
  • 多个”键值对”之间用英文”;”进行区分。
     

CSS引入

   (1)内部样式表

   style标签一般位于head标签中title标签之后,把它放在HTML文档的任何地方其实也是可以的

   type=”text/css”在html5中可以省略,

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
	
        <style type="text/css">
			div{
				color:blue;
				background-color:00ffee;
			}	
		</style>
    </head>
	<body>
    	<div>内部样式表</div>
    </body>
</html>

（2） 行内样式表（内联样式）

内联样式，又称行间样式。是通过标签的style属性来设置的元素样式，只对其所在的标签及嵌套在其中的子标签起作用，适合于样式比较少的情况。

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
    </head>
	<body>
    	<div style="color:red; background-color:00ffff">红红火火恍恍惚惚</div>
    </body>
</html>

 

(3)外部样式表(外联式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，基本语法格式如下：

<head>
    <link rel="stylesheet" type="text/css" href="CSS3.css" />
</head>

href：定义所链接外部样式表文件的URL，相对路径或绝对路径。
type：定义所链接文档的类型，在这里指定为”text/css”
rel：定义当前文档与被链接文档之间的关系，需要指定为”stylesheet”,表示被链接的文档是一个样式表文件。

三种方式的优缺点，剽窃某个大佬的：

在这里插入图片描述

CSS选择器

①元素选择器

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
        <style>	
			div{
				width:100px;
				height:100px;
				background-color:red;	
			}
		</style>
    </head>
	<body>
    	<div>元素选择器</div>
    </body>
</html>

②ID选择器

定义id选择器时，选择器前面要有一个#号，选择器本身则为文档中某个元素的id属性的值。

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
        <style>	
			#span1{
				background-color:#03F;
				}
		</style>
    </head>
	<body>
    	<span id="span1">元素选择器</span>
    </body>
</html>

③类选择器

类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值，定义类选择器前面需要有一个.

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
        <style>	
			.h1{
				font-size:36px;
				color:yellow;	
			}
		</style>
    </head>
	<body>
    	<h1 class="h1">一级标题</h1>
    </body>
</html>

④属性选择器

<head>
    <style>
        /* 属性选择器 */
        input[type="text"] {
            background: #00ffff;
        }
    </style>
    
</head>

<body>
    username：<input type="text" name="username" />
</body>

⑤后代元素选择器

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
    	 <style>
		 	h1 strong{
				color:blue;	
				font-size:20px;			
			}
		 </style>  
    </head>
	<body>
    	<h1> this is
        	<strong>very</strong>
            <strong>very</strong>
            important</h1>
            
           <h1> this is 
           		<strong>very</strong>
    			<em>really
                	<strong>very</strong>
                </em>
                important.
                </h1>
    </body>
</html>

⑥子元素选择器

第二个very就没反应了

<html>
	<head>
    	<title>CSS</title>
        <meta charset="utf-8" />
    	 <style>
		 	h1>strong{
				color:blue;	
				font-size:20px;			
			}
		 </style>  
    </head>
	<body>
    	<h1> this is
        	<strong>very</strong>
            <strong>very</strong>
            important</h1>
            
           <h1> this is 
           		<strong>very</strong>
    			<em>really
                	<strong>very</strong>
                </em>
                important.
                </h1>
    </body>
</html>

⑦并列选择器

<html>
	<head>
    	<meta charset="utf-8">
        <title>CSS</title>
        <style>
			#p1,
			.class,
			ul{
				color:blue;
				font-size:60px;	
			}
		</style>
    </head>
	<body>
    	<p id="p1">我是第一段</p>
        <p class="class">我是第二段</p>
        <ul>
        	<li>序列1</li>
            <li>序列2</li>
            <li>序列3</li>
        </ul>
	</body>
</html>

 

CSS选择器-浮动

在这里插入图片描述

  • div是块级元素，在页面中独占一行，自上而下排列；
  • 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流上，和标准流不是一个层次。
  • 虽然div浮动，但div2,div3,div4仍然在标准流中，所以div2会自动向上移动，占据div1的位置，重新组成一个流
  • 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随上一个元素的后边
<html>
	<head>
    	<meta charset="utf-8" />
        <title>CSS浮动</title>
        <style>
			.divClass{	
				width:200px;
				height:200px;
				background-color:red;
				border:1px solid blue;
			}
		 	#div1{
				float:right;	
			}
			#div2{
				clear:right;
				float:right;	
				 
			}
			#div3{
				width:300px;
				background-color:blue;
				}
		</style>
    </head>
	<body>	
    	<div id="div1" class="divClass">1</div>
        <div id="div2" class="divClass">2</div>
        <div id="div3" class="divClass">3</div>
        <div id="div4" class="divClass">4</div>
    </body>
</html>

 

布局-盒子

首先呢，得知道，三个元素：border(边框)，margin(外边距)，padding(内边距)。

border:元素的边框，可能不可见。边框用于将边缘和其他框分开

margin:外边距，表示框的边缘与相邻框之间的距离，也称为页边空白

padding:内边距，表示框内容和边框之间的空间

CSS简单入门一

边框的三种定义：

CSS简单入门

然后就是内边距

CSS简单入门

 和外边距

CSS简单入门

 测试代码：

<html>
	<head>
		<title>css盒子模型</title>
		<meta charset="utf-8"/>
		<style>
			#div1{
				/*边框border3*/
				border:1px solid red;
				border-top:2px dashed blue;
				border-bottom-color:yellow;
				width:200px;
				height:200px;
				/*内边距padding3*/
				/*padding:50px;*/
				/*padding:50px 50px 100px 60px;*/
				padding-top:100px;
				/*外边距margin*/
				/*margin:100px;*/
				/*margin:100px 200px 200px 300px;*/
				/*margin-left:200px;*/
				margin:auto;
			}
		</style>
	</head>
	
	<body>
		<div id="div1">我是块级元素</div>
	</body>
</html>

 CSS简单入门

 

布局-相对定位

什么是定位？

CSS简单入门

相对定位

CSS简单入门

<html>
	<head>
    	<title></title>
        <meta charset="utf-8" />
        <style>
			/*
				相对定位，参照物是自己本身，
				通常都是配合left，right，botton，top使用。只需要使用两个就可以
				对一个元素进行，定位，一个水平和一个竖直
			*/	
			#div1{
				width:200px;
				height:200px;
				border:1px solid blue;
				background-color:#00ffff;
				position:relative;
			top:100px;
				left:100px;	
			}
			#span1{
			
				background-color:yellow;
				border:1px solid blue;
				position:relative;
				top:200px;
				left:200px;
				/* 
					使用相对元素，内联元素还是内联元素，块级元素还是块级元素
				*/	
				/*width:100px;
				height:200px;*/
			}
		
		</style>
    </head>
	<body>
    	<div id="div1">爸爸爸爸</div>
        <span id="span1">儿子</span>
	</body>
</html>

 绝对定位

子元素开启绝对定位，若父元素没有开启定位。会相对于游览器进行定位。

一般父元素，要开启相对定位，若父元素开启定位，会相对于父元素进行定位

通常都是配合left，right，botton,top使用。

只需要使用两个就可以对一个元素进行定位，一个水平，一个竖直。

注意：绝对定位会改变元素的性质：内联元素会变成块级元素（加上height和width后）块级元素去掉（height和width后）会变成内联元素

CSS简单入门

 

<html>
	<head>
    	<title>绝对定位</title>
        <meta charset="utf-8" />
        <style>
		#div1{
			height:200px;
			width:200px;
			background-color:#00ffff;
			border:1px solid blue;
			position:absolute;
			top:200px;
			left:100px;	
		}
		#div2{
			height:300px;
			width:300px;
			background-color:red;
			border:2px double blue;
			position:relative;
			left:100px;
		}
		#span1{
			background-color:yellow;
			border:1px hidden blue;	
			position:absolute;
			/*width:100px;
			height:100px;*/
			top:300px;
			left:300px;
		}
		</style>
    
    </head>
	<body>
    	<div id="div2">
       		<div id="div1">son son son</div>
        </div>	
        <span id="span1">dddddafaagagagd</span>
    </body>
</html>

 

布局-固定定位和重叠

固定定位

  • position:fixed 相对于浏览器窗口进行定位
  • 固定定位的元素，将脱离文档流，不占用空间
  • 当页面滚动时，元素始终出现在浏览器的固定位置上
<html>
	<head>
    	<title>固定定位</title>
        <meta charset="utf-8" />
		<style>
			/*当元素的position设置成fixed，就开启了固定定位
			固定定位也是一种绝对定位，他的大部分特点和绝对定位一样不同的是：
			固定定位会固定在浏览器的某个位置，但不随着滚动条而滚动*/
		#div1{
			width:100px;
			height:100px;
			border:1px solid red;
			background-color:yellow;
			position:fixed;
			top:50px;
			left:200px;
			
			}
		
		</style>
    </head>
	<body>
		<div id="div1"></div>
        <div style="height:10000px;"></div>
 	</body>
</html>

定位元素的层叠顺序

z-index:auto | number

auto：默认值

number：无单位的整数值，可为负数

z-index值越大的元素将叠加在z-index值小的元素上方

<html>
	<head>
    	<title>层叠顺序</title>
        <meta charset="utf-8" />
		<style>
			.divClass{
				width:100px;
				height:100px;
				border:1px solid blue;
				position:absolute;	
			}
		
			#div1{
				top:50px;
				left:50px;
				background-color:red;
				z-index:1;		
			}
				#div2{
				top:100px;
				left:100px;	
				background-color:yellow;
				z-index:5;
			}
			#div3{
				top:120px;
				left:120px;
				background-color:green;
				z-index:4;
				}
        </style>
    </head>
	<body>
    	<div id="div1" class="divClass">111111111111111</div>
        <div id="div2" class="divClass">222222222222222</div>
        <div id="div3" class="divClass">333333333333333</div>
 	</body>
</html>

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/114795.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • Oracle 触发器两种写法「建议收藏」

    Oracle 触发器两种写法「建议收藏」

    Oracle 触发器两种写法「建议收藏」//复杂触发器，功能数据插入是触发数据联动//注意:new.DATA_REGION:=才是赋值CREATEORREPLACETRIGGERTRIGGER_NAMEBEFOREINSERTONTABLE_NAMEFOREACHROWDECLARECREATE_USER_IDVARCHAR(40);CREATE_DATEDATE;DH_EVENT_IDVARCHAR(50);DATA_REGIONVARCHAR(10);BEGI

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月11日
  • js 数组转json和json转数组

    js 数组转json和json转数组

    js 数组转json和json转数组js数组转json和json转数组数组转json串json字符串转数组数组转json串vararr=[1,2,3,{a:1}];JSON.stringify(arr);json字符串转数组varjsonStr='[1,2,3,{“a”:1}]’;JSON.parse(jsonStr);

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月21日
  • SQL 清空表数据的方法

    SQL 清空表数据的方法

    SQL 清空表数据的方法truncatetabletablenamedeletefromtablenamedelete方法最大的问题，当有标志字段时就有问题一般建議盡可能使用delete去刪除表的字段,它具有選擇性刪除的作用,所以常常deletefromtablenamewhere條件delete和truncate作用其實是一樣的,隻是truncate后面不跟where條件句,它的作用是刪除表中所有的行(記錄)兩者最大的區別就是delete是寫日誌文件的,而truncate則不寫日誌直接刪除

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月5日
  • Docker(五)[通俗易懂] docker

    Docker(五)[通俗易懂]

    Docker(五)[通俗易懂]DockerDocker网络–link自定义网络网络连通Docker网络Docker是如何进行网络通讯的?查看本机的网卡和ip地址docker0类似与路由器ip地址一样(x.x.x.1)Dockerdocker run -d -P –name=tomcat03 tomcat:8.0查看容器ip地址docker exec -it a72d4ae634da ip addr1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noque

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月11日
  • stat 函数_stat函数返回值

    stat 函数_stat函数返回值

    stat 函数_stat函数返回值stat函数讲解（转） 表头文件:   #include         #include定义函数:    intstat(constchar*file_name,structstat*buf);函数说明:    通过文件名filename获取文件信息，并保存在buf所指的结构体stat中返回值:    执行

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月21日
  • 5.网站404错误–404页面制作方法详解（下）

    5.网站404错误–404页面制作方法详解（下）

    5.网站404错误–404页面制作方法详解（下）　　八、制作404页面　　这里分两种情况。　　Apache　　为ApacheServer设置404错误页面的方法很简单，只需：　　(1)在.htaccess文件中加入如下内容：ErrorDocument404/notfound.php，将.htaccess文件上传到网站根目录。　　(2)制作一个404页面，随便您设计，命名为notfound.php，同样上传到网站根目…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月27日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号