HTML中CSS知识点笔记

最新推荐文章于 2023-09-03 23:50:58 发布

王先生

最新推荐文章于 2023-09-03 23:50:58 发布

阅读量1.4k

点赞数

分类专栏：笔记 HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45999243/article/details/117001384

版权

笔记同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

HTML中CSS知识点笔记

CSS基础知识
1.1基本概念
CSS（Cascading Style Sheet）层叠样式表，为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式，最后的结果是多次样式叠加的结果，如果有冲突，以后面的样式为准。
1.2 基本语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
……
}
选择器说明该样式施加于哪些元素；属性名和属性值说明是样式内容；
一般一行定义一条样式，当然也可以写在一行上，但每条样式都序号加上“；”
推荐用小写命名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 400px;
			margin: 0 auto;
			text-align: center;
		}

		p {
			font-size: 24px;
		}

		#author {
			font-size: 18px;
		}

		#comment {
			font-size: 14px;
			color: gray;
		}
	</style>
	<body>
		<div>
			<h1>望月怀远</h1>
			<p id="author">唐·张九龄</p>
			<p>海上生明月，天涯共此时。</p>
			<p>情人怨遥夜，竟夕起相思。</p>
			<p>灭烛怜光满，披衣觉露滋。</p>
			<p>不堪盈手赠，还寝梦佳期。</p>
			<p id="comment">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p>
		</div>
	</body>
</html>

1.3 使用方式
内联形式
使用style属性，只对当前标签有效。页面内容和表现形式是高度耦合的，不利于维护和分工合作的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 400px;margin: 0 auto;text-align: center;">
			<h1>望月怀远</h1>
			<p style="font-size: 18px;">唐·张九龄</p>
			<p style="font-size: 24px;">海上生明月，天涯共此时。</p>
			<p style="font-size: 24px;">情人怨遥夜，竟夕起相思。</p>
			<p style="font-size: 24px;">灭烛怜光满，披衣觉露滋。</p>
			<p style="font-size: 24px;">不堪盈手赠，还寝梦佳期。</p>
			<p style="font-size: 14px; color: gray;">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p>
		</div>
	</body>
	</html>

在head中使用

<link rel="stylesheet" type="text/css" href="xxx.css">

内容和表现形式完全分离，而且任何需要用到该样式表中样式的页面都可以通过链接该文件来实现。
my.css

div {
	width: 400px;
	margin: 0 auto;
	text-align: center;
}

p {
	font-size: 24px;
}

#author {
	font-size: 18px;
}

#comment {
	font-size: 14px;
	color: gray;
}

引用外部css文件

<link type="text/css" rel="stylesheet" href="my.css"/>

1.4 颜色
自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。
需要将连续的量（无穷）转化为离散的量（有限）的
颜色可以由三种基本颜色调和而成，即红色Red、绿色Green和蓝色Blue
每种颜色用8位表示，可以表示256（28）种颜色。那么每个颜色值有24位来表示，可以表示256256256种颜色（真彩色）
进制……
CSS中颜色的表示方法：
（1）十六进制形式：#ff0000（掌握）
（2）RGB：rgb(128,0,0) 等价于#800000（掌握）
（3）RGBA：在RGB颜色的基础上增加了表示透明度的分量Alpha
（4）HSL：用色调、饱和度和明度三个分量表示颜色
（5）HSLA：在HSL颜色的基础上增加了表示透明度的分量Alpha
（6）预定义颜色：Red、Yellow等（掌握）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<div>
			<h3>颜色演示</h3>
			<p style="color: green;">预定义颜色(color:green)</p>
			<p style="color: RGB(255,0,0);">RGB颜色(color:RGB(255,0,0))</p>
			<p style="color: #ff00ff;">十六进制颜色(color: #ff00ff)</p>
		</div>
	</body>
</html>

王先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中CSS知识点笔记

HTML中CSS知识点笔记CSS基础知识1.1基本概念CSS（Cascading Style Sheet）层叠样式表，为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式，最后的结果是多次样式叠加的结果，如果有冲突，以后面的样式为准。1.2 基本语法选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;……}选择器说明该样式施加于哪些元素；属性名和属性值说明是样式内容；一般一行定义一条样式，当然也可以写在一行上，但每条样式都序号加上“；”推荐用
复制链接

扫一扫