CSS基础

最新推荐文章于 2024-05-31 19:50:46 发布

AkashiYB

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量159

点赞数 2

分类专栏： major 文章标签： css html html5

本文链接：https://blog.csdn.net/AkashiYB/article/details/120614638

版权

major 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.CSS的引用

a.内联样式(不推荐）

这种样式是把对页面各元素的样式设置直接写在网页主体内部，作为HTML标记的属性

嵌入样式：

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		<!-- 选择器1{样式属性1:取值;样式属性2:取值;....}
		选择器2{样式属性1:取值;样式属性2:取值;....} 
		选择器3{样式属性1:取值;样式属性2:取值;....} 
		选择器4{样式属性1:取值;样式属性2:取值;....} -->
	</style>
</head>

b.外部样式（推荐）

这种方式是将外部的独立的样式表文件引入到HTML文件中，样式表文件就是CSS文件，拓展名为.css。（注意一定要写<link></link>标签让外部样式链接起来）

<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css">
	</head>

rel="stylesheet"属性用来声明在HTML文件中使用外部样式表。

href="css/style.css"属性用来知名改文件的类型是样式表类型

c.导入样式（不推荐）

导入样式与外部样式比较相似，只是引入方式的不同。采用导入方式引入的样式表，在HTML文件初始化，会被全部导入到HTML文件内，作为文件的一部分，从加载速度来说会稍稍慢，但宽带足够大，用户不会察觉出来。

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		@import url("外部样式表文件地址");
	</style>
</head>

import语句后面的;是不能省略的。

2.CSS选择器和声明

（1）标签选择器

网页里面的图片列表段落都是很多HTML标签或标签对组成的，直接给标签设置样式的类型就是标签选择器。

HTML代码：

	<body>
		<a href="#">点此链接1</a>
		<p>
			<a href="#">点此链接2</a>
		</p>
	</body>

CSS代码：

a{
	color: #f00;
	font: 16px;
}

当用这种方式设置的a标签的样式，会使整个HTML页面中的所有超链接的样式都发生了相应的变化。

若页面内该标签是唯一的，可以使用该标签选择器声明样式；若不是唯一的标签，有希望有不同样式效果，则需要结合其他的声明方式

（2）类选择器【class选择器】

可以应用于网页中的某一种元素，而不只是应用于某一个元素（比较推荐大部分样式都用这个选择器）

HTML代码：

1.类可以使用多次

<body>
	<div class="top section"></div>
</body>

2.同一个标签可以使用多类

	<body>
		<div class="top section"></div>
		<div class="top class2"></div>
	</body>

CSS代码：类名之前要加" . "

.top{
	color: #f00;
	font-size: 16px;
}

如果标签有冲突以css中后来为大；如果无法避免样式冲突，则使用多个标签在css代码中包含两个标签。

（3）id选择器

id选择器也是可以用来定义某一类相同的样式，但是与class不同的是，在同一个HTML文件中，id名不能重复。所以通常是使用id选择器来定义一个特定的css规则。

HTML代码：

	<body>
		<div id="menu"></div>
	</body>

CSS代码：

#menu{
	color: #f00;
	font-size: 16px;
}

（4）分类选择器

当多个选择器声明的样式完全相同时，可以将他们统一进行声明，个选择器之间使用英文" , "隔开，来提高代码效率。

HTML代码：

	<body>
		<div id="menu"></div>
		<div class="style"></div>
	</body>

CSS代码：

#menu,.style{
	color: #f00;
	font-size: 16px;
}

（5）包含选择器【父子选择器】

需要为一个容器里面的元素设置样式时，需要使用包含选择器。语法为：父选择器子选择器{属性1：属性值；属性2：属性值；}，父选择器和子选择器之间用空格隔开。

HTML代码：

	<body>
		<div id="menu"></div>
		<div class="style">
			<div class="red">1111111111</div>
		</div>
	</body>

CSS代码：

.style .red{
	color: #f00;
	font-size: 16px;
}

注意包含选择器是包含孙标签的，如果要不包含孙标签，应该使用父子关系：.class1>.class2{}父子关系标签之间用大于符号链接。

（6）通配符选择器

通配符选择器是一种特殊类型的选择器，他用*来表示选择器的名称，可以定义多有的网页元素显示格式。一般是用于统一浏览器设置。

*{
	margin: 0;
	padding: 0;
}

通常用于去掉标签自带的margin和padding值具体盒子模型会详细讲解。

（7）相邻关系

相邻关系仅控制之后紧邻的标签样式，通常标签用加号链接。

.style+.style2{
	color: #f00;
	font-size: 16px;
}

（8）兄弟关系

无论是否相邻控制后面所有同级的标签，通常标签用波浪~链接。

.style~.style2{
	color: #f00;
	font-size: 16px;
}

注意，相邻关系和兄弟关系都是平级关系。

AkashiYB

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS基础

目录1.CSS的引用a.内联样式(不推荐） b.外部样式（推荐） c.导入样式（不推荐）2.CSS选择器和声明（1）标签选择器（2）类选择器【class选择器】1.CSS的引用a.内联样式(不推荐）这种样式是把对页面各元素的样式设置直接写在网页主体内部，作为HTML标记的属性嵌入样式：<head> <meta charset="utf-8" /> <title></tit...
复制链接

扫一扫