HTML CSS 的最基础样式

其他 2019-01-11 19:03:02 阅读次数: 0

CSS的样式

行内样式
行内样式直接定义再HTML标记之内，通过style属性来实现。这种方式比较容易接受，但是灵活性不强。
内嵌式
在页面中使用 <style></style>标记将CSS样式包含在页面中。该方式没有行内标记表现的直接，但是能够使页面更加规整。 与行内样式相比，内嵌式样式更加便于维护。
链接式
链接外部CSS样式表是最常见的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过标记引用，是一种最为有效的使用CSS样式的方式。
<link rel="stylesheet" type="text/css" href="style.css">
rel：定义外部文档和调用文档间的关系，stylesheet则是外部样式表。
href：CSS文档的绝对或相对路径。
type：指的是外部文件的类型。

CSS 样式的基本属性

背景属性 
background-attachment:   背景图片是否固定

background-color:   这是背景色

background-image:   设置图片背景

background-position:   设置背景图片的起始位置

background-repeat:   设置图片是否及如何重复
文本属性 
color:   文本颜色

direction:   文本方向
 	   ltr	   文本方向从左到右，默认。
 	   rtl	   文本方向从右到左。

<style>  div{direction: rtl}</style>

line-height:   行高

text-align:   对齐元素中的文本

text-indent:   缩进元素中文本的首行

   <style> div{ direction: rtl }</style>

text-transform:   元素中的字母

<style> 
h1 {text-transform:uppercase}   /*文本中的*/
h2 {text-transform:capitalize}  /*每个单词以大写字母开头*/
p {text-transform:lowercase}    /*无大写字母，仅有小写字母*/
</style>
轮廓：突出元素的作用。 
outline：设置轮廓属性

outline-color：设置轮廓颜色

outline-style：设置轮廓样式

outline-width：设置轮廓宽度
字体 
font-family:   设置字体系列

font-size:   字体尺寸

font-style:   字体格式，italic 斜体

font-variant:   以小字体（small-caps）或正常字体显示文本

font-weight:   字体粗细
链接 
a:link：普通的、未被访问的链接

a:visited：用户已访问的链接

a:hover：鼠标指针位于链接的上方

a:active：链接被点击的时刻

text-decoration：用于去掉链接中的下划线
列表: 可放置或改变列表标志，或者将图像作为列表标志。 
list-style：none 去掉圆点
表格 
border:   表格边框

border-collapse:   折叠边框，相当于去除; table {  border-collapse:collapse;  }

width/height:   表格宽高

text-align:   表格文本对齐

padding:   表格内边距

background-color:   表格颜色
定位 
position:把元素放在一个静态的、相对的、绝对的或固定的位置中。

top:元素向上的偏移量。

left:元素向左的偏移量。

right:元素向右的偏移量。

bottom:元素向下的偏移量。

static:偏移属性没有效果

relative:相对位置

absolute:绝对位置

fixed:随页面滑动而滑动

overflow:设置元素溢出其区域发生的事情。

<!DOCTYPE HTML> //electric cooker
<html>
	<meta charset="utf-8" />

	<head>
		<style>
			body {
				width: 1603px;
				height: 1800px;
				border: 1px solid black;
			}
			
			#div1 {
				border: 1px solid #000000;
				width: auto;
				height: 3%;
				position: relative;
				margin: 1px;
			}
			
			.a1:hover {
				color: red;
				border-bottom: 1px solid red;
			}
			
			#div2 {
				width: auto;
				height: 2%;
				border: 1px solid #000000;
				margin: 1px;
				background-color: #000000;
				position: relative;
			}
			
			.a2:hover {
				border-bottom: 1px solid white;
			}
			
			#div3 {
				width: auto;
				height: 800px;
				border: 1px solid #000000;
				margin: 1px;
			}
			
			#div4 {
				width: auto;
				height: 28%;
				border: 1px solid #000000;
				margin: 1px;
				position: relative;
			}
			
			#div5 {
				width: auto;
				height: 9.2%;
				border: 1px solid black;
				margin: 1px;
			}
			#div6{
				width: auto;
				height: 5.2%;
				border: 1px solid black;
				margin: 1px;
				line-height: 20px;
			}
			.t1{
				margin: 25px;
				font-family: STfangsong;
				font-weight: bolder;
				font-size: larger;
				color: #000000;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<div>
				<img src="img/logo.gif" style="position:absolute;left:50px;top: 4px;" />
				<img src="img/header.jpg" style="position: absolute;left: 40%;top: 1px;" />
				<a href="http://www.taobao.com" style="text-decoration: none;font-size: small; font-family: '微软雅黑';line-height: 60px;position: absolute;right:160px ;" class="a1">购物车</a>
				<a href="http://www.taobao.com" style="text-decoration: none;font-size: small; font-family: '微软雅黑';line-height: 60px;position: absolute;right:100px ;" class="a1">注册</a>
				<a href="http://www.taobao.com" style="text-decoration: none;font-size: small; font-family: '微软雅黑';line-height: 60px;position: absolute;right:40px ;" class="a1">登陆</a>
				<!--hover效果中的下划线为什么距离文本那么远-->
			</div>
		</div>
		<div id="div2">
			<a href="http://www.taobao.com" style="font-family: STkaiti;color: white;text-decoration: none;line-height: 30px;font-size: medium;position:absolute;left: 4%;" target="_blank" class="a2">首页</a>
			<a href="http://www.taobao.com" style="font-family: STkaiti;color: white;text-decoration: none;line-height: 30px;font-size: medium;position:absolute;left: 8%;" target="_blank" class="a2">手机数码</a>
			<a href="http://www.taobao.com" style="font-family: STkaiti;color: white;text-decoration: none;line-height: 30px;font-size: medium;position:absolute;left: 14.5%;" target="_blank" class="a2">家用电器</a>
			<a href="http://www.taobao.com" style="font-family: STkaiti;color: white;text-decoration: none;line-height: 30px;font-size: medium;position:absolute;left: 21%;" target="_blank" class="a2">生活用品</a>
			<a href="http://www.taobao.com" style="font-family: STkaiti;color: white;text-decoration: none;line-height: 30px;font-size: medium;position:absolute;left: 27.5%;" target="_blank" class="a2">电脑办公</a>
		</div>
		<div id="div3">
			<img src="img/1.jpg" alt="loading" style="width: auto;" />
		</div>
		<!--如何设置，让图片跟随窗口进行放小放大的缩放-->
		<!--为什么行内元素，如<p>也能够浮动-->
		<!--position:absolute 和position:relative 的区别-->
		<!--position上下级之间的关系，同一个div中，为何两者position会有区别，导致两者排列时候错开-->
		<div id="div4">
			<div>
				<p style="font-family:'STkaiti';font-size: xx-large;line-height: none;top: 10px;margin: 2px;">热门商品</p>
				<img src="img/20180328090137200.jpg" alt="loading……" style="position: absolute;top: 8px;left: 110px;" />
			</div>
			<div>
				<img src="img/big01.jpg" alt="loading……" style="position: absolute;left: 1px;" />
				<img src="img/middle01.jpg" alt="loading……" style="position: absolute;left: 13%;" />
			</div>
			<div style="position: absolute;right: -15px;">
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
			</div>
			<div style="position: absolute;right: -15px;top: 250px;">
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
				<div style="float: right;width: 200px;position: relative;">
					<img src="img/small08.jpg" style="margin: 30px 30px 1px 30px;float: right;" />
					<ul style="margin:5px;position :absolute;left:30px;top:160px;list-style:none;text-align:center;font-size: large;line-height: 1.8;">
						<li style="color: black;letter-spacing: normal;font-weight: bold;">
							<a href="#div1" style="text-decoration: none; color: darkslateblue;">电饭煲</a>
						</li>
						<li>￥200</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="div5">
			<img src="img/ad.jpg" style="width: 100%;"/>
		</div>
		<div id="div6">
			<img src="img/footer.jpg" style="width: 100%;" />
		</div>
		<div id="div6">
			<div  class="t1">
				<center>
				<label>
					<a href="#div1" style="color:black;text-decoration: none;">关于我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#div1" style="color:black;text-decoration: none;">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#div1" style="color:black;text-decoration: none;">招贤纳士</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#div1" style="color:black;text-decoration: none;">法律声明</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#div1" style="color:black;text-decoration: none;">友情链接</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
					Copyright<sup>&reg;</sup>部开源<sup>&copy;</sup>
				</label>
			</center>
			</div>
			
		</div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_43662261/article/details/85159828
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022