首页 语言正文

HTML CSS 的最基础样式

小编 2026-06-06 阅读:1559 评论:0
CSS的样式 行内样式 行内样式直接定义再HTML标记之内，通过style属性来实现。这种方式比较容易接受，但是灵活性不强。 内嵌式 在页面中使用<style></styl...

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:   字体风格

font-variant:   以小型或正常字体显示文本

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;\" />
					@font-face {
				font-family: "autolinktags";
				src: url("https://www.seowoai.com/zb_users/plugin/AutoLinkTags/style/fonts/iconfont.woff2") format("woff2"),
				url("https://www.seowoai.com/zb_users/plugin/AutoLinkTags/style/fonts/iconfont.woff") format("woff"),
				url("https://www.seowoai.com/zb_users/plugin/AutoLinkTags/style/fonts/iconfont.ttf") format("truetype");
				font-weight:normal;
				font-style:normal;
			}.tagslink::after { content:"\e613"; margin:2px 0 0 0px; font-size:12px; font-family:"autolinktags"; display:inline-block; vertical-align:top; }
版权声明

本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。

上一篇：领域驱动设计实践 下一篇：inux shell awk 语法 ----给力
相关阅读
热门文章

  • 机房智能化温湿度解决方式之POE供电以太网温湿度传感器

    机房智能化温湿度解决方式之POE供电以太网温湿度传感器
    机房智能化温湿度解决方式之POE供电以太网温湿度传感器 北京盈创力和电子科技有限公司 智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家，北京盈创力和 北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块，利用它可以实现现场温度值、相对湿度值的采集，同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。 工作于-40℃～85℃工业级带...

  • Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

    Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
    Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model)：对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt​,t∈N}，我们认为每个观测结果yty_tyt​的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt​∈{xt​,t∈N}，即：p(...

  • HTTP状态保持的原理

    HTTP状态保持的原理
    a)在用户登录之后，浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候，浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录　　Http是无状态的，就是连接时数据互通，关闭后...

  • Hive 系统函数及示例

    Hive 系统函数及示例
    查看所有系统函数 show functions; 函数分类 内置函数【系统函数】 数学函数： floor、round、ceil、cos、log2等 字符串函数： length、reverse、trim、lower、get_json_object、repeat等 收集函数： size 转换函数： cast 日期函数： year、month、datediff、date、date_add等 条件函数： coalesce、case…w...

  • CSRF的原理和防范措施

    CSRF的原理和防范措施
    a)攻击原理：i.用户C访问正常网站A时进行登录，浏览器保存A的cookieii.用户C再访问攻击网站B，网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交，传指定的参数iii.而攻击网站B在访问网站A的时候，浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态，所以...
最近发表
标签列表

Powered By Z-BlogPHP  Theme By 老白编程