css3

最新推荐文章于 2023-08-12 11:14:07 发布
华威CEO
最新推荐文章于 2023-08-12 11:14:07 发布
阅读量117
点赞数 1
本文链接：https://blog.csdn.net/weixin_45725797/article/details/108410896
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		.letter{
			color: #483D8B;
			font-size: 2rem;
			letter-spacing: 1rem;<! 间距>
		}
		.word{
			font-size: 1rem;
			text-indent: 2rem;
			word-break: normal;<!换行>
			word-spacing: -2.5rem;<!　用于定义英文单词之间的间距，对中文字符无效。>
		}
		.shadow{
			color: #483D8B;
			font-size: 6.25rem;
			text-shadow: 15px 15px 5px lightblue;<!阴影  : 水平   垂直  模糊的距离  颜色>
		}
		.oflow{
			width: 20px;<!宽度>
			height: 50px;<!高度>
			border: 1xp solid;<!边框>
			white-space: nowrap;<!空白>
			overflow: style: hidden;<!溢出>
			text-overflow: ellipsis;<!文本溢出>
		}
		</style>
		</head>
		<body>
		
		
			<p class="shadow" align="center">周五网站前台技术</p>
			<p class="letter"align="center"><u>未经允许请勿转帖</u></p>
			<p class="word">选择器格式:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</p>
			<p class="word">CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。
</p>
			<p class="word">样式表</p>
			<p class="word">行内式:行内式也称为内联样式，是通过标记的style属性来设置元素的样式。
</p>
			<p class="word">语法格式:
			<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>
</p>
			<p class="word">内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。
</p>
			<p class="word">语法格式
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head></p>
			<p class="word">联入式:链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中。
</p>
			<p class="word">语法格式:
			<head>
			<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
			</head>
</p>
			<p class="word">css基础选择器包括:标记选择器(是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。),类选择器(使用“.”（英文点号）进行标识，后面紧跟类名。),id选择器(使用“#”进行标识，后面紧跟id名),通配符选择器(器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。)
			语法格式分别为:
			标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<u>标签制定选择器:</u>
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。
<u>后代选择器:</u>
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
<u>并集选择器</u>
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。</p>
<p class="word"
<u>字体样式属性:</u>
font-size属性用于设置字号。
font-family属性用于设置字体。
font-weight属性用于定义字体的粗细。

font-style属性用于设置变体(字体变化)
font 属性用于对字体样式进行综合设置。
@font-face属性用于定义服务器字体。

word-wrap属性用于长单词和URL地址的自动换行
</p>

<p class="word"文本外观属性:
color 颜色 letter-spacing字母间距 word-spacing单词间距
line-height行高 text-align文本对齐
text-transform文本转换 text-decoration文本装饰 text-indent文本缩进
white-space空白

</p>
<p class="word">新增外观属性:
text-shadow文字阴影 text-overflow文本溢出 white-space:nowrap强制文本不能换行
overflow:hidden隐藏溢出文本 text-overflow:ellipsis显示省略标记



			</p>
		</body>
	</html>