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

WEB前端—CSS基础笔记 01

  • CSS简介
  • CSS基础选择器
      • 选择器作用:
      • 基础选择器分类:
      • 基础选择器总结
      • 字体属性:
      • 字体属性总结
      • 文本颜色
      • 文本对齐方式
      • 装饰文本
      • 文本缩进
      • 行间距
      • 文本属性总结
      • CSS引入方式
      • Chrome调试工具
        • 做个好人 ~ 爱我所爱 ~ 开开心心 ~ 多赚点钱 ~ just do it ~

  • 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>

WEB前端进阶之路——CSS基础笔记 01_第1张图片
WEB前端进阶之路——CSS基础笔记 01_第2张图片
3、id选择器
   通过标签设置的id值定位标签。(id在页面上是唯一的)

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

WEB前端进阶之路——CSS基础笔记 01_第3张图片
4、通配符选择器
   在CSS中,通配符选择器使用 ** * **定义,它表示选取页面中所有元素(标签)。

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

WEB前端进阶之路——CSS基础笔记 01_第4张图片

基础选择器总结

WEB前端进阶之路——CSS基础笔记 01_第5张图片

字体属性:

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

font-family 	
font-size 	
font-weight		
font-style		

font: font-style font-weight font-size/line-height font-family;

WEB前端进阶之路——CSS基础笔记 01_第6张图片
WEB前端进阶之路——CSS基础笔记 01_第7张图片
WEB前端进阶之路——CSS基础笔记 01_第8张图片
WEB前端进阶之路——CSS基础笔记 01_第9张图片
WEB前端进阶之路——CSS基础笔记 01_第10张图片

字体属性总结

WEB前端进阶之路——CSS基础笔记 01_第11张图片

文本颜色

WEB前端进阶之路——CSS基础笔记 01_第12张图片

文本对齐方式

WEB前端进阶之路——CSS基础笔记 01_第13张图片

装饰文本

WEB前端进阶之路——CSS基础笔记 01_第14张图片

文本缩进

WEB前端进阶之路——CSS基础笔记 01_第15张图片

行间距

WEB前端进阶之路——CSS基础笔记 01_第16张图片

文本属性总结

WEB前端进阶之路——CSS基础笔记 01_第17张图片

CSS引入方式

WEB前端进阶之路——CSS基础笔记 01_第18张图片
WEB前端进阶之路——CSS基础笔记 01_第19张图片

Chrome调试工具

WEB前端进阶之路——CSS基础笔记 01_第20张图片

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

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

WEB前端进阶之路——CSS基础笔记 01_第21张图片

你可能感兴趣的:(WEB前端,css,html,html5,css3)