前端入门（二）

allubiba-H

已于 2022-08-12 13:54:15 修改

阅读量228

点赞数 1

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

于 2022-08-12 13:45:54 首次发布

本文链接：https://blog.csdn.net/m0_46149393/article/details/126193214

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

🔝前端核心技术之一 CSS

大家好，我是allubiba-H，一名大三的学生，专业是通信工程一个偏向于硬件的专业，因为较喜欢互联网行业进入了华清远见这个家庭👨‍👩‍👦‍👦，然后想记录一下我在华清远见的学习过程。由于本人刚学前端水平有限，可能避免不了一些错误，希望大家多多支持🤗。

CSS是什么？

CSS代表层次样式表(Cascading Style Sheets)。
我们用HTML是基本上描述我们的页面内容而已。CSS描述内容的视觉样式和表示形式。HTML和CSS是像兄弟一样结合在我们页面上的。
我们通过上一期文章了解了HTML由一堆不同的元素组成。同样CSS也是如此，因为CSS包含了无数的属性，提供给我们开发人员使用他来美化我们页面。这些属性允许我们构造各种各样的样式来展示我们页面。这些属性包含字体（font）,文本（text），间距（spacing），页面布局（layout）等等。当然我们不需要熟记于心，真的没必要这样做。我们在学习的过程当中一遍又一遍的学一些重要的属性，到了一定时间后你头脑上自然而然就形成。下面我们看一下典型的CSS代码块

h1 {
	color:blue;
	text-align:center;
	font-size:20px;
}

它总是以选择器开头。如果我们想为页面上的所有的h1元素设置样式，我们需要在CSS上选择它，然后我们可以对其应用一些样式。
CSS代码块内每一种风格比如（font-size:20px）称之为声明。例如：font-size:20px 这里我们将字体大小设置为20像素 font-size称为属性，20px称为值。我们每次声明样式的时候 属性：值的形式声明。所有样式一起组成一个声明块。

CSS代码写在哪儿？

我们可以在三种地方写CSS代码。我们称之为内联(inline)CSS，(internal)内部CSS和(external)外部CSS。

内联 (inline) CSS

就是写在元素上面，比如我想把某一个h1元素设置颜色。首先我们要在元素上声明一个style属性：

<h1 style="color:blue">我是标题一</h1>

但是通常我们不应该使用内联式CSS！！往后写大量的CSS样式时使得网页更乱糟。

内部 (internal) CSS

我们在HTML头部元素里声明一个style元素，然后在里面写我们的CSS代码。

<head>
	<style>
		h1 {
			color:blue;
			text-align:center;
			font-size:20px;
		}
	</style>
</head>

这种方法也不推荐使用，因为如果我们有500行CSS代码都写在HTML文件使我们文件膨胀影响加载性能。因此我们要分离我们的CSS代码下面介绍外部CSS。

外部 (external) CSS

我们需要在网站目录适应的位置上创建一个.css后缀的样式文件xxx.css，然后回到我们的HTML文件中在<head>标签里声明<link>标签把我们CSS文件链接起来。

style.css

h1 {
	color:blue;
	text-align:center;
	font-size:20px;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>我是标签一</h1>
	</body>
</html>

CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

1.元素选择器

元素选择器（标签选择器）根据元素名称来选择 HTML 元素。

2.id 选择器

d 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，写一个井号（＃），后跟该元素的 id。
id选择器
❗❗❗这里我们要注意的是id不能以数字开头

3.类选择器

类选择器选择有特定 class 属性的 HTML 元素。
选择拥有特定 class 的元素，写一个句点（.）字符，后面跟类名。

类选择器

4.通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。
通配符的权重最小，随便给个样式就会覆盖通配符的样式
❗❗❗如果不使用通配符清除内外边距，div和浏览器有缝隙。

5.后代选择器

子选择器
#box>p{}：id为box的子元素p
后代选择器
#box p{}：id为box的后代元素p，包括子元素和子元素的子元素

6.分组选择器（并集选择器）

分组选择器选取所有具有相同样式定义的 HTML 元素

最好对选择器进行分组，以最大程度地缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器。

CSS常用样式介绍

字体样式

属性名	含义	使用
font-family	字体类型	font-family:“隶书”,”楷书”;优先选择隶书，
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:oblique(偏斜体)/italic(斜体)/normal(正常);
font-weight	设置字体的粗细	font-weight: bold(粗)/lighter(细)/normal(正常)
letter-spacing	文字间距	letter-spacing:normal;数值 px/pt/em
word-spacing	单词间距	word-spacing:normal;数值 px/pt/em

文本样式

属性名	含义	使用
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align: right left center;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置元素显示的文本的行高，和元素高度一样，文本垂直居中。	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;none：无;underline:下划线;overline;上划线;line-through;删除线

尺寸样式

块级元素：独占一行，可以设置高度的
div,p,h1~h6,ul,ol
行内元素：多个元素占一行，不能设置宽高
span,strong,em,i,sub,sup
行内块元素：在同一行显示可以设置宽高的
img,input

属性名	含义	使用
width	宽度	width:100px
height	高度	height:100px

背景样式

属性名	含义	使用
background-color	背景颜色	color:red;
background-image	背景图片	默认平铺(XY两个方向) 会遮盖背景颜色
background-repeat	图片平铺	默认平铺Repeat-x: 只在X方向平铺Repeat-y:旨在y方向平铺No-repeat: 不平铺
background-position	背景位置	水平方向：left, center，right垂直方向：top ,center，bottom背景图片居中： center (center)
background-size	背景大小	Cover. 重新设置背景的大小为容器的大小。
background	背景的综合属性	所有背景的属性都可以写进来，顺序没有要求

伪类样式

什么叫伪类呢？
伪类用于定义元素的特殊的状态。
比如：

· 设置鼠标悬停在某个元素上的样式
· 为已访问和未访问链接设置不同的样式
· 设置元素获得焦点时的样式

链接样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：（顺序不能改变）
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}