CSS 层叠样式表

最新推荐文章于 2024-05-25 11:34:17 发布

Raining39

最新推荐文章于 2024-05-25 11:34:17 发布

阅读量1.1k

点赞数 16

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_52223392/article/details/135489543

版权

CSS 层叠样式表

一、 CSS简介

1.1 CSS是什么

CSS —— Cascading Style sheets，层叠样式表

为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成一层又一层的结构，层次高的将会覆盖层次低的，CSS可以分别为网页的各个层次设置样式。

1.2 CSS作用

修饰美化HTML网页

外部样式可以提高代码复用性从而提高工作效率

html内同与样式分离，便于后期维护

1.3 基础语法

不可以独立使用

选择器+一条或多条声明

选择器通常是用来选择改变样式的HTML元素
每条声明由一个属性和一个值组成

/* 这是注释 */
选择器 {
      样式名称1: 样式值1;
      样式名称2: 样式值2;
}

注意事项：

请使用花括号来包围声明
如果值为若干单词，则要给值加引号
多个声明之间使用分号;分开
CSS对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

二、 CSS使用方式

2.1 行内样式

把CSS样式嵌入到html标签当中，类似属性的用法，标签直接作为选择器使用。

	<!--
		行内样式，通过标签的style属性进行样式的设置
		缺点：只能为一个元素进行样式的设置，无法进行多个元素的统一设置
	-->
	<p style="color: red; border: 1px solid black" align="center">脸少超强对线杰斯</p>

2.2 内部样式

在head标签中使用style标签引入CSS

<!DOCTYPE html>
<html>
	<head>
		<title>CSS使用方式2</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			/*
				内部样式，可以对整个页面中的元素进行设置
				
				缺点：无法在多个页面的情况下进行统一的设置
			*/
			.c1 {
				color: red;
				border: 1px solid blue;
				text-align: center;
			}
			.c2 {
				color: black;
				border: 1px solid blue;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p class="c1">Hello nihao</p>
		<p class="c2">清风脸少</p>
	</body>
</html>

2.3 外部样式

将内部样式单独放到一个XXX.css文件中，HTML页面通过<link>标签将.css文件引入到当前页面中

link格式：<link href="xxx.css文件路径" rel="stylesheet" type="text/css"/>

用法同内部样式

rel=“stylesheet” 表示当前文件与引用文件的关系

<!DOCTYPE html>
<html>
	<head>
		<title>CSS使用方式3</title>
		<meta charset="utf-8"/>
		<!--
				外部样式，使用link标签引入外部CSS
				缺点：无法在多个页面的情况下进行统一的设置
		-->
		<link rel="stylesheet" type="text/css" href="./css/test.css">
	</head>
	<body>
		<p class="c1">Hello nihao</p>
		<p class="c2">脸少超绝肌肉线条</p>
		<p class="c3">脸少超强歪门炮杰斯</p>
	</body>
</html>

2.4 样式优先级

当一个HTML元素有一个以上的样式时，作用优先级如下：

在一个HTML元素内，行内样式优先级最高，会覆盖内部样式、外部样式及浏览器默认样式；
在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高；
浏览器默认样式优先级最低。

三、 CSS选择器

3.1 简单选择器

3.1.1 元素选择器

元素选择器：根据元素名称来选择HTML元素。

<!DOCTYPE html>
<html>
	<head>
		<title>CSS元素选择器</title>
		<meta charset="utf-8"/>
		<style>
			/*
				元素选择器
					根据元素名称选择HTML元素
			*/
			p {
				color: blue;
			}
			h1 {
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<p>Hello nihao</p>
		<p>Hello nihao</p>
		<h1>清风脸少</h1>
		<h1>清风脸少</h1>
		<h2>清风脸少</h2>
	</body>
</html>

3.1.2 id选择器

ID 选择器的是以井号 # 开头来定义的

ID选择器：使用HTML的ID属性来选择一个特定的元素

同一个页面中一个ID选择器只能在中出现一次，是唯一的

<!DOCTYPE html>
<html>
	<head>
		<title>CSS_ID选择器</title>
		<meta charset="utf-8"/>
		<style>
			/*
				id选择器通过元素的id属性的值选择元素
				id在同一个页面中是唯一的
			*/
			#p1 {
				color: blue;
			}
			#p2 {
				color: green;
			}
		</style>
	</head>
	<body>
		<p id="p1">Hello nihao</p>
		<p>Hello nihao</p>
		<h1>清风脸少</h1>
		<h1 id="p2">清风脸少</h1>
		<h2>清风脸少</h2>
	</body>
</html>

3.1.3 类选择器

类选择器是以点 . 来定义的，选择具有特定class属性的HTML元素

类选择器用于描述一组标签的样式，一个类选择器可以在多个标签上使用

语法：

.class_name{
    属性：属性值;
}
/*
			类选择器
*/
.b {
	background-color: yellow;
}
.c {
	text-align: center;
}
.d {
	border:1px solid black;
}
<p class="c">Hello nihao</p>

3.1.4 分组选择器

可以将不同选择器放在同一组，统一设置样式。

/*
	分组选择器
*/
#p1, #p2, .b, .c, .d {
	margin: 0px;
	padding: 0px;
}

3.1.5 通用选择器

选择页面上的所有的 HTML 元素

/* 通用选择器 */
* {
       background-color: bisque;
}

3.2 组合选择器

3.2.1 后代选择器

后代选择器：匹配作为指定元素后代的所有元素

3.2.2 儿子选择器

子选择器：只能选择作为某元素的子元素，不能选择到孙辈的元素

/*
	组合选择器
		后代选择器
		儿子选择器
*/
	/* 后代选择器 */
div li p {
	text-align: center;
	color: red;
}
	/* 儿子选择器 */
div > em {
	text-align: center;
	color: gold;
	border: 1px solid black;
}

3.3 伪类选择器

属于类选择器的一种，根据特定的状态选取元素
selector:鼠标行为 {
    样式名:样式值;
}
鼠标行为：

link 鼠标点击前
visited 鼠标点击后
hover 鼠标悬停时
active 鼠标点击时

Tips：

冒号和后面的鼠标行为之间没有空格，必须连接在一起
四个伪类选择器必须按照顺序书写，否则在浏览器中部分样式不能实现
伪类选择器全部一起使用时，主要应用在超链接上，偶尔用于其他目标标签上
伪类选择器也可以应用在其他标签页上，但是只能实现hover鼠标悬停和active鼠标点击激活效果

<!DOCTYPE html>
<html>
	<head>
		<title>CSS_伪类选择器</title>
		<meta charset="utf-8"/>
		<style>
			/* 伪类选择器 */
			/* 点击前 */
			a:link {
				background-color: gray;
			}
			/* 点击后 */
			a:visited {
				background-color: red;
			}
			/* 悬停时 */
			a:hover {
				background-color: green;
			}
			/* 点击时 */
			a:active {
				background-color: black;
			}
			button:hover {
				background-color: red;
			}
			button:active {
				background-color: black;
			}	
		</style>
	</head>
	<body>
		<a href="https://www.qq.com" target="_blank">腾讯QQ</a>
		<a href="https://www.baidu.com" target="_blank">百度</a>
		<button type="button">按钮</button>
	</body>
</html>

3.4 属性选择器

根据元素属性及属性值选择

格式：

[attr]: 查找带有attr属性的所有元素；
[attr="value"]:查找带有attr属性，并且属性值为value的元素；
[attr*="value"]:查找带有attr属性，并且属性值包含value的元素；
[attr^="value"]:查找带有attr属性，并且属性值以value开头的元素；
[attr$="value"]:查找带有attr属性，并且属性值以value结尾的元素；

/*
    选择所有具有title属性的元素
    */
    [title] {
        color: blue;
    }
    [title="段落"] {
        text-align: center;
    }
    /* 包含特定字符串 */
    [class*="p"] {
        background-color: red;
    }
    /* 以特定字符串开头 */
    [class^="a"] {
        border: 1px solid blue;
    }
    /* 以特定字符串结尾  */
    [class$="2"] {
        border: 1px solid black;
    }

四、CSS属性

4.1 字体属性

用于设置字体的属性

font简写属性，在一条声明中设置所有字体属性

font-size 设置文本的大小

font-family 设置字体

font-style 指定斜体文本

font-weight 字体粗细，100~900数值，normal、bold、bolder

font-variant 规定是否以小型大写字母的字体显示文本

#p1 {
    font-size: 30px; /* 设置文本的大小 默认为16px*/
	font-family: "Courier New"; /* 设置字体 宋体 楷体 */
	font-style: italic; /* 用于指定斜体文本,  normal - 文字正常显示 italic - 文本以斜体显示 */
    font-weight: 100; /* 指定字体的粗细 normal bold  */
    }

为了缩短代码，也可以在一个属性中指定所有单个字体属性

font-size 和 font-family 的值是必须的，若缺少其他值，则使用其默认值

#p2 {
    font: italic bold 20px "Consolas";
}

4.2 文本属性

4.2.1 颜色

color 设置文本的颜色

background-color 设置背景颜色

颜色名 red
十六进制值 #ff0000
RGB值 rgb(255,0,0)

body {
  background-color: lightgrey;
  color: blue;
}

4.2.2 文本对齐

text-align 设置文本的水平对齐方式

left：左对齐
right：右对齐
center：居中对齐

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

4.2.3 文本装饰

text-decoration 设置或删除文本装饰

text-decoration: none; 常用于从链接上删除下划线

overline 在句子上划线

underline 下划线

line-through 删除线

none 无下划线

h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

4.2.4 文本阴影

text-shadow 为文本添加阴影

四个值依次为：水平偏移、垂直偏移、模糊值、阴影颜色

#p1 {
	text-shadow: 20px 2px 2px red;
}

4.3 背景属性

4.3.1 背景色

background-color 元素的背景色

opacity 不透明度/透明度，0.0~1.0，值越小，越透明

div {
    background-color: green;
    opacity: 0.3;
}

4.3.2 背景图像

background-image 用作元素背景的图像

默认情况下，图像会重复，以覆盖整个元素

body {
    background-image: url("paper.gif");
}

background-repeat 设置背景图的平铺方向

repeat 全部铺满
repeat-x 沿水平方向铺满
repeat-y 沿竖直方向铺满
no-repeat 只显示一次背景图

background-position 设置背景图的位置

left right top buttom center

body {
    /* 背景色 */
    background-color: skyblue;
    /* 背景图片 */
    background-image: url(img/mjq.jpg);
    /* 背景重复 */
    background-repeat: repeat;
    /* 背景大小 */
    background-size: 80px 80px;
    /* 背景位置 */
    background-position: bottom center;
}

4.3 列表属性

用于对列表进行设置，常见属性如下：

list-style-type：改变列表的标识类型，none、disc（默认值）、circle、square、decimal（数字）、lower-latin（小写字母）；
list-style-image：用图像表示标识，url(“图片地址”)；
list-style-position：标识出现在列表项内容之外还是内部， inside、outside

五、DIV+CSS布局

5.1 HTML中的元素分类

HTML中根据元素显示状态分为块级(block)元素和内联(line)元素

块级元素：块级元素总是从新行开始，并占据可用的全部宽度
p
h1~h6
table
div (无任何含义，可以将其看作一个盒子，用来包裹其他元素)

内联元素：内联元素共处一行
a
img
input
select
span (无任何含义，可以当成一个盒子，用来包裹其他元素)

CSS中存在display属性，可以改变元素显示状态，属性如下：

block：按块显示
inline：同行显示
none：隐藏

5.2 盒模型

5.2.1 盒模型介绍

所有HTML元素都可以视为方框，在CSS中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”

CSS框模型实质上是一个包围每个HTML元素的况，包括：外边距、边框、内边距以及内容

内容：框的内容，显示文本和图像

内边距：清除内容周围的区域，内边距是透明的

边框：围绕内边距和内容的边框

外边距：清除边界外的区域，外边距是透明的

宽度：内容区域的宽度

高度：内容区域的高度

元素框的最内部分是实际的内容，直接包围内容的是内边距。

内边距呈现了元素的背景。内边距的边缘是边框。背景应用于由内容和内边距、边框组成的区域。

边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

5.2.2 与盒模型相关的CSS属性

5.2.2.1 宽度和高度

width：设置元素宽度

height：设置元素高度

5.2.2.2 边框

border：设置元素的边框

语法：

border: 宽度样式颜色

边框样式：

none 无边框
dotted 点状边框
dashed 虚线边框
solid 实线边框

border-radius：创建圆角

语法：border-radius: 圆角半径

5.2.2.3 内边距

padding：内容与边框之间的距离，其规则如下：

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边
如果只提供一个，将用于全部的四边
如果提供两个，第一个用于上、下，第二个用于左、右
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下

除此之外，还有另外四个属性设置内边距：

padding-top：设置元素的上内边距
padding-right：设置元素的右内边距
padding-bottom：设置元素的下内边距
padding-left：设置元素的左内边距

5.2.2.4 外边距

margin：边框与其他元素之间的距离，围绕在元素周围的空白区域，其规则如下：

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；
如果只提供一个，将用于全部的四边；
如果提供两个，第一个用于上、下，第二个用于左、右；
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

除此之外，还有另外四个属性设置外边距：

margin-top：设置元素的上外边距；
margin-right：设置元素的右外边距；
margin-bottom：设置元素的下外边距；
margin-left：设置元素的左外边距。

5.3 浮动属性float

普通流定位：页面元素按照HTML元素默认的盒子模型，自上而下（block元素）或从左到右（inline元素）的排列次序。

浮动：浮动的框可以向左或向右移动，**直到它的外边缘碰到包含框或另一个浮动框的边框为止。**由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

如下图所示，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

在这里插入图片描述

如下图所示，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

在这里插入图片描述

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

在这里插入图片描述

<style>
    .dd{width:100px; height:100px;}
    .d1{ background-color: #f00;height:120px; float: left;}
    .d2{ background-color: #0f0; float: left;}
    .d3{ background-color: #00f; float: left;}
</style>
<body>
    <div style=" width:299px;">
        <div class="dd d1"></div>
        <div class="dd d2"></div>
        <div class="dd d3"></div>	
    </div>
</body>

档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

[外链图片转存中…(img-YvFHt6ou-1704804459451)]

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

[外链图片转存中…(img-rsudcMRt-1704804459451)]

<style>
    .dd{width:100px; height:100px;}
    .d1{ background-color: #f00;height:120px; float: left;}
    .d2{ background-color: #0f0; float: left;}
    .d3{ background-color: #00f; float: left;}
</style>
<body>
    <div style=" width:299px;">
        <div class="dd d1"></div>
        <div class="dd d2"></div>
        <div class="dd d3"></div>	
    </div>
</body>

Raining39

关注

16
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
CSS 层叠样式表

所有HTML元素都可以视为方框，在CSS中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”CSS框模型实质上是一个包围每个HTML元素的况，包括：外边距、边框、内边距以及内容内容：框的内容，显示文本和图像内边距：清除内容周围的区域，内边距是透明的边框：围绕内边距和内容的边框外边距：清除边界外的区域，外边距是透明的宽度：内容区域的宽度高度：内容区域的高度元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。
复制链接

扫一扫