CSS入门1 学习打卡

最新推荐文章于 2021-09-02 17:29:24 发布

gegejiawei

最新推荐文章于 2021-09-02 17:29:24 发布

阅读量212

点赞数

分类专栏： Web前端开发工程文章标签： css

本文链接：https://blog.csdn.net/gegejiawei/article/details/105745667

版权

Web前端开发工程专栏收录该内容

27 篇文章 0 订阅

订阅专栏

CSS概念

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

CSS作用

1、结构与样式分离的方式，便于后期的维护和修改
2、可以用多套样式，使网页有任意样式切换的效果
3、使得页面载入的更快，降低服务器的成本

样式分类

内部样式

<head>
	<title>review0424-1</title>
	<meta charset="utf-8">
	<style type="text/css">
		p{
			background-color: red;
			font-size: 20px;
			font-family: 隶书 ；
		}
		div{
			background-color: pink;
			font-size: 100px;
		}
		.p1{
			font-size: 40px;
			/*可以覆盖上面的font-size*/
		}
		body{
			background-color: yellow;
			/*颜色作为背景颜色*/
			background-image: url("image/4.jpg");
			/*图片作为背景图片*/
			background-repeat: no-repeat;
			/*背景图片的重复方向*/
			/*repeat repeat-x repeat-y no-repeat*/
			background-attachment: fixed;
			/*背景是否随着滚动条滚动*/
			/*Fixed 文字滚动，背景图片不随着滚动*/
			/*scroll 背景图片随着文字一起滚动*/
			background-position: 50% 50%;
			/*背景图片的起始位置*/
			/*以上五个属性可以统一设置 如下*/
			/*background:yellow url("image/4.jpg") no-repeat fixed 30px 40px;*/

		}
	</style>
</head>

外部样式

<head>
	<title>review0424-2</title>
	<meta charset="utf-8">
	<!-- 这是外部样式 一般都使用外部样式 -->
	<link rel="stylesheet" type="text/css" href="review0424-2.css">
	<!-- 1、link:用于定义文档与外部资源的关系 -->
	<!-- 2、rel="stylesheet"：rel是relationship的英文缩写 -- 关系 -->
	<!-- 3、type="text/css":定义css样式文件的类型 -->
	<!-- 4、href="index.css"：引用具体的文件 -->
</head>

行内样式（不推荐可读性差）

<!DOCTYPE html>
<html>
<head>
	<title>review0424-3</title>
	<meta charset="utf-8">
	<!-- 这是行内样式 -->
</head>
<body>
	<p style="background-color: green; font-size: 50px;">https://www.baidu.com</p>
	<p style="background: red;">这是百度官网</p>
</body>
</html>

CSS选择器

1、概念：用来选择(找到)需要添加样式的标签或者位置
2、常用选择器：标签选择器、（归）类选择器、其他选择器

CSS注释

/* 添加我们的注释css样式的注释内容 */
快捷键：CTRL + /

CSS常用样式

1、颜色设置 color 单词、16进制、rgb
在这里插入图片描述
2、文本样式：对齐方式、文本修饰、文本转换、文本缩进
作用：美化，修饰页面的文字相关的部分内容
文本样式具体如下：

3、direction:ltr 和 text-align:justify 的区别
如果是字母和汉字的话，两者效果一样；
主要针对阿拉伯数字，两者不一样；
对于direction来说：对于数字改变书写顺序，对于小数点显示也不一样

使用内部样式完成背景设置

在这里插入图片描述

文本修饰

在这里插入图片描述

总结

在这里插入图片描述

实践：使用CSS设置样式

<!DOCTYPE html>
<html>
<head>
	<title>chun</title>
	<meta charset="utf-8">
	<style type="text/css">
		h2{
			color: red;
			text-align: center;
		}
		p{
			text-indent: 4em;
			line-height: 30px;
		}
		.p1{
			text-decoration: underline;
		}	
		.p2{
			letter-spacing: 1em;
		}
	</style>
</head>
<body>
	<h2>春</h2>
	<p class="p1">盼望着，盼望着，东风来了，春天的脚步近了。</p>
	<p class="p2">一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
	<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
</body>
</html>

gegejiawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门1 学习打卡

CSS概念层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。C...
复制链接

扫一扫