CSS学习1

最新推荐文章于 2024-10-02 15:35:50 发布

aneyal

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量232

点赞数 1

分类专栏：前端学习文章标签： css 学习 css3

本文链接：https://blog.csdn.net/aneyal/article/details/123442276

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

CSS简介

CSS即CSS样式层或层叠样式表

CSS用于将网页的样式和结构分开，CSS绘制网页的样式，html专注于网页的结构，所以CSS是网页的美容师

CSS样式规则

并且样式需要写在head中，选择器可以使用标签选择器（实例就是），类名选择器，id选择器等等

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式</title>
		<!--style标签表示样式-->
		<!--修改文字颜色和字号大小-->
		<style>
			h1 {color: blue;
				font-size: 20px;
				}
			p {color: pink;}
			div {color: red;}
		</style>
	</head>
	<body>
		<h1>你好，我是蓝色的</h1>
		<p>这里是粉红色的</p>
		<div>这是一个红色的盒子</div>
	</body>
</html>

注意，属性和值是键值对，必须配对

CSS的注释

CSS的注释格式为/**/，快捷键为ctrl+/

CSS字体样式属性

修改字号大小

font-size

相对长度单位：em,px(像素，最常用）,绝对长度单位：in,cm,mm,pt

设置字号时尽量使用偶数的数字字号，并且现在网页中普遍使用14px大小的字体

修改字体

font-family，设置字体时，可以使用多个字体，但其中必须用英文逗号隔开，这表示从前往后系统挨个检查是否有这种字体，如果有，就用这种字体，不管后面的字体，如果没有，则看系统有没有后一个字体。如果需要设置英文的字体名称，则英文字体名必须在中文字体名前，并且尽量使用系统默认字体。纯英文字体可以不加""

设置字体名称时，可以直接使用中文，但这时在文件编码不匹配时会产生乱码错误。并且xp系统不支持微软雅黑的中文

解决办法：使用英文替代或在CSS中直接使用Unicode编码来写字体名称

字体加粗

font-weight，一般使用数字

字体倾斜

font-style，其用来设置或检索对象中的文本字体样式，取值为normal时表示正常字体，取值为italic时表示为斜体，对于没有涉及斜体的字体，如果要使用斜体外观则使用oblique，取值为oblique时表示为倾斜的字体，这时是人为地使字体倾斜而不是选取字体中的斜体字

font：综合设置字体样式

可以利用font属性对字体样式进行综合设置。

格式：选择器{font: font-style font-weight font-size/line-height font-family}

注意里面的属性的顺序不能改变，各属性之间用空格隔开。其中不需要的属性可以省略，但font-size和font-family必须写

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS字体样式属性</title>
		<!--font-size修改字号-->
		<!--font-size修改字体-->
		<!--\9ED1\4F53表示黑体-->
		<style>
			/* CSS的注释格式，快捷键为ctrl+/ */
			h1 {
				font-size: 20px;
				font-family: "microsoft yahei","宋体";
			}
			h3 {
				font-size:14px;
				font-family: "\9ED1\4F53";
				font-style: italic;
			}
			span {
				font-weight: 700;
			}
			/* strong标签是加粗的意思，现在我们将其改为正常效果 */
			strong{
				font-weight: normal;
			}
			/* em标签是斜体的意思，现在我们将其改为正常效果 */
			em{
				font-style: normal;
			}
			/* font综合写法 */
			p{
				font:normal 300 16px "宋体";
			}
			
		</style>
	</head>
	<body>
		<h1>红楼梦（red house dream)</h1>
		<h3>简介</h3>
		<p><span>《红楼梦》</span>，中国古代章回体长篇小说，中国古典四大名著之一,
		通行本共120回，一般认为前80回是清代作家曹雪芹所著，后40回作
		者为<strong>无名氏</strong>，整理者为程伟元、高鹗。小说以贾、史、王、薛四大家
		族的兴衰为背景，以富贵公子<em>贾宝玉</em>为视角，以<em>贾宝玉</em>与林黛玉、薛
		宝钗的爱情婚姻悲剧为主线，描绘了一批举止见识出于须眉之上的闺
		阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从
		各个角度展现女性美以及中国古代社会世态百相的史诗性著作。</p>
		<h3>作者别名</h3>
		<p>石头记、情僧录、风月宝鉴、金陵十二钗、金玉缘</p>
	</body>
</html>

效果：