CSS---CSS入门

最新推荐文章于 2023-03-06 21:30:56 发布

Rosinante.

最新推荐文章于 2023-03-06 21:30:56 发布

阅读量169

点赞数

分类专栏： Web前端文章标签： CSS

本文链接：https://blog.csdn.net/qq_21420941/article/details/98354780

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、什么是CSS

Cascading Style Sheets : 层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS是用来美化我们的HTML页面的，HTML 决定网页的骨架 ,CSS 化妆，将页面的HTML和美化进行分离。

二、为什么使用CSS

表格布局的缺陷:

1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

三、CSS的简单入门

1.CSS的简单语法

在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中：

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择：

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color:blue;
			}
		</style>
	</head>
	<body>
		<span>元素选择器</span>
		<span>元素选择器</span>
                <p>元素选择器</p>
	</body>

ID选择器：

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /*		 
	 #ID的名称{
	     属性名称:属性的值;
	     属性名称:属性的值;
        }
    * */
    #div1{
        color: red;
    }
			
    </style>
</head>
<body>
    <!--将JAVAEE颜色改成红色-->
    <div id="div1">JAVAEE</div>
    <div>IOS</div>
    <div>ANDROID</div>
</body>

类选择器：

以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			.类的名称{
			   属性名称:属性的值;
			  	属性名称:属性的值;
			}
		-->
		<style>
			.shuiguo{
				color: yellow;
			}
			.shucai{
				color: green;
			}
		</style>
	</head>
	<body>
		<!--
			将水果类,改成黄色
			蔬菜类改成绿色
		-->
		<div class="shuiguo">香蕉</div>
		<div class="shucai">黄瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

CSS中的其他选择器：

选择器分组：选择器1,选择器2{ 属性的名称:属性的值}
属性选择器：

a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--修改包含title属性的a标签-->
		<style>
			/*a[title='aaa']{
				color: red;
			}*/
			a[href][title]{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#" >李四</a>
	</body>
</html>

后代选择器: 爷爷选择器孙子选择器找出所有的后代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*将H1下面的所有 em 元素 的内容颜色改成 红色*/
			/*中间以空格隔开的是后代选择器*/
			h1 > em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>
			This is a 
			<em>儿子</em>
			<strong>
				<em>孙子</em>
			</strong>
		 heading
		</h1>
	</body>
</html>

子元素选择器: 父选择器 > 儿子选择器

伪类选择器: 通常都是用在A标签上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			a:link {color: red}		/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */
			
		</style>
	</head>
	<body>
		<a href="#">Hello CSS</a>
	</body>
</html>

CSS的优先级：

按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

CSS浮动：

float : left, right 不再占有正常文档流中的空间 , 流式布局
clear : both left right

2.CSS的引入方式

外部样式: 通过link标签引入一个外部的css文件

<!-- 外部引入CSS文件 -->
<link rel="stylesheet" href="style1.css" />

内部样式: 直接在style标签内编写CSS代码

<head>
    <style type="text/css"> 
        body {background-color: red} 
        p {margin-left: 20px}</style>
</head>

行内样式: 直接在标签中添加一个style属性, 编写CSS样式

<!--通过行内样式修改甘蔗-->
<div class="shuiguo" style="color: greenyellow;">甘蔗</div>

引入方式的优先级：内部样式（内联式） > 行内样式（嵌入式） >外部样式（外联式）

行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则

3.CSS的浮动

浮动的元素会脱离正常的文档流,在正常的文档流中不占空间。

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

    float属性:
	left
	right
			
    clear属性: 清除浮动
	both : 两边都不允许浮动
	left: 左边不允许浮动
        right : 右边不允许浮动
流式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		<div style="float:left;width: 200px; height: 200px; background-color: red;"></div>
		
		<div style="clear: both;"></div>
		
		<div style="width: 250px; height: 200px; background-color: greenyellow;"></div>
		<div style="width: 200px; height: 200px; background-color: blue;"></div>
		
		
	</body>
</html>

4.CSS的盒子模型：万物皆盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div style="border:3px solid red ; width: 400px; height: 400px;" >
			 <div style="border:1px solid gray; width: 150px; height: 150px;padding: 10px 20px 30px;">iPhone</div>
			 <div style="border:1px solid yellow; width: 150px; height: 150px;">HUAWEI</div>
			 
		</div>
	</body>
</html>

内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

5.CSS绝对定位:

position: absolute

top: 控制距离顶部的位置

left: 控制距离左边的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="border: 5px solid red; width: 450px; height: 450px;position: absolute;top: 150px;left: 200px;">
			CSDN
		</div>
	</body>
</html>