小白学CSS之基础《一》

最新推荐文章于 2021-07-31 15:28:22 发布

不喜欢热闹的孩子

最新推荐文章于 2021-07-31 15:28:22 发布

阅读量99

点赞数

分类专栏：自学前端的网工

本文链接：https://blog.csdn.net/weixin_43483442/article/details/107656916

版权

自学前端的网工专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小白学CSS之基础《一》

CSS简介

CSS：层叠样式表
作用：HTML网页中的文字大小、颜色、字体，网页的背景颜色、背景图片设置样式。
格式：h1{color:red;font-size:14px;}
选择器 + {}，中间分号隔开
CSS由一条条声明语句组成，使用分号隔开
属性值一般不加引号
单位一般为px，像素
CSS中不能出现html标签

CSS书写方式

嵌入式
外链式
行内式

嵌入式：
在<head></head>添加style标签，type属性描述这是CSS。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Aimer</title>
	<style type="text/css">
		p{
			color: red;
		}
		h1{
			color: blanchedalmond;
			text-align: center;
		}
	</style>
</head>

<body>
	<h1>这个是h1标题</h1>
	<p>这个是段落标签！</p>
	
</body>
</html>

** 效果图：**
嵌入式

外联式：

将CSS代码单独放置在.css文件中，在head标签中通过<link>标签引入链接css文件。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Aimer</title>
	
<!--
	<style type="text/css">
		p{
			color: red;
		}
		h1{
			color: blanchedalmond;
			text-align: center;
		}
	</style>
-->


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

<body>
	<h1>这个是h1标题</h1>
	<p>这个是段落标签！</p>
	
</body>
</html>

CSS文件：

@charset "utf-8";
/* CSS Document */
h1{text-align: center }

** 效果图：**
外联式
<link rel="stylesheet" href="CSS文件" />
stylesheet： 样式表关系；
href： 文件地址。
可以同时引入多个CSS文件链接，只想多谢几个link标签。

行内式：

使用HTML的style属性和值来进行样式设计。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Aimer</title>
</head>

<body>
	<h1 style="color: blue;text-align: center">这个是h1标题</h1>
	<p>这个是段落标签！</p>
	
</body>
</html>

效果图：
行内式

CSS注释

CSS代码不能包含HTML。
格式：

/* CSS Document */

选择器

选择器	描述	示例
通用选择器	给所有标签设置属性	*{属性：“值”}
标签选择器	给指定html标签设置样式	h1{属性：“值”}
类选择器	给指定类名的标签设置样式	`class='test'` , .test{属性：值}
ID选择器	给指定id名的标签设置样式	`id="test1"`, #test1{属性：值}

还可以将选择器进行组合选择，例如

		p.test{
			color: blueviolet;
			text-align: center;
			text-decoration: underline;
		}

组合选择器

尺寸样式属性

width 宽度
height 高度
background-color 背景颜色

只有块元素可以设置宽度高度，span标签不能设置

文本属性

属性	值	描述
color	red 、#f00.	设置文本的颜色
text-align	none 去掉文本修饰线 ,underline下划线 ,overline上划线 ,line-through删除线	设置修饰线条
text-transform	capitalize:首字母大写 ,uppercase小写转大写 ,lowercase大写转小写	设置大小写转换
line-height	px	设置行高,高度与行高就可以设置文本垂直方向居中对齐
text-indent	px 、em	设置首行缩进
word-spacing	-	设置单词间距对英文有效

字体属性

属性	值	描述
font-style	normal 正常、italic (斜体)	设置斜体属性
font-weight	normal 正常、bold 加粗	设置字体加粗属性
font-size	px	设置字体大小
font-family	微软雅黑、黑体、楷体…	设置字体，可以设置多个字体，用逗号隔开，按顺序执行

好了！先到这里做个笔记。

不喜欢热闹的孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
小白学CSS之基础《一》

CSS学习CSS：层叠样式表作用：HTML网页中的文字大小、颜色、字体，网页的背景颜色、背景图片设置样式。格式：h1{color:red;font-size:14px;}选择器 + {}，中间分号隔开CSS有一条条声明语句组成，使用分号隔开属性值一般不加引号单位一般为px，像素CSS中不能出现html标签CSS代码的书写方式：嵌入式外链式行内式嵌入式：<style type=“text/css”></style>style标
复制链接

扫一扫