【HTML学习笔记】CSS样式

本文详细介绍了CSS的多种添加方法,包括行内样式、内嵌样式及外部样式表的应用,并讲解了选择器、单位、属性等内容,同时涉及超链接样式、列表表格、动画效果以及布局和定位等高级主题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

多层样式重叠时,按“就近原则”覆盖:行内样式>内嵌样式>链接样式>浏览器默认样式。

p{ /*选择器*/
	font-size:12px; /*字号*/
	color:blue; /*颜色*/
	font-weight:bold; /*加粗*/
}
  1. 添加方法一:行内样式style作为<p></p>的属性添加,只对当前标签起作用。
<p style = "color:red"> /*行内样式*/
  1. 添加方法二:内嵌样式,嵌入到<head></head>标签中,针对多个标签起作用。
<style type="text/css">
		p{
			color: red;
		} /*内嵌样式,只对当前页面的所有p标签有用*/
	</style>
  1. 添加方法三:外部单独文件,命名为 style.css,选择大括号形式设置属性。
<link rel="stylesheet" href="css/style.css"/> /*html文件引用*/
<!--html文件内代码-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<p>Lorem ipsum.</p>
</body>
</html>
<!--style.css文件内代码-->
p{
	color: red;
	font-size: 12px;
}
  1. 标签选择器:定义在某种标签上使用。

  2. 类别(class)选择器:可作用于多个网页元素,

  3. ID选择器:用#号开头定义,有唯一性,只能唯一被引用一次,

在这里插入代码片
  1. 嵌套声明<p></p>标签嵌套<span></span>标签,写作p span{ }

  2. 集体声明:作用于<h1></h1><p></p>标签上,写作h1,p{ }

  3. 全局声明*{ },针对所有网页元素。

单位描述
px像素
em字符,自适应用户字体
%百分比
颜色描述
rgb(red,green,blue)每个分量取0-255
rgb(red%,green%,blue%)百分比值0%-100%
rgba(red,green,blue,a)a值为设置不透明度,0.0-1.0
#rrggbb十六进制数表示
属性描述取值
color文本颜色red #f00 rgb(255,0,0)
letter-spacing字符间距2px -3px(字符相互重叠)
line-height行高14px 1.5em 120%
text-align对齐center left right justify(两端对齐)
text-decoration装饰线none overline underline line-through
text-indent首行缩进2em
text-shadow阴影水平偏移-垂直偏移-模糊度-颜色
字体描述取值
font在一个声明中设置所有字体的属性font:bold 18px ’幼圆‘
font-family字体系列,若没有第一种字体,则使用第二种,没有第二种则使用第三种font-family:"Hiragino Sans GB","Microsoft YaHei",san-serif;
font-size字号14px 120%
font-style斜体italic(斜体更强) oblique
font-weight粗体bold
背景描述
background-color颜色
background-imageurl(”logo.jpg“)图片会覆盖掉背景颜色
background-repeat图片填充方式,默认为棋盘格填充(repeat);横向填充(repeat-x);纵向填充(repeat-y);只显示一次(no-repeat
background: 颜色 图片 repeat
超链接描述
a:link普通的、未被访问的超链接
a:visited用户已访问
a:hover鼠标指针悬浮在上面的
a:active被鼠标点击的

伪类选择器用“:”标记。

定义四种超链接样式的优先级为:Love & Hate

a:link{
	text-decoration : none; /*无下划线装饰*/
	color : #09f; /*浅蓝色*/
} /*未访问*/
a:visited{
	color : #f00; /*红色*/
} /*已访问*/
a:hover{
	text-decoration : underline;
	color :#03c; /*深蓝色*/
} /*鼠标悬停*/
a:active{
	text-decoration : none; /*无下划线装饰*/
	color : #03c;
} /*活跃*/

设置悬停文本变大:

a{
	font-size:22px;
}
a:hover{
	font-size : 120%;
}

列表/表格

好的这个没保存不见了
列表:list-style&&list-style-image&&list-style-type&&list-style-position
表格:width&&height&&border&&border-collapse

CSS 动画

<style type="text/css">
		p {
			width: 100px;
			height: 100px;
			background-color: antiquewhite;
		}
		p:hover {
			animation-duration: 1s;
			animation-delay: 200ms;
			animation-name: kaopu;
			animation-iteration-count: infinite;/* 动画无限循环 */
			animation-direction: nomal;/* 动画变大以后再变小 */
		}
		@keyframes kaopu {
			to{
				width: 200px;
				height: 200px;
				background-color: orange;

			}
		}
	</style>

CSS的布局和定位

盒子模型

属性描述取值
overflow超出内容显示方法hidden scroll auto
border-widthpx thin medium thick
border-styledashed dotted solid double

border:width style color

.line{
	height:1px;
	width:500px;
	border-top:1 px solid #e5e5e5;
}
margin:top right bottom left

bottom缺省和top相等,left与right相等,margin属性垂直外边距自动合并,水平居中auto。

CSS的定位机制

  1. 文档流flow
    为默认的定位效果,上下排列。
    元素分类:blockinlineinline-block,不同类像元素可通过display相互转换。
  • block元素独占一行,可以设置height、width、margin、padding属性。常见的block元素有:<div> <p> <h1>~<h6> <ol> <ul> <table> <form>
a{
	display:block;
}<!--将超链接显示为block类型-->
  • inline元素不单独占用一行,宽度够用则所有inline都在一行显示,不可以设置width、height。常见的inline元素有<span> <a>
    inline元素有间隙问题,一般将其转为block类型,如嵌套在<p>标签内或<ul><li>标签内。
  • inline-block类型元素,不单独占用一行,元素的各个标签都可以设置。常见的为<img>标签。
    导航条示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mysite</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#nav{
			width: 300px;
			margin: 100px auto;/*0表示上下边距*/
			font-size: 0;/*可解决inline元素默认间距问题*/
		}
		a{
			display: inline-block;
			width: 80px;
			height: 30px;
			font-size: 14px;
			text-align: center;
			line-height: 30px;/*与height值相同则可以达到垂直居中效果*/
			text-decoration: none;
			border-bottom: 1px solid #ccc;
		}
		a:hover{
			color: white;
			background-color: #ccc;
			border: 1px solid;
			border-left-color: orange;
			border-right-color: orange;
			border-top-color: orange;
		}
	</style>
</head>
<body>
	<div id="nav">
		<a href="#">链接1</a>
		<a href="#">链接2</a>
		<a href="#">链接3</a>
	</div>
</body>
</html>
  1. 浮动定位float
    默认情况下,两个div盒子是垂直排列的;要把区域拆分成若干列时通常采用浮动定位。
  • float属性可以设置浮动
  • clear属性可以清除浮动,单向清除浮动,则被清除侧不会有元素显示了
  • position属性
  1. 层定位layer
    让网页元素像图层一样叠在一起
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值