本节课由南京前端培训-欣才IT学院前端培训为大家简单介绍下在前端开发过程中经常使用的css入门技术,css是什么和css基本概念。
一、CSS是什么?
CSS 层叠式样式表 cascading style sheet
目的:将HTML内容与HTML显示的样式相分离提出的一种解决方案。
HTML:骨骼
内容: 肌肉
CSS: 外形
二、CSS好处:
1、将HTML代码变的更加简洁,易读;
2、将HTML内容和HTML样式进行了分离 更加便于后期维护
3、CSS可以使用样式的统一管理,统一改变
4、CSS样式分离使网站前台风格变化更加方便了
三、CSS语法规则:
属性:值;
Height = “60px”;
Height:60px;
注意:所有的css属性值都不需要引号
<font color="red" size=3>
p{color:red ;size:3}
四、CSS引入方式(使用方式)(怎么分离样式和内容)
4.1、行内的css:如果网站中只有一两处使用某种样式
格式:
<标签名 style="属性:值;属性:值;..."></标签名>
eg:
<p style="color:red;background-color:gray;">你好啊</p>
<p style="clear:both"></p> 清除浮动
4.2、页内的css:如果某个专题页(特殊页面)和整个网站的风格不同时,可以在专题页面中使用页内css
格式:
<style type="text/css">
</style>
需要写在<head>标记中间
4.3、外部的css:网站中统一使用的css
格式:
1]首先创建css文件 .css
eg:
common.css
p{color:red}
2]引入css文件
<link href="css文件路径+文件名" rel="stylesheet"/>
link写在head中
stylesheet:样式脚本
4.4、引入时的优先级:
行内的css优先级最高
外部的css和页内的css优先级相同; 优先级体现在相同的属性之间的覆盖,而不同的css形式中的不同的属性会叠加显示
(看引入的先后顺序来显示,后引入的覆盖先引入的效果);
4.5、使用外部 css 的注意点:
1)、css 文件的路径(相对路径要掌握)
2)、rel="stylesheet" 千万不能丢掉或者写错
3)、CSS里面的内容 跟写在页面内的时候是一样的
4)、css的大括号后面,绝对不能出现 ;
不同的属性之间要用分号隔开
通过南京前端培训的最信赖机构欣才IT学院为大家简单介绍了css的基本概念和css什么等入门知识,希望大家会喜欢南京的唯一一家良心培训机构-欣才IT学院。有什么问题咨询可以咨询欣才IT学院在线客服。