乐趣区

关于前端:Web前端CSS入门教程超详细的CSS使用讲解适合前端初学者

上篇文章说了 HTML,明天再来说一说 CSS,所谓 CSS 是指层叠样式表 (Cascading Style Sheets),通过引入样式表,从而极大的进步了工作效率。

什么是 CSS?

Cascading Style Sheet

层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、管制语句 …)

CSS 其实是专门用来润饰 HTML 的,让 HTML 更好看。

CSS 是 HTML 的化妆品。

CSS 是为 HTML 服务的,所以 HTML 还是主体,CSS 是附丽在 HTML 上的,

所以进行 CSS 的开发,咱们还是须要新建 html/htm 文件。

在 HTML 中怎么嵌入 CSS 款式呢?

  • 第一种形式:内联定义
  • 第二种形式:定义外部款式块对象
  • 第三种形式:链入内部样式表文件(这种形式最罕用!)

如果想深刻学习 CSS,我倡议初学者能够采纳是视频观看的形式,更通俗易懂

对于选择器的优先级:

  • 标签选择器优先级最低。
  • 其次是类选择器。
  • 最高优先级是 id 选择器。
  • CSS 设置背景 (background)
  • 背景色彩 background-color
  • 背景图片 background-image
  • 背景反复 background-repeat:repeat-x/repeat-y
  • 背景地位 background-position:bottom/left/top/right/center
  • 背景关联 background-attachment:fixed/scroll

综合写法:

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS 设置文本格式

通过文本属性,您能够扭转文本的色彩、字符间距,对齐文本,装璜文本,对文本进行缩进,等等。

文本缩进:Text-indent:2em

文本对齐形式:Text-align:left/right/center/ justify

文本润饰:

Text-decoration:underline/line-through/overline/none

字符间距:Word-spacing:px/em 英文单词之间的距离;

Letter-spacing:px/em 汉字和英文字母之间的距离;

文本转换:

Text-transform:uppercase/lowercase/ capitalize

行与行间距:Line-height:px/%

垂直对齐图像: vertical-align:text-top/text-bottom

文本暗影:text-shadow: 程度偏移,垂直偏移 色彩

课程目录

001.CSS 教程 -CSS 概述

002.CSS 教程 -HTML 引入 CSS 款式的三种形式概述 1

003.CSS 教程 -HTML 引入 CSS 款式的三种形式概述 2

004.CSS 教程 -HTML 引入 CSS 款式的第一种形式内联形式

005.CSS 教程 -HTML 引入 CSS 款式的第二种形式款式块

006.CSS 教程 -id 选择器标签选择器和类选择器

007.CSS 教程 -HTML 引入 CSS 款式的第三种形式引入内部独立 css 文件

008.CSS 教程 - 列表款式

009.CSS 教程 - 相对定位

退出移动版