前端(2)——CSS

最新推荐文章于 2024-08-27 15:59:14 发布

xiexiecm

最新推荐文章于 2024-08-27 15:59:14 发布

阅读量257

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/xiexiecm/article/details/59546445

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS层叠样式表

1 / 步骤：

（1）CSS放置在title标签下面

（2）所有的样式都放在同一个标签中：<style></style>

（3）在标签中放入对应的样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		选择器{
			属性名 ： 属性值;
		}
	</style>
</head>
<body>

</body>
</html>

type的含义，用来声明这个style标签只能用来存放css样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			color: red;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p>唐僧</p>
	<p>孙悟空</p>
	<p>猪八戒</p>
	<p>沙僧</p>
</body>
</html>

2 / 字体的属性：

（1）color : 文本颜色

（2）font-size : 字体大小

（3）font-style : 字体样式

（4）font-family : 设置字体格式

（5）font-weight : 文本粗细

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			color: red;
			font-size: 20px;
			font-style: italic;
			font-family: "微软雅黑"; 
			font-weight: 900;
		}
	</style>
</head>
<body>
	<p>唐僧</p>
	<p>孙悟空</p>
	<p>猪八戒</p>
	<p>沙僧</p>
</body>
</html>

3 / 颜色的设置： color : 颜色

4 / 选择器

（1）标签选择器

	<style type="text/css">
		标签名 {
			属性名 ： 属性值；
		}
	</style>

标签选择器只能给某一种标签的元素设置属性。

（2）类选择器 class

类选择器，根据类名来给对应的标签设置样式。

类名：相当于标签的名字。一般情况下一个类名可以被多个标签使用。

	<style type="text/css">
		.class名 {
			属性名 ： 属性值；
		}
	</style>

每一个标签都可以设置class类名。
（3）id选择器

每一个标签都可以设置id名。

id名：相当与标签的唯一号码。一个id名只能被一个标签使用。唯一的。

	<style type="text/css">
		# id名 {
			属性名 ： 属性值；
		}
	</style>

（4）后代选择器

得到当前选择器中的所有直接间接指定标签元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father p {
			color: red;
		}  /*后代选择器*/
		.father.son p {
			color: blud;
		} /*找到.father下面的.son下面的P标签*/
	</style>
</head>
<body>
	<div class="father">
		<p>唐僧</p>
		<p>孙悟空</p>
		<p>猪八戒</p>
		<p>沙僧</p>
		<div class="son">
			<p>光头强</p>
			<p>熊大</p>
		</div>
	</div>
	<p>熊二</p>
</body>
</html>

（5）子元素选择器

得到当前标签中的直接子元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*	选择器>选择器 {
			属性名：属性值；
		}*/
		.father>p {
			color: red;
		}  /*子元素选择器*/
	</style>
</head>
<body>
	<div class="father">
		<p>唐僧</p>
		<p>孙悟空</p>
		<p>猪八戒</p>
		<p>沙僧</p>
		<div class="son">
			<p>光头强</p>
			<p>熊大</p>
		</div>
	</div>
	<p>熊二</p>
</body>
</html>

（6）并集选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.son p , .cat p {
			color: red;
		}  /*并集选择器*/
	</style>
</head>
<body>
	<div class="father">
		<p>唐僧</p>
		<p>孙悟空</p>
		<p>猪八戒</p>
		<p>沙僧</p>
		<div class="son">
			<p>光头强</p>
			<p>熊大</p>
		</div>
		<div class="cat">
			<p>黑猫</p>
			<p>白猫</p>
		</div>
	</div>
</body>
</html>

（7）交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p.yang {
			color: red;
		}  /*交集选择器*/
	</style>
</head>
<body>
	<div class="father">
		<p class="yang">喜羊羊</p>
		<p class="yang">美羊羊</p>
		<p>懒羊羊</p>
		<p>灰太狼</p>
	</div>
	<p class="yang">暖洋洋</p>
	<p>慢羊羊</p>
	<span class="yang">慢羊羊</span>
</body>
</html>

5 / css三大特性：

（1）继承

给父元素设置的属性，子元素可以使用。

凡是line-,text-,font-开头的属性都是可以继承的。

——继承的特殊性：

a 标签的颜色不会从父元素继承。

h 标签的大小不会从父元素继承。

div 的宽高，宽度从父元素继承，不从父元素继承高度。

（2）层叠

两个选择器为同一个元素设置了不同的属性，会同时作用于此元素。

如果两个选择器为同一个元素设置了相同的属性，会发生层叠。

（3）优先级

id > 类 > 标签 >通配符 > 继承 > 浏览器默认

！important 关键字可以将当前标签的任意优先级提到最高。但是不能被继承。

6 / 背景 background

css的初始化：

	<style type="text/css">
	/*css的初始化*/
	* {
		margin: 0;
		padding: 0;
	}

	</style>

（1）背景图片

background -image: url(图片地址)；

	<style type="text/css">
		body {
			background-color: pink;
			background-image: url(images/beijing.png);
		}
	</style>

（2）背景颜色

background-color: 颜色；

	<style type="text/css">
		body {
			background-color: pink;
		}
	</style>

（3）是否平铺

background-repeat : no-repeat;

	<style type="text/css">
		body {
			background-color: pink;
			background-image: url(images/beijing.png);
			background-repeat: no-repeat;
		}
	</style>

（4）背景图片位置

background-position :

	<style type="text/css">
		body {
			background-color: pink;
			background-image: url(images/beijing.png);
			background-repeat: no-repeat;
			background-position: right bottom ;
		}
	</style>

范例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*css的初始化*/
	* {
		margin: 0;
		padding: 0;
	}
		.dbj {
			height: 1091px;
			background: url(images/dabeijin.jpg) no-repeat center;
		}
		.xbj {
			height: 464px;
			width: 1000px;
			background: url(images/xiaobeijing.jpg) no-repeat;
			margin: 0 auto; /*让div居中显示*/
		}
	</style>
</head>
<body >
	<div class="dbj">
		<div class="xbj"></div>
	</div>
</body>
</html>

7 / 元素的显示方式

（1）块级元素 div, p , h, ul, li , ol ,dl

单独占一行，可以给这个元素设置宽高。

（2）行内元素 span, b, u , i ,ins, del ,strong, em

可以多个标签放在同一行，但是设置宽高无效。

（3）行内块级元素 img

可以多个标签放在同一行，并且可以给标签设置宽高

display : inline-block ; //可以将块级元素转换成行内块级元素。

!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			display: inline-block;  /*//将块级元素转换成行内块级元素*/
			width: 400px;
			height: 250px;
			background-color: red;
		}
		.colorGreen {
			background-color: green;
		}
	</style>
</head>
<body>
	<div>
		
	</div>
	<div class="colorGreen"></div>
</body>
</html>

8 / css放置的三种方式：

（1）嵌入样式（title下的style标签中）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>这是内容</p>
</body>
</html>

（2）行内样式（放置在标签中，用style属性设置）

<p style="color:red">内容</p>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!-- 	<style>
		p {
			color: red;
		}
	</style> -->
</head>
<body>
	<p style="color: red">这是内容</p>
</body>
</html>

（3）外部样式（存在于一个外部css文件中，通过link标签引用）

<link rel="stylesheet" href="路径">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css路径">
</head>
<body>
	<p>这是内容</p>
</body>
</html>

9 / 文本相关的属性

（1）text-align : 方式 (center , left , right) //文本排列方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 300px;
			background-color: red;
			margin: 0 auto;  /*div居中*/
			text-align: center;  /*文本排列方式*/
		}
	</style>
</head>
<body>
	<div>
		测试
	</div>
</body>
</html>

（2）text-decoration : none; // 作用于a标签,将a标签的下划线去掉

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 300px;
			background-color: red;
			margin: 0 auto;  /*div居中*/
			text-align: center;  /*文本排列方式*/
		}
		a {
			text-decoration: none; 
		}
	</style>
</head>
<body>
	<div>
		测试
	</div>
	<a href="#">导航1</a><a href="#">导航2</a>
</body>
</html>

（3）text-indent : 2em ; //用于设置文本的缩进

!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.align {
			width: 300px;
			background-color: red;
			margin: 0 auto;  /*div居中*/
			text-align: center;  /*文本排列方式*/
		}
		a {
			text-decoration: none; 
		}
		.indent {
			width: 300px;
			height: 200px;
			background: red;
			text-indent: 2em;  /*文本缩进*/
		}
	</style>
</head>
<body>
	<div class="align">
		测试
	</div>
	<a href="#">导航1</a><a href="#">导航2</a>
	<div class="indent">
		我是中国人，我爱祖国，我是祖国的花朵。
	</div>
</body>
</html>

（4） line-height 行高

① 上间距 + 文本大小 + 下间距 = 行高

② 两条基线之间的距离 = 行高

③ 将文本的行高(line-height:)设置为容器的高度，可以将文本在容器中垂直居中。

④ 行高是可以继承的。

（5）垂直居中：line - height : 容器高度;

（6）水平居中： text-align : center;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 100px;
			text-align: center;  /*水平居中*/
			background-color: red;
			line-height: 100px;  /*垂直居中*/
		}
	</style>
</head>
<body>
	<div>
		测试
	</div>
</body>
</html>

10 / 伪类

也是给对应的标签设置样式的。伪类选择器的样式要显示出来，这个标签必须具体对应的条件。

伪类也可以给别的标签使用。

① a：link { } 设置元素没有被访问过的样式。如果已经点击了一次，那么将来这个伪类中的样式不会再被显示。

② a : visited { } 设置元素已经被访问过的样式。如果已经点击了一次，那么将来这个伪类中的样式一直被显示。

③ a : hover { } 鼠标悬停时候标签对应的样式。

④ a : active { } 设置鼠标点击时的样式

伪类必须遵循上面的顺序！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a {
			display: inline-block; /*a标签是行内标签，本身不能设置宽高，要设置就要用display:inline-block; */
			width: 150px;
			height: 30px;
			background-color: red;
			text-decoration: none;
			text-align: center;
			line-height: 30px;
			color: black;
		}
		/*a：link 伪类:设置元素没有被访问过的样式*/
		a:link { 
			background-color: blue;
		}
		/*a:visited 伪类：设置元素已经被方位过的样式*/
		a:visited {
			background-color: pink;
		}
		/*a:hover 伪类：鼠标悬停时元素对应的样式*/
		a:hover {
			background-color: purple;
		}
		/*a : active { }  设置鼠标点击时的样式*/
		a:active {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<a href="#">这个是a标签</a>
</body>
</html>

11 / 盒子模型

页面上的每一个元素都是一个“盒子”。

丛里到外：

内容 content ——》填充 padding ——》壳 border ——》间距 margin

（1）边框 border

① border - width : 1px; //设置边框的宽度

② border - style : solid ; //设置边框的样式

③ border - color : red; //设置边框的颜色

①和②必须一起用才起作用。

④ border -collapse: collapse; // 清除表格边框之间的距离

（2）填充 padding

可以分别设置四个方向。

（3）盒子间距 margin

可以分别设置四个方向。

12 / 浮动

作用：解决一行中显示多个盒子，并且盒子的位置可控性强。

（1）标准流：浏览器在解析标签时候默认遵守的规则。也叫做文档流。

在不浮动的情况下，所有标签都是按照标准流。浮动就是脱离标准流的解析方式。

（2）浮动的特性：

① 浮动后的元素会以上边对齐

② 浮动后的元素会覆盖在标准流元素上面

③ 浮动找浮动，不浮动找不浮动

（3）浮动的位置规则：

浮动元素所在的位置是它所在标准流的位置（它会覆盖标准流）

浮动以自己在没有脱离标准流之前的位置为基准进行浮动

（4）浮动影响元素的显示方式

会将元素的显示方式改为 inline-block；

（5）文字会给浮动的元素让位

xiexiecm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端(2)——CSS

CSS层叠样式表使用css样式的方式：HTML声明标签声明必须是HTML文档的第一行，位于标签之前，它是声明，不是标签内链样式表语法：放在HTML标签中style="属性：属性值；属性1：属性值1；属性2：属性值2；">......嵌入样式表语法：body {属性：属性值；属性：属性值；} p{属性：属性值；属性：属性值} 需要将样式放在中
复制链接

扫一扫

专栏目录