css介绍和样式基础

开开心心罗非鱼

已于 2022-10-18 11:44:11 修改

阅读量1.4k

点赞数 5

文章标签： css 前端 html

于 2022-10-10 21:34:26 首次发布

本文链接：https://blog.csdn.net/qq_59384581/article/details/127101651

版权

css介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
如高度，宽度，文本颜色，边框，位置等；都可以用css来修改。

css样式规则

是已选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}的方式来书写的。

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统- -的CSS样式。

其基本语法格式如下:

标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

h1 {font-size:60px;color :red;text-align: center; }
h2 {font-size:60px;color :red;text-align: center; }
p {font-size:30px; color:blue;text-align: center; }

这就是一个标签选择器。

标签选择器他会吧这个p或者h1标签都给样式化

类选择器

类选择器使用"."(英文点号)进行标识，后面紧跟类名,其基本语法格式如下:

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

特别要注意前面的类符号

	<style type="text/css">
			.g{color:#176cee; font-size:100px; }      /*设置颜色为蓝，字体像素60*/
			.o{color:#d4412d; font-size:100px; }      /*设置颜色红色，字体像素60*/
			.oo{color:#ffb404; font-size:100px; }     /*设置颜色黄色，字体像素60*/
		</style>

这是类选择器的语法。

类选择器是需要调用的格式如下：

<p class="g">G</p>
<p class="o">o</p>
<p class="oo">o</p>

用class=“类选择器名”调用选择器。

案例实践

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类样式logo制作</title>
		<style type="text/css">
			.g{color:#176cee; font-size:100px; }      /*设置颜色为蓝，字体像素60*/
			.o{color:#d4412d; font-size:100px; }      /*设置颜色红色，字体像素60*/
			.oo{color:#ffb404; font-size:100px; }     /*设置颜色黄色，字体像素60*/
		</style>
	</head>
		
	<body>
		<strong class="g">G</strong>
		<strong class="o">O</strong>
		<strong class="oo">O</strong>
		<strong class="g">g</strong>le 
		
		
	</body>
</html>

结果

id选择器

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

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3; }

#one{
				font-size: 12px;
				text-align: center;
			}

id选择器与类选择器有点类似

调用方法

<div id="one">编辑文本</div>

用定义的标签使用，他和类标签的区别就在与，类标签是中国人，而id标签就落到你叫什么了。

通配符选择器

通配符选择器用“*"号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法
格式如下:
*{属性1:属性值1;属性2:属性值2;属性3:属性值3; }

*{color:red; font-size:18px; font-style:normal;}

就相当于给所有的文本标签都样式化了

案例通配符选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通配符选择器</title>
		<style tepy="text/css">
			*{color:red; font-size:18px; font-style:normal;}
		</style>
	</head>
	<body>
		<h1>我是标题h1标签</h1>
		<h2>我是标题h2标签</h2>
		<div>我是div标签</div>
		<p>我是段落p标签</p>
		<em>我是em斜体标签</em>
		<strong>我是加粗strong标签</strong>
		<span>我是span标签</span>
		<b>我是b标签</b>
	</body>
</html>

结果

可以看到我的所有标签都被通配符样式化了。

行内式

行内式是在文本标签下编写的基本语法格式如下：

<P style="color:red;font-size: 26px;font-family:'微软雅黑';">编辑的文本会被属性值样式化<p>

这里就是内行式的语法格式，颜色属性后面跟颜色属性值，字体大小跟字体大小属性值，还有一个字体选择的属性值跟黑软字体。

案例css内行演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>春晓</title>
	</head>
	<body>
		<h1 style="color:blue ;font-size: 28px;font-family:'微软雅黑';">春晓</h1>
		
		<P style="color:red;font-size: 26px;font-family:'微软雅黑';">
			
			春眠不觉晓，<br/>处处闻啼鸟。<br/>夜来风雨声，<br/>花落知多少。
			</P>
	</body>
</html>

结果

内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，其基本语法格式如下:

<head>

<style type="text/css">

选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

</style>

</head>

原则上就是属性加属性值，内嵌式它和行内不一样行内是指这一行，或者这一段文本标签样式化

案例实践嵌入式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的网站</title>
		<style>
			h2{text-align: center;
				color: aqua;
				font-size: 36pt;}
			P{
				text-align: center;
				color: red;
				font-size: 20pt;
			}
		</style>
	</head>
	<body>
		<h2>罗非鱼</h1>
		<p>罗非鱼</p>
	

		
	</body>
</html>

结果

内嵌要修改的话只能在头部标签修改。它的属性名是p标签和h1标签所有这两个标签内部的所有文本内容都被样式话了。

如何用hbuilder添加css文件

命名style.css

这是我早编写的css文件代码在接下来的内容我需要用到它

h1 {font-size:60px;color :red;text-align: center; }
h2 {font-size:60px;color :red;text-align: center; }
p {font-size:30px; color:blue;text-align: center; }

链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:

<head>

rel="stylesheet" 1>

</head>

特别要注意这个路径。

案例

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

		
		<link href="style.css" type="text/css"
		
		rel="stylesheet" 1>
		
	
	</head>
	<body>
		<h1>罗非鱼</h1>
		<h2>罗非鱼</h2>
		<p>罗非鱼</p>
	</body>
</html>

结果

因为我调用的是css样式所有它显示的就是我css文件里面给它的属性与属性值。

导入式

导入式针对外部样式表文件。对HTML头部文档应用style标签，并在<style>标签内的开头处使用@import语句,即可导入外部样式表文件。其基本语法格式如下:

@import url(CsS文件路径);或@import "css文件路径";

</style>


		<style type="text/css">
		
			@import url("style.css");
				
		</style>

这里还是我上面的那个css文件。

案例实践

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关山月</title>
		
		<style type="text/css">
		
			@import url("style.css");
				
		</style>
	</head>
	<body>
	<h1>关山月</h1>
	<h2>李白</h2>
	<p>花间一壶酒，独酌无相亲。</p>
	<p>举杯邀明月，对影成三人。</p>
	<p>月既不解饮，影徒随我身。</p>
	<p>暂伴月将影，行乐须及春。</p>
	<p>我歌月徘徊，我舞影零乱。</p>
	<p>醒时同交欢，醉后各分散。</p>
	<p>永结无情游，相期邈云汉。</p>
	
	</body>
</html>

结果

这就是导入式。

文本样式属性

文本样式属性指的是控制文本的属性。

➢font-size属性用于设置字号。

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

➢font-size属性用于设置字号。

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

➢font-weight属性用于定义字体的粗细。

➢font-style属性用于定义字体风格。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下:

➢font综合属性font属性用于对字体样式进行综合设置，

其基本语法格式如下:

选择器{font: font-style font-variant font-weight font-size/line-height font-family;}

p{
     font: font-style  
     font-variant  
     font-weight  
     font-size/line-height   
     font-family;
}

➢@font-face属性是CSS3的新增属性，用于定义服务器字体。

通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。
@font- face{
font-family:字体名称;
sr:字体路径;

@font-face{
			     font-family:命名字体名称;             /*服务器字体名称*/
			     src:url(FZJZJW.TTF);      /*服务器字体名称*/
			}

调用，用 font-family:命名字体名称;

font-family:命名的字体名称;

添加字体文件。

找到自己下载的字体然后拖放里面的。

文本样式案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体样式属性</title>
		<style type="text/css">
			@font-face{
			     font-family:ziti;             /*服务器字体名称*/
			     src:url(FZJZJW.TTF);      /*服务器字体名称*/
			}
			.part1{
				font-family:"微软雅黑";
				font-size:30px;
				color:red;
				font-style:italic;
				font-weight:bold;
			}
			.part2{
				font-family:ziti;
				font-size:42px;
				color:blue;
				
			}
		</style>
	</head>
	<body>
		<p class="part1">字体微软雅黑，18像素，斜体，加粗，红色</p>
		<p class="part2">字体@fint-face属性字体的服务器字体，24像素，蓝色</p>
	</body>
</html>

结果

蓝色字样的就是我所下载的字体文件。进行更改了，

结合所学合并案例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻</title>
<style type="text/css">
			*{padding:0; margin:0;}      /*设置所有元素的边距为0*/
			body{
				font:33px/40px"宋体";
				color:#000;
				}
			h1{
				font-size:39px; 
				font-family:"微软雅黑";
				color:blue;
				text-shadow:10px 10px 2px red;
				text-align: center;
				letter-spacing: 40px;
			}
			h2{
				font: 25px /35px "微软雅黑";
				color:#072885;
				text-align: center;
				text-decoration: underline;
			}
			.one{
				font-size: 12px;
				text-align: center;
			}
			p{text-indent: 4em;}
			.blue{color:#3d6cd0;}
			.gray{color:#666;}
			#num{color:#b60c0c;}
			em{ font-style: normal;}
			.teo{font-family: "楷体_gb2312";}
			.four{ font-weight: bold;}
			strong{ color : #f00;}
		</style>
	</head>
	<body>
		<h1 class="">重要消息</h1>
		<h2>关于举办2022年全国高校IT人才骨干培训班通知</h2>
		<p class="one"><em class ="blue">2022年10月10日17：33</em>
		<em class="blue">博客网</em>
		<em class="gray">我有话说(<em id="num">520</em>人参与)</em></p>
		<hr/>
		<p class="two">2022年全国高校IT人才培训班将于10月在湘潭举办</p>
		<p><em id="num">传智播客网10月8日消息</em>本次培训课程已纳入“国家信息技术紧缺人才培养工程
		( NITE)”课程体系，由中国电子学会将携手CSDN (CSIP) <em class="blue"> [微博]</em>主办， 由传智播客教
		育集团<em class="blue"> [微博] </em>承办的全国骨干教师师资培训(软件开发与应用)。本次培训于2015年7月
		14日到25日举办，课程涵盖: <strong>JavaEE</strong>,<strong>.NET</strong>,<strong>PHP</strong>,
		<strong>网页平面设计</strong>,<strong> ios</strong>,<strong>C++</strong>六个方向。传智播客<em
		class="blue"> [微博]</em>还将为校企之间、校校之间提供交流分享专业建设与教学改革的理念、经验与成果的平台。
		</p>
	

	</body>
</html>

结果