web前端知识---------------css

最新推荐文章于 2024-06-11 11:55:45 发布

恰时

最新推荐文章于 2024-06-11 11:55:45 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/fnwibwj/article/details/82260736

版权

一.什么是css?

1.CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表（级联样式表）

主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2.CSS 主要目的

控制网页中元素的样式 CSS 可以让我们从HTML结构和样式分离出来。 Css 可以让我们专注结构。

专注结构：就是h就是一个标题 p就是一个段落。但是不应该再告诉我们，是什么颜色，是多大字号。

CSS 布局弱化标签布局。代码更少，语义更好，搜索更容易.....

二.CSS选择器

帮助我们找到我们要修饰的标签或者元素

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

1、标签(元素)选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：

</style>
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: pink;
			}
			
			div{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>hello</span>
		<span>world</span>
		
		<div>hahaha</div>
		<div>lalala</div>
	</body>
</html>

2.ID选择器:

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

<style>

#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}

</style>

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			#div2{
				color: pink;
			}
		</style>
	</head>
	<body>
		
		
		<div id="div2">hahaha</div>
		<div>lalala</div>
	</body>
</html>

3.类选择器:

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

<style>

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

</style>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.fruit{
				color: pink;
			}
			
			.vegetable{
				color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="fruit">苹果</div>
		<div class="fruit">香蕉</div>
		<div class="fruit">橙子</div>
		<div class="vegetable">西红柿</div>
		<div class="vegetable">青菜</div>
		<div class="vegetable">胡萝卜</div>
	</body>
</html>

三.CSS的引入方式

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

HTML文件中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="fruit">苹果</div>
		<div class="fruit">香蕉</div>
		<div class="fruit">橙子</div>
		<div class="vegetable">西红柿</div>
		<div class="vegetable">青菜</div>
		<div class="vegetable">胡萝卜</div>
	</body>
</html>

css文件中

	.fruit{
				color: pink;
			}
			
			.vegetable{
				color: yellow;
			}

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

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

四.css的浮动

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

               float属性:
                   left
                   right

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

恰时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端知识---------------css

一.什么是css?1.CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表（级联样式表）主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 ...
复制链接

扫一扫