WEB前端进阶之路——CSS基础笔记 01

• CSS简介
• CSS基础选择器
• CSS字体属性
• CSS文本属性
• CSS引入方式
• 综合案例
• Chrome调试工具

CSS简介

      层叠样式表(英文全称：Cascading Style Sheets)，也称CSS样式表或级联样式表。
      CSS是一种标记语言。
      CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
简单理解：CSS可以用来美化HTML。

CSS基础选择器

选择器作用：

        简单理解就是用来定位标签的。

基础选择器分类：

1、标签选择器
   是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。

	<style>
		标签名 {
			属性: 属性值;
			... ...
		}
	</style>

2、类选择器
   想要差异化选择不同标签，单独选一个或多个标签，可以用类选择器。类选择器在HTML中以class属性表示，在css样式中用 ** .类名 **获取。
（类命名规范可以参考web前端开发规范手册）

	<style>
		.类名 {
			属性: 属性值;
			... ...
		}
	</style>

3、id选择器
   通过标签设置的id值定位标签。（id在页面上是唯一的）

	<style>
		#id {
			属性: 属性值;
			... ...
		}
	</style>

4、通配符选择器
   在CSS中，通配符选择器使用 ** * **定义，它表示选取页面中所有元素（标签）。

	<style>
		* {
			属性: 属性值;
			... ...
		}
	</style>

基础选择器总结

字体属性：

   CSS Fonts字体属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

font-family 	<!--字体类型属性-->
font-size 	<!--字体大小属性-->
font-weight		<!--字体粗细属性-->
font-style		<!--字体样式属性-->
<!--符合属性 多个属性的简写方式 注意这几个属性的书写顺序不能变
 且font-size和font-family必须存在，否则font属性将不起作用-->
font: font-style font-weight font-size/line-height font-family;

字体属性总结

文本颜色

文本对齐方式

装饰文本

文本缩进

行间距

文本属性总结

CSS引入方式

Chrome调试工具

—————————————————————————————————

做个好人 ~ 爱我所爱 ~ 开开心心 ~ 多赚点钱 ~ just do it ~