行内样式，内联样式，外联样式，导入样式

0*..

已于 2022-10-23 15:02:57 修改

阅读量223

点赞数

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

于 2020-10-17 00:54:13 首次发布

本文链接：https://blog.csdn.net/weixin_46714278/article/details/109127655

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

人机交互
行内样式，内联样式，外联样式，导入样式
复习

行内样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>

<body>
	<h1>行内样式</h1>
	<p>顾名思义是在HTML标签内的样式控制命令</p>
	<p style=" color:red">在P标签里加入“style="样式属性：取值"”</p>
</body>
</html>

内联样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式</title>
	<style type="text/css">
		p{
			color:aqua
		}
		p1{	
			color: antiquewhite
		}
		h1{
			color: #B14F51
		}
	</style>
</head>

<body>
	<h1>内联样式</h1>
	<P>css自主复习，内联样式，将样式设置直接写在HTML中</P>
	<p>讨论嵌入样式是否控制多个P标签</p>
	<P>结果一幕了然</P>
	<p1>在p标签加上下标会如何呢</p1><br/>
	<p1>发现在head标签中的style标签不能控制</p1><br/>
	<p1>如果在style中加入P1的控制代码呢</p1><br/>
	<p1>结果和预期的一样</p1>
</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */
p{
	color:pink;
}
p1{
	color:red;
}

外联样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外联样式</title>
	<link rel="stylesheet" href="css1.css">
	*外联样式表，引入CSS的代码*
</head>

<body>
	<p>尝试一下，是否是在css中输入限制后，HTML输入样式表引入代码，以此来控制P标签</p>
	<p>引入代码后，CSS是可以控制NTML的P标签的</p>
	<p>我们再尝试一下加入，P1标签，是否和内联样式一样，也可以控制</p>
	<p1>输入内容发现，P1标签的色彩改变了</p1><br/>
	<p1>我们也实现了结构与样式的分离</p1>
</body>
</html>

导入样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导入样式</title>
	<style type="text/css">
		@import url("css1.css");*分号不可省*
	</style>
</head>

<body>
	<p>在@import url(外部样式表文件)，输入的文件我并不清楚，只有尝试加入CSS文件，查看效果</p>
	<p>运行发现后，插入的CSS样式表文件是可以运行的，猜想没有错</p>
	<p1>试一下用P1标签是否有一样的结果，</p1><br/>
	<p1>一目了然</p1>
	<p1>查找资料发现CSS文件就是外部样式表，不知道是否还有其他的外部样式表文件，有待考察，后续更新</p1>
</body>
</html>

选择器
类选择器
HTML：class=“”
css中：.类名
CSS基本属性
字符间距
letter-spacing
行高
line-height

去除超链接下划线
text-decoration:{none;
overline;
underline;
line-through
}
字体调节
font
font-family ：字体
font-size:字号
font-style:斜体
font-weight:加粗

背景(教材P95)
background-repeat：图片重复（repeat-x,-y,no-repeat）
background-position:背景的起始位置（top,bottom,left,right,center）
background-image：url(图片路径)

超链接属性(P106)
伪类选择器
a:link 默认，未被访问的样式
a:visited 已访问
a:hover 鼠标悬停时的样式
a:active 鼠标被点击的样式

共用属性：ul,ol
list-style
list-style-image
list-style-positioon
list-style-type

0*..

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
行内样式，内联样式，外联样式，导入样式

人机交互行内样式，内联样式，外联样式，导入样式复习行内样式<!doctype html><html><head><meta charset="utf-8"><title>行内样式</title></head><body> <h1>行内样式</h1> <p>顾名思义是在HTML标签内的样式控制命令</p> <p style=" col
复制链接

扫一扫