CSS基础学习

最新推荐文章于 2021-06-03 16:46:37 发布

原创最新推荐文章于 2021-06-03 16:46:37 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

html css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS的基础知识，包括样式的作用、定义方式、语法，详细讲解了字体和文本属性、边框与背景、列表元素和表格属性、伪类别属性、div的使用以及布局方法。CSS的优势在于实现数据与表现的分离，提高开发效率，节省网络流量，并确保网页显示的一致性。

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

1 CSS(Cascading stye sheets)ceng层叠样式表

1 CSS(Cascading stye sheets)ceng层叠样式表

作用：

样式修饰html元素的内容
解决内容与表现分离的问题
提高工作效率
代码重用

CSS优势：
1）数据（html）和结构/显示（css）分离
2）提高开发效率
3）降低网络流量
4）整体网页效果统一

css中样式的定义(引入方式)：

1 内联式

 <p style=”color:red”></p>
     <p style="color:blue;font-size: 30px;">跨越</p>

2 内嵌式（行级样式）

<head>
      <style></style>
</head>

3 链接外部样式

<link type="text/css" rel="stylesheet" href="“外部样式文件名称”

4 导入外部文件

@impotr ："导入的css样式文件名称"

2 CSS语法:

Selector{property: value} /选择器{样式属性:属性的值}

优先级：行级（内联） > 内部 > 外部（就近原则）

1元素选择器

作用:通过元素选择器可以选择页面中的所有指定元素.

语法: 标签名{属性：属性的值}

2id选择器

--通过元素的id属性值选中唯一的一个元素(id是不能重复的)

语法: #id{属性:属性值;属性:属性值}

3类选择器

--通过元素的class属性值选中一组元素(class值是可以相同的)

语法: .class{属性:属性值;}

4分组选择器(并集选择器)又称选择器的组合或扩展选择器

--通过选择器分组可以同时选中多个选择器对应的元素.

语法:选择器1,选择器2，选择器N{属性:属性值;

5通配符选择器

--它可以用来选中页面中的所有的元素。

*{属性：属性值}

6复合选择器(交集选择器)

--可以选中同时满足多个选择器的元素

语法:选择器1….选择器n{属性：属性值}

7后代选择器又称选择器的嵌套（关联选择器）

--选中指定元素的指定的后代元素.

语法:祖先元素后代元素{} (后代：)

8子元素选择器

作用: 选中指定父元素的指定的子元素.

语法: 父元素>子元素

9伪类选择器

a、静态伪类：只能使用在超链接中（不包括锚），主要用来修饰超链接的状态
:link：访问前的状态

:visited：访问后的状态

b、动态伪类（所有标签有效）
:hover：鼠标悬浮在元素上方，向元素添加样式

eg：分组选择器的使用方法

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1,h2,h3,h4,h5,p{
				color: red;
				font-size: large;
			}
			
		</style>
	</head>
	<body>
		<h1>集体声明</h1>
		<h2 class="special"></h1>
			<h3>3</h3>
			<h4></h4>
			<h5>5</h5>
			<p class="special01">段落1111</p>
			<p id="#one">段落2222</p>
	</body>

eg：选择器的嵌套（子类选择器）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		p b{color: green;}
		</style>
	</head>
	<body>
		<p>你是我的<b>人</b></p>
	</body>

3.1 css字体和文本的相关属性：

字体属性

font-family文字的字体选择
font-size字体大小
font-style字体样式，有：normal,italic,oblique
font-weight:bold;/*粗体*/ 对象值：从100到900，最常用font-weight的值为bold
font-weight参数：

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+　特粗体
lighter : IE5+　细体
number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

3.2 文本属性：

color
letter-spacing:0.5cm ;/*字符间距*/
line-height
text-align:center;/*在所包含容器的中间*/
text-decoration文本的装饰效果 overline underline line-through
text-indent设置首行缩进
text-transform 控制文本大小写有uppercase lowercase capitalize
word-spacing:1cm;/*单词间距*/

3.3 css的边框与背景

边框：

background-color:#ff99ff ; /*背景颜色*/
background-image:url(images/2.gif) ; /*背景图片*/
background-repeat: no-repeat;/*no-repeat不要平铺，repeat-x,横向平铺， repeat-y纵向平铺*/
background-position:center right; /*背景位置*/
background-attachment: scroll ;/*背景的移动 ,fixed跟着滚动条一起移动，scroll不动*/
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)

3.4 背景：

background
background-image
background-attachment设置背景图像是否随页面滚动 fixed不滚动 scroll滚动
background-color
background-position
background-repeat 背景图片是否重复 repeat no-repeat repeat-x repeat-y

eg:

background-image:url(001.jpg);

background-position:200px 25px；设置背景图片从200px 25px开始

3.5 列表元素的属性：

list-style列表属性
list-style-image将图片设置成列表项标记
list-style-type列表标记的类型 disc circle squre decimal none等
list-style-position列表位置 outside inside

eg:

list-style-image和list-style-type不可以同时使用

3.6 表格的属性：

border-collapse是否将表格边框和并成单一边框
border-spacing设置单元格边框的距离
caption-sidesh设置表格标题的位置
empty-cells是否显示表格中的空单元格

eg：

		<style type="text/css">
			#table {
				font-family: "黑体";
				font-size: larger;
				border-collapse: collapse;
			}
			
			#table td, #table th {
				font-size: 12px;
				border: 2px solid green;
			}
			th{font-size: 16px;
			text-align: right;
			color: red;
			background-color: green}
		</style>
	</head>

	<body>
		<table id="table">
			<th> 我是表格标题</th>	<th> 我是表格标题2</th>
			<tr>
				<td>我是第一行第一列</td>
				<td>我是第一行第二列</td>
			</tr>
			<tr>
				<td>我是第二行第一列</td>
				<td>我是第二行第二列</td>
			</tr>
		</table>
	</body>

3.7 css伪类别属性

a:link 超链接的普通样式
a:visited 被超链接点击过的样式
a:hover 鼠标指针悬停的样式
a:active 在链接上单击时的样式

p:focus { /*获得焦点*/
color: blue;
}

input:focus {
background-color: blue;
}

eg:

		<style type="text/css">
			ul {
				widows: 200px;
				background-color: yellow;
				font-family: "黑体";
			}
			
			ul {
				list-style-type: none;
				padding: 5px;
			}
			
			li {
				border-bottom: dotted;
				border-color: green;
			}
			
			a {
				text-decoration: none;
				display: block;
				width: 200px;
				height: 25px;
			}
			
			a:link,	a:visited {
				background-color: red;
				color: white;
			}
			
			a:hover {
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>
				<a href="#">足球</a>
			</li>
			<li>
				<a href="#">篮球</a>
			</li>
			<li>
				<a href="#">排球</a>
			</li>
		</ul>

display:block; 将行级元素转化为块级元素

运行时图：

鼠标悬停时图：

3.8 div的使用

eg：

3.9布局

相对位置

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

绝对位置：

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
注意：设置了绝对定位（absolute）如果元素之间层叠后，可以配合z-index来设置，z-index的值不许要单位，只需要写数值即可，数值越大越往上

htm文件------

<div id="container">
			<div id="top">上（header）

			</div>
			<div id="left">左(left)

			</div>
			<div id="right">右(right)

			</div>
			<div id="footer">底（footer）

			</div>
		</div>

--css文件---------------------------------------

body {
	font-family: "黑体";
	font-size: 20px;
	font-weight: bolder;
}

#container {
	margin: 0px 0px;
	width: 1000px;
	background: white;
	height: 1200px;
	text-align: left;
}

#top {
	width: 1000px;
	height: 80px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	background-color: #E6EEDF;
}

#left {
	width: 400px;
	height: 1200px;
	background: #EBF7F7;
	margin: 0px;
	padding: 0px;
	float: left;
}

#right {
	width: 600px;
	height: 1200px;
	background: #F8E4E5;
	margin: 0px;
	padding: 0px;
	float: left;
}

#footer {
	width: 1000px;
	height: 50px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	background-color: #F7F3E7;
	clear: both;
}

eg：当当网界面的创建

<div class="container">

			<div class="banner01">

				<img src="img/a5/logo.jpg" />

				<p>尾品汇 当当优品 数字馆 都看阅读</p>

			</div>
			<div class="globallink">
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">图书</a>
					</li>
					<li>
						<a href="#">音像</a>
					</li>
					<li>
						<a href="#">服装</a>
					</li>
					<li>
						<a href="#">靴子</a>
					</li>
					<li>
						<a href="#">运动</a>
					</li>
					<li>
						<a href="#">箱包</a>
					</li>
					<li>
						<a href="#">美妆</a>
					</li>
					<li>
						<a href="#">珠宝</a>
					</li>
					<li>
						<a href="#">家居</a>
					</li>
					<li>
						<a href="#">食品</a>
					</li>
					<li>
						<a href="#">酒</a>
					</li>
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">数码</a>
					</li>
					<li>
						<a href="#">电脑</a>
					</li>
					<li>
						<a href="#">家电</a>
					</li>

				</ul>
			</div>
			<div class="banner02">
				<img src="img/a5/banner.jpg" />
			</div>
			<div class="left">
				<div class="left01">
					<h3>分类浏览</h3>
				<ul>
					<li>
						<a href="#">数码影音</a>
					</li>
					<li>
						<a href="#">家居装饰</a>
					</li>
					<li>
						<a href="#">母婴用品</a>
					</li>
					<li>
						<a href="#">美妆个护</a>
					</li>
					<li>
						<a href="#">食品保健</a>
					</li>
					<li>
						<a href="#">潮流服装</a>
					</li>
					<li>
						<a href="#">家具装饰</a>
					</li>
					<li>
						<a href="#">手表饰品</a>
					</li>
					<li>
						<a href="#">鞋包皮具</a>
					</li>
					<li>
						<a href="#">家用电器</a>
					</li>
					<li>
						<a href="#">电脑办公</a>
					</li>
					<li>
						<a href="#">玩具文具</a>
					</li>
					<li>
						<a href="#">汽车用品</a>
					</li>
					<li>
						<a href="#">手机通讯</a>
					</li>
					<li>
						<a href="#">流行饰品</a>
					</li>

				</ul>
				</div>
				
				<div class="left02">
					<h3>推荐榜单</h3>
				<ul>
					<li>
						<a href="#">图书畅销榜</a>
					</li>
					<li>
						<a href="#">音乐畅销榜</a>
					</li>
					<li>
						<a href="#">影视畅销榜</a>
					</li>
					<li>
						<a href="#">百货畅销榜</a>
					</li>
					<li>
						<a href="#">图书飙升榜</a>
					</li>
					<li>
						<a href="#">新书热卖榜</a>
					</li>
					

				</ul>
				
				</div>
				
				

			</div>
			<div class="right">

				<table>
					<th colspan="5"><img class="img01" src="img/a5/titleDot.jpg" />数码影 音
					</th>
					<tr>
						<td>
							<img class="imga1" src="img/a5/item_1.gif" />
							<img class="img001" src="img/a5/electron-01.jpg" /><br />
							<a href="#">【仅限一天】爱国者 半岛铁盒 U10000毫</a>
							<p class="number01">￥699.00</p>
							<p class="number02">￥299.00</p>

						</td>
						<td><img class="imga2" src="img/a5/item_2.gif" />
							<img class="img002" src="img/a5/electron-02.jpg" /><br />
							<a href="#">【限时抢购】羽博YB637 YB647移动电源苹  
</a>
							<p class="number01">￥499.00</p>
							<p class="number02">￥199.00~359.00</p>

							
						</td>
						<td><img class="imga3" src="img/a5/item_3.gif" /><img class="img003" src="img/a5/electron-03.jpg" /><br />
							<a href="#">【2013升级版/热销5000件】Philips/飞利 

							</a>
							<p class="number01">￥499.00 </p>
							<p class="number02">￥299.00</p>
						</td>
						<td><img class="imga4" src="img/a5/item_4.gif" /><img class="img004" src="img/a5/electron-04.jpg" /><br />
							<a href="#">
								【绝对超值】紫光电子 双声道立体声耳机
	</a>
							<p class="number01">￥99.00 </p>
							<p class="number02">￥49.00</p>
						</td>
						<td><img class="imga5" src="img/a5/item_5.gif" /><img class="img005" src="img/a5/electron-05.jpg" /><br />
							<a href="#">【热销2000台】紫光电子 专业高清V-P30 
						</a>
							<p class="number01"> ￥599.00</p>
							<p class="number02">￥299.00</p>
						</td>
					</tr>
					<th colspan="5"><img src="img/a5/titleDot.jpg" />家居装饰
					</th>
					<tr>

						<td>	<img class="imga1" src="img/a5/item_1.gif" /><img class="img001" src="img/a5/home-1.jpg" /><br />
							<a href="#">诗蔓 【原创正品 独家首发】专柜正品 纯 

							</a>
							<p class="number01"> ￥568.00</p>
							<p class="number02">￥128.00</p>
						</td>
						<td>	<img class="imga2" src="img/a5/item_2.gif" /><img class="img002" src="img/a5/home-2.jpg" /><br />
							<a href="#">鼎顺 29.9秒杀 天然红檀木 佛珠手链手  

							</a>
							<p class="number01"> ￥99.00</p>
							<p class="number02">￥29.00</p>
						</td>
						<td>	<img class="imga3" src="img/a5/item_3.gif" /><img class="img003" src="img/a5/home-3.jpg" /><br />
							<a href="#">KASSIA卡希雅正品 9-10mm天然珍珠项链  

							</a>
							<p class="number01"> ￥1280.00</p>
							<p class="number02">￥258.00</p>
						</td>
						<td>	<img class="imga4" src="img/a5/item_4.gif" /><img class="img004" src="img/a5/home-4.jpg" /><br />
							<a href="#">欧炫 最爱四叶草奥地利元素 水晶材质项  

							</a>
							<p class="number01"> ￥299.00</p>
							<p class="number02">￥68.00</p>
						</td>
						<td>	<img class="imga5" src="img/a5/item_5.gif" /><img class="img005" src="img/a5/home-5.jpg" /><br />
							<a href="#">凤凰涅磐项链 女 手链 天然水晶干青手串  

							</a>
							<p class="number01"> ￥398.00</p>
							<p class="number02">￥198.00</p>
						</td>
					</tr>
					<th colspan="5"><img src="img/a5/titleDot.jpg" />流行饰品
					</th>
					<tr>

						<td>	<img class="imga1" src="img/a5/item_1.gif" /><img class="img001" src="img/a5/beauty-1.jpg" /><br />
							<a href="#">当当优品 牛津布百纳箱 收纳箱 66L（多  

							</a>
							<p class="number01">￥179.00</p>
							<p class="number02">￥79.00~89.00</p>
						</td>
						<td>	<img class="imga2" src="img/a5/item_2.gif" /><img class="img002" src="img/a5/beauty-2.jpg" /><br />
							<a href="#">当当优品 全棉柔软吸水 纯色经典家庭中  

							</a>
							<p class="number01">￥49.00</p>
							<p class="number02">￥29.00</p>
						</td>
						<td>	<img class="imga3" src="img/a5/item_3.gif" /><img class="img003" src="img/a5/beauty-3.jpg" /><br />
							<a href="#">索尔诺五层儿童书柜/多功能收纳层架/简  

							</a>
							<p class="number01">￥200.00</p>
							<p class="number02">￥105.00</p>
						</td>
						<td>	<img class="imga4" src="img/a5/item_4.gif" /><img class="img004" src="img/a5/beauty-4.jpg" /><br />
							<a href="#">[当当自营]LOCK&LOCK乐扣 格拉斯耐 

							</a>
							<p class="number01">￥299.00 </p>
							<p class="number02">￥156.00</p>
						</td>
						<td>	<img class="imga5" src="img/a5/item_5.gif" /><img class="img005" src="img/a5/beauty-5.jpg" /><br />
							<a href="#">[当当自营]LOCK&LOCK乐扣 运动水杯  
</a>
							<p class="number01">￥149.00 </p>
							<p class="number02">￥89.00</p>
						</td>
					</tr>

				</table>

			</div>

			<div class="footer">
				<hr />
				<p>1111111111111111111111
					<img src="img/a5/validate.gif" />1111111111111111111111
				</p>
			</div>
		</div>

--css------------------------------

body {
	background-color: yellow;
	margin-top: 80px;
}

.container {
	width: 960px;
	margin: 0;
	background-color: white;
}

.banner01 p {
	background-image: url(../img/a5/icon_count.png);
	background-repeat: no-repeat;
	margin: 20px 0px 0px auto;
	font-size: 15px;
	border-color: #EAFFFf;
	background-color: #EAFFFA;
	padding: 5px;
	color: darkgrey;
	float: right;
}

.globallink {
	height: 25px;
	background-color: #FF6C11;
}

.globallink ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.globallink ul li {
	list-style-position: outside;
	float: left;
	text-align: center;
	width: 60px;
}

.globallink ul li a {
	color: white;
	text-decoration: none;
}

.globallink ul li a:hover {
	color: red;
}

.banner02 {
	
	width: 1200px;
}
.left01{
	border-color: #C6910D;border-style: solid;
}
.left02{
	margin-top: 5px;
	border-color: #C6910D;border-style: solid;
}

.left {
	
	
	margin-top: -20px;
	width: 180px;

	float: left;
}

.left h3 {
	background-image: ;
	color: white;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-color: #C6910D;
}

.left ul {
	color: #A9A9A9;
}

.left ul li a {
	text-decoration: none;
	color: #A9A9A9;
}

.right table th {
	color: #CFA31C;
	text-align: left;
	border-bottom: solid;
}
.right table td{
	height: 10px;
}
.right table tr{
	
	width: 160px;
}
.right table .img001{
	
	
	border: solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #A9A9A9;

}
.right table .imga1{
	
	position: absolute;
	
	margin-top: 10px;
	margin-left: 10px;

}

.right table .imga2{
	
	position: absolute;
	
	margin-top: 10px;
	margin-left: 10px;

}.right table .imga3{
	
	position: absolute;
	
	margin-top: 10px;
	margin-left: 10px;

}

.right table .imga4{
	
	position: absolute;
	
	margin-top: 10px;
	margin-left: 10px;

}.right table .imga5{
	
	position: absolute;
	
	margin-top: 10px;
	margin-left: 10px;

}

.right table .img002{
	border: solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #A9A9A9;

}
.right table .img003{
	background-image: url(../img/a5/item_3.gif);
	z-index: 0;
	border: solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #A9A9A9;

}
.right table .img004{
	border: solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #A9A9A9;

}.right table .img005{
	border: solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #A9A9A9;

}
.right table a{
	text-decoration: none;
	font-size: small;
}
.right table td .number01{
	color: #A9A9A9;
	text-decoration: line-through;
	font-size: small;
}
.right table td .number02{
	color: red;
		font-size: small;
	margin-top: 1px;
}
.footer{
	text-align: center;
}

----css的尺寸-------------------------------------------------