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
blank

相关推荐

  • java如何访问private方法_java什么叫方法重写

    java如何访问private方法_java什么叫方法重写

    java如何访问private方法_java什么叫方法重写当Java的类有一个方法的访问修饰符是private,我们在写测试类时该怎样对它进行测试吗?道难是先将它的修饰符改成public，然后在做完测试之后再将其改回public，其实完全不用这样做，我们在编写测试类的时候只要将其私有方法抽出，让其可以访问，就可以按要求进行测试了.开始我们先写一个被测试类，如下：package com.srcopen.test;public class Exa

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月1日
  • smb服务配置

    smb服务配置

    smb文件共享：用internet文件系统（CIFS）也称为服务器是适用于MicrosoftWindows服务器和客户端的标准文件和打印共享系统模块。Samba服务可用于将Linux文件系统作为CIFS/SMB网络文件共享进行共享，并将Linux打印机作为CIFS/SMB打印机共享进行共享。实验一、windows共享文件给linux1、实验环境1）、windows系统172.25.254…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月13日
  • 基于Android点餐APP系统的设计与实现[通俗易懂]

    基于Android点餐APP系统的设计与实现[通俗易懂]

    基于Android点餐APP系统的设计与实现[通俗易懂]假如您对此内容感兴趣，你可以加QQ群：868378707(毕业设计online);搜索微信小程序“毕设编程Online”，免费获取源码；基于Android的点餐系统由服务器端和安卓客户端两部分组成。服务器端供餐厅工作人员使用，主要实现菜品信息管理；安卓客户端由餐厅客户使用，主要实现浏览菜品，点餐等功能。主要内容如下：服务器端：1：用户登录：用户在使用系统前先进行登录功能。2：菜品信息管理：包括菜品名称，菜品类别，菜品价格，菜品图片，菜品介绍，菜品发布等信息等增删改查功能3：…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月19日
  • 大型电商网站架构案例和技术架构【推荐】

    大型电商网站架构案例和技术架构【推荐】

    大型电商网站架构案例和技术架构【推荐】大型网站架构是一个系列文档，欢迎大家关注。本次分享主题：电商网站架构案例。从电商网站的需求，到单机架构，逐步演变为常用的，可供参考的分布式架构的原型。除具备功能需求外，还具备一定的高性能，高可用，可伸缩，可扩展等非功能质量需求（架构目标）。根据实际需要，进行改造，扩展，支持千万PV，是没问题的。本次分享大纲电商案例的原因电商网站需求网站初级架构系统容量估算网站架构分析网站架构优化架构总结电商网站案…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月16日
  • 敏感词过滤器的实现

    敏感词过滤器的实现

    敏感词过滤器的实现敏感词过滤器的实现导包敏感词文件前缀树的实现敏感词过滤器的实现导包本文的敏感词过滤器用在SpringBoot项目中，因此，首先需要在pom.xml文件中导入如下依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId></dependency><depend

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月11日
  • eclipse配置安卓开发环境sdk_Android 设置网络代理

    eclipse配置安卓开发环境sdk_Android 设置网络代理

    eclipse配置安卓开发环境sdk_Android 设置网络代理原作者地址 http://www.cnblogs.com/sunzn/p/4242131.html启动AndroidSDKManager，打开主界面，依次选择「Tools」、「Options…」，弹出『AndroidSDKManager-Settings』窗口；在『AndroidSDKManager-Settings』窗口中，在「HT

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月4日

发表回复

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

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