【css样式设计】

最新推荐文章于 2024-11-05 14:45:41 发布

馥滢（＇▿ ＇）

最新推荐文章于 2024-11-05 14:45:41 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/qq_55439444/article/details/127556950

版权

css字体属性样式：
color:设置颜色
letter-spacing：设置字体间距
word-spacing：英文单词与单词之间，对汉字无效果
line-height:设置行间距
text-transform: uppercase 大写
             lowercase 转小写
             capitalize 首字母大写
text-decoration：修饰
text-align：设置对齐方式
                 文字的水平对齐方式，此属性只能用在块元素上
text-indent：首行文本的缩进

white-space属性可设置空白符的处理方式。
其属性值如下:
normal:常规（默认值)，文本中的空格、空行无效，满行（到达区域边界）后自动换行
pre:预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap:空格空行无效，强制文本不能换行，除非遇到换行标签<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

text-shadow：为页面中的文本添加阴影效果
h-shadow：用于设置水平阴影的距离
v-shadow：用于设置垂直阴影的距离
blur：用于设置模糊半径
color：用于设置阴影颜色
注意︰阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页设计</title>
		<link rel="stylesheet" href="style1.css" type="text/css"/>
	<style>
		/* 复合选择器 基础选择器  */
		/*交集选择器  p.one 
		  后代选择器  p .one
		  孩子选择器  p>.one
		  兄弟选择器  紧邻 p+.one
		p~.one 其他兄弟
		*/
	</style>
	 
	
	</head>
	<body>
		<h2>为什么要跟着新闻网站学网页设计?(图)</h2>
		<p class="one"><em class="blue">2021年3月5日11:08</em><em class="blue">黑马网</em><em class="gray">我有话说(<em id="num">802</em>人参与)</em></p>
		<hr />
		<p class="two">在许多设计师看来，新闻网站简直就是无趣、冗长、枯燥的代名词，跟炫酷惹眼的设计—点边儿都不沾好吗?</p>
		<p>那小编可就要提醒你喽，你对新闻网站的观念可是落后了十年。黑马网<em class="blue">[微博]</em>和传教育<em class="blue">[微博]</em>于2021年3月在京举办“新闻网站设计培训思考主题会”。更利于新手设计师理解用户体验的意义。</p>
		<p class="four">新闻网站的优秀之处就在于标准，没有浮夸的炫技，却不乏相当惊艳的用户体验。</p>
		<p>黑马网<em class="blue">[微博]</em>还表示新闻网站想要好看、拥有良好的用户体验，就需要更精心的页面布器。</p>

	</body>
</html>

@charset "utf-8";
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				font: 14px/24px "宋体";
				color: #000;
			}
			h2{
				font: normal 22px/35px "微软雅黑";
				color: #072885;
				text-align: center;
			}
			.one{
				font-size: 12px;
				text-align: center;
			}
			p{
				text-indent: 2em;
			}
			.blue{
				color: #3d6cb0;
			}
			.gray{
				color: #666;
			}
			#num{
				color: #b60c0c;
			}
			em{
				font-style: normal;
			}
			.two{
				font-family: "楷体";
			}
			.four{
				font-weight: bold;
			}