【前端笔记4】CSS基础1 （基础、字体、文本样式）

最新推荐文章于 2024-10-12 14:14:19 发布

花栗鼠_鱼

最新推荐文章于 2024-10-12 14:14:19 发布

阅读量137

点赞数

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

本文链接：https://blog.csdn.net/m0_73448098/article/details/128361034

版权

前端笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文是基于课程前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 P45-65节的笔记总结，便于前端零基础小白（我）学习查找。

一、基础认知

什么是CSS

CSS (Cascading style sheets) ：层叠样式表
作用：决定样式外观

语法规则

引入html的方式：

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中。style标签一般写在head标签里面，title标签下面	当前页面	小案例
外联式	CSS写在单独.css文件中，html通过link标签引入，link标签写在head标签里面	多个页面	项目中
行内式	CSS写在标签里面的style属性中	当前标签	配合js使用

CSS有多种写法，style为最简单的写法

设置样式通用语法：

选择器{
CSS属性（属性名＋属性值）;
}

选择器：寻找需修改的标签

注释语法：/* */

二、基础选择器

标签选择器 (标签名{})

结构：标签名{ CSS属性名：属性值 ; }
作用：选中的所有标签都执行一个CSS

<head>
	p{	//标签名：white
		colar:#000;		//属性名：colar;属性值：#000
	}
</head>

<body>
	<p>此时标签1的颜色为#000（黑色）</p>
	<div>此时标签2的颜色为网页默认颜色</div>
	<p>此时该标签3的颜色为#000（黑色）</p>
</body>

类选择器 (.类名{})

优化：解决标签选择器不能区分同一标签的问题

结构：. 类名 { CSS属性名：属性值 ; }
作用：给同类标签设置同一样式。

<head>
	.white{	//类名：white
		colar:#fff;		//属性名：colar;属性值：#fff
	}
	.overstriking{	//类名：overstriking
		font-weight:700;		//属性名：font-weight;属性值：700
	}
</head>

<body>
	<p class="white">此时该标签1的颜色为#fff（白色）</p>
	<div class="white overstriking">此时该标签2的颜色为#fff（白色）且加粗</div>
	<p>此时该标签3的颜色为网页默认颜色</p>
</body>

注意：

所有标签上都有class属性，class属性的属性值称为类名 (类似于名字)
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

结构：

id选择器 (#id名{}）

使用场景：一般配合JS一起使用，添加动态交互效果。

结构：# id名 { CSS属性名：属性值 ; }
作用：给同id标签设置同一样式。

<head>
	#white{	//id名：white
		colar:#fff;		//属性名：colar;属性值：#fff
	}
</head>
<body>
	<p id="white">此时该标签1的颜色为#fff（白色）</p>
	// <div id="white">错误使用：id只能选择一个标签</div>	
	// <p id="white overstriking">错误使用：一个标签只能有一个id	</p>
</body>

注意：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
一个标签上 只能有一个id属性值
一个id选择器 只能选中一个标签

通配符选择器 (*{}）

结构：* { CSS属性名：属性值 ; }
作用：对页面所有标签设置样式

注意：

开发中极少使用，一般用于清除默认样式。
一般用margin:0; 或 padding:0;清除行间距

三、CSS属性：字体

字体大小 font-size: （值）px

font-size属性用法：font-size: （值）px

浏览器默认字号：16px
单位：px（像素）

字体粗细 font-weight:（值）

font-weight属性用法：font-weight:（值）
取值：

关键字

样式	语法
正常	normal
加粗	bold

纯数字：100-900的整百数

样式	值
正常	400
加粗	700

不是所有字体都提供了九种粗细，因此部分取值在页面中无变化

字体倾斜 font-style:（值）

font-style属性用法：font-style
取值：

样式	语法
正常	normal
倾斜	italic

em,i,也可以在标签中让字体倾斜

字体系列 font-family:（字体名）

浏览器默认字体：微软雅黑

属性用法： font-family:（字体名）
常见取值：

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等
字体系列：sans-serif(无衬线字体)、serif(衬线字体)、monospace(等宽字体)等

渲染规则：

从左往右顺序查找，若电脑无当前字体，则显示下一字体
若所有字体都不支持，则根据操作系统，显示最后字体系列的默认字体

兜底：等衬式字体

注意：

若字体名称含多个单词，建议引号" "包裹
字体系列不需要引号包裹
网页开发时，尽量选择系统常见自带字体，增强兼容性。

字体属性层叠性：后覆盖前

说明：若给一个标签设置了相同的属性，此时样式会层叠(覆盖)，在下方的属性生效

p{
	colar:red;
	colar:blue;	//相同属性，后覆盖前，<p>标签显示蓝色
}

字体font相关属性的连写 font:(style weight size family)；

复合属性：一个属性冒号后面可写多个值的属性。

属性名：font(符合属性)
取值：

font:style(可略) weight(可略) size/height family;
例：font: italic 700 66px/2 宋体;

注意：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面
例：
font:italic…;
font-style:normal;
//倾斜效果被覆盖，字体显示正常。
要么把单独的样式写在连写的里面

四、CSS属性：文本样式

文本缩进：text-indent

浏览器默认字体字号：16px

属性名：text-indent
取值：

属性值	说明
数字n＋px	px:像素大小单位
数字＋em	em:一个字的大小单位

例：// 段落缩进两个字
text-indent : 2 em;

文本(内容)水平对齐方式：text-align

属性名：text-align

center 可居中元素：文本、span/a标签、input/img标签

取值：

属性值	效果
left	左对齐（默认）
right	右对齐
center	居中

如果需要让以上元素水平居中， text-align:center 需要在以上元素的 父元素 设置
如< img >在< body >标签中时，应对< body >标签增加属性。

文本修饰：text-decoration

属性值：text-decoration
取值：

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

开发中会使用 text-decoration:none; 清楚a标签默认的下划线。

行高 line-height

行高 = 上间距＋文本高度＋下间距

![在这里插入图片描述](https://img-blog.csdnimg.cn/ede284baa51348a2b77df13cc7b80261.png#pic_center = 60)

属性值：line-height
取值：

属性值	说明
数字＋px	px:像素大小
倍数	当前标签font-size的倍数

应用：

让 单行文字 垂直居中可设 line-height:文字父元素高度
网页精准布局时，设 line-height:1 取消上下间距

行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;

chrome调试工具

打开方式：

在网页空白处“右键” → “检查”
F12

作用：

检查错误（删除线、黄叹号）
调试效果

拓展·颜色表示方式

属性名:

文字颜色：color
背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	颜色名	red、green、blue…
rgb表示法	红绿蓝三原色、每项取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)
rgba表示法	红绿蓝三元色+a表示透明度（0/1）	rgba(255,255,255,0.5)
十六进制表示法	#开头，将数字转化成十六进制表示	#000000(#000)、#ff0000(#f00)、#e92322

拓展·标签水平居中 margin: 0 auto

语法：margin: 0 auto
作用：使大盒子(div、p、h)标签水平居中

margin复合标签，0-上下间距，auto-左右间距

	div{
		margin:0 auto;
	}
	// div 标签在网页居中显示

若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending