【HTML学习笔记】CSS样式

最新推荐文章于 2024-11-18 14:56:18 发布

原创最新推荐文章于 2024-11-18 14:56:18 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

网页专栏收录该内容

4 篇文章

订阅专栏

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

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

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

p{ /*选择器*/
	font-size:12px; /*字号*/
	color:blue; /*颜色*/
	font-weight:bold; /*加粗*/
}

添加方法一：行内样式，style作为<p></p>的属性添加，只对当前标签起作用。

<p style = "color:red"> /*行内样式*/

添加方法二：内嵌样式，嵌入到<head></head>标签中，针对多个标签起作用。

<style type="text/css">
		p{
			color: red;
		} /*内嵌样式，只对当前页面的所有p标签有用*/
	</style>

添加方法三：外部单独文件，命名为 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;
}

标签选择器：定义在某种标签上使用。
类别（class）选择器：可作用于多个网页元素，
ID选择器：用#号开头定义，有唯一性，只能唯一被引用一次，

在这里插入代码片

嵌套声明：<p></p>标签嵌套<span></span>标签，写作p span{ }。
集体声明：作用于<h1></h1>和<p></p>标签上，写作h1,p{ }。
全局声明：*{ }，针对所有网页元素。

单位	描述
`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-image`	`url（”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-width		`px thin medium thick`
border-style		`dashed 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的定位机制

文档流flow
为默认的定位效果，上下排列。
元素分类：block、inline、inline-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>