免费教程
在网络上我们经常会看见别人的页面很漂亮,颜色也很喜欢,整体看起来很舒服,就会想着自己去做,可以熟不知这其实就是UI的页面。 而实现网页美观的技术是 CSS,在Web前端中,CS
Web前端教程
Web前端入门教程:CSS 基础用法和实例
来源:易牛云朗沃
  |  
发布时间:2021-08-23 11:36
  |  
关键词:Web前端开发
  |  
阅读量:
在网络上我们经常会看见别人的页面很漂亮,颜色也很喜欢,整体看起来很舒服,就会想着自己去做,可以熟不知这其实就是UI的页面。
Web前端入门教程:CSS 基础用法和实例
 
而实现网页美观的技术是 CSS,在Web前端中,CSS 和 HTML、JavaScript 共称为前端的三件马车。
 

什么是 CSS

那什么是 CSS呢?CSS 能做什么呢?
 
只要你在网络上搜索一下“Web前端”相关的知识,都会讲到CSS。
 
CSS 是层叠样式表,主要用来修饰网页的,让网页变得美观。
 
百度百科专业解释:CSS 的英文全称:Cascading Style Sheets 是一种用来表现 HTML 等文件样式的计算机语言。
 
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
 
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2] 
 

CSS 规则

 
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
 
selector {declaration1; declaration2; ... declarationN }
 
选择器 通常是您需要改变样式的 HTML 元素。
每条声明 由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。
属性和值被冒号分开(:)。
 
selector {property: value}
Web前端入门教程:CSS 基础用法和实例

CSS 实例

 
CSS 声明 总是以分号( ; )结束,声明组 以花括号( { } )包围起来。
 
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
 
h1 {color:red; font-size:14px;}
 
示意图展示代码的结构
 
Web前端入门教程:CSS 基础用法和实例
示意图为您展示了上面代码的结构
 
多重声明
如果要定义不止一个声明,则需要用分号(;)将每个声明分开。上面的例子展示出如何定义一个红色文字并设置字体大小。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。
 

CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
 
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
 
/*这是个注释*/
p{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
 
CSS 是修饰网页的一门技术,你也可以尝试着做一个网页。Web前端中里面的 HTML、CSS 都是比较常见的技术,也可以尝试着去试学一下吧。申请试学