CSS基础笔记

最新推荐文章于 2024-07-24 22:39:14 发布

solololo

最新推荐文章于 2024-07-24 22:39:14 发布

阅读量562

点赞数 26

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/solololo/article/details/139844029

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1 CSS选择器
2 字体样式
3 文本样式
4 边框样式
5 列表样式
- 5.1 list-style-type
- 5.2 list-style-image
6 表格样式
7 背景图片样式
8 超链接样式
- 8.1 超链接伪类
- 8.2 鼠标样式
9 盒子模型
10 布局

1 CSS选择器

1.1 标签选择器

<style>
	p {
		color: green;
	}
	div {
		color: pink;
	}
</style>

1.2 id选择器

<style>
	#id {
		color: green;
	}
</style>

1.3 类选择器

<style>
	.box {
		width: 150px;
		height: 100px;
		font-size: 30px;
	}
</style>

1.4 通配符选择器

<style>
	* {
		padding: 0;
		margin: 0;
	}
</style>

1.5 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		ol li {
			color: pink;
		}
		ol li a {
			color: red;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<ol>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li><a href="#">我是孙子</a></li>
	</ol>
</body>
</html>

1.6 子选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		.nav>a{
			color: orange;
			text-decoration: none;
		}
		.nav>p>a {
			color: black;
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">我是儿子</a>
		<p>
			<a href="#">我是孙子</a>
		</p>
	</div>
</body>
</html>

1.7 群组选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		div p,
		.bear > li {
			color: pink;
		}
	</style>
</head>
<body>
	<div>
		<p>光头强</p>
	</div>
	<ul class="bear">
		<li>熊大</li>
		<li>熊二</li>
	</ul>
</body>
</html>

1.8 超链接伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		/*未访问的链接*/
		a:link {
			color: #333;
			text-decoration: none;
		}
		/*点击过的(访问过的)链接*/
		a:visited {
			color: orange;
		}
		/*鼠标经过的链接*/
		a:hover {
			color: lightblue;
		}
		/*鼠标正在按下还没有弹起鼠标的链接*/
		a:active {
			color: green;
		}
		/*
		实际常用的只有a和a:hover
		 */
	</style>
</head>
<body>
	<a href="http://www.baidu.com">百度百科</a>
</body>
</html>

1.9 input伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		input:focus {
			background-color: pink;
			color: red;
		}
	</style>
</head>
<body>
	<input type="text">
</body>
</html>

2 字体样式

在这里插入图片描述

2.1 font-family

font-family: 字体 1, 字体 2, …, 字体N;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        #div1 {font-family:Arial;}
        #div2 {font-family: "Times New Roman";}
        #div3 {font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>

2.2 font-weight

font-weight属性可以取100、200、…、900这九个值。其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder。
在这里插入图片描述

2.3 font-style

在这里插入图片描述

3 文本样式

在这里插入图片描述

3.1 text-indent

在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。

3.2 text-align

在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。
在这里插入图片描述

3.3 text-decoration

在这里插入图片描述

3.4 text-transform

在这里插入图片描述

3.5 line-height

在CSS中，我们可以使用line-height属性来控制每行文本的高度。

3.6 letter-spacing

在CSS中，我们可以使用letter-spacing属性来调整两个字之间的距离。

3.7 word-spacing

在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。word-spacing，从英文意思上就可以知道这是“单词间距”。一般来说，word-spacing只针对英文单词而言。

4 边框样式

在这里插入图片描述

4.1 border-width

border-width属性用于定义边框的宽度，取值是一个像素值。

4.2 border-style

在这里插入图片描述

4.3 border-color

border-color属性用于定义边框的颜色。

4.4 边框局部样式

上边框border-top
下边框border-bottom
左边框border-left
右边框border-right

5 列表样式

5.1 list-style-type

有序列表：
在这里插入图片描述
无序列表

由于列表项符号比较丑，因此在实际开发中，大多数情况下我们都需要使用list-style-type:none;去掉。

5.2 list-style-image

list-style-image:url(图片路径);

6 表格样式

6.1 caption-side

在CSS中，我们可以使用caption-side属性来定义表格标题的位置。
在这里插入图片描述

6.2 border-collapse

在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
在这里插入图片描述

6.3 border-spacing

在CSS中，我们可以使用border-spacing属性来定义表格边框间距。

7 背景图片样式

在这里插入图片描述

7.1 background-image

在CSS中，我们可以使用background-image属性来为元素定义背景图片。

7.2 background-repeat

在这里插入图片描述

7.3 background-position

background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”（这里不考虑百分比取值）。

background-position:水平距离垂直距离;
background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”（这里不考虑百分比取值）。

在这里插入图片描述

7.4 background-attachment

在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
在这里插入图片描述

8 超链接样式

8.1 超链接伪类

在这里插入图片描述

8.2 鼠标样式

在CSS中，我们可以使用cursor属性来定义鼠标样式。
在这里插入图片描述

9 盒子模型

在这里插入图片描述

content：内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言的，并不包括padding部分。当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方法。
padding：内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
margin：外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

10 布局

10.1 文档流

正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
在这里插入图片描述

10.2 浮动

浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

float:取值;
在这里插入图片描述
clear:取值;

10.3

布局定位共有四种方式：

固定定位（fixed）
相对定位（relative）
绝对定位（absolute）
静态定位（static）

10.3.1 固定定位：fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

10.3.2 相对定位：relative

在CSS中，我们可以使用position:relative;来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

10.3.3 绝对定位：absolute

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）

10.3.4 静态定位：static

在默认情况下，也就是元素没有指定position属性时，这个元素就是静态定位的。也就是说元素position属性的默认值是static。

10.3.5 对比

在这里插入图片描述

solololo

关注

26
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS基础笔记

在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。在CSS中，我们可以使用letter-spacing属性来调整两个字之间的距离。在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。在CSS中，我们可以使用caption-side属性来定义表格标题的位置。
复制链接

扫一扫

专栏目录