前面我们都会写基本的HTNL5标签了,下面进行CSS的介绍
一.什么是CSS???
CSS的全称是
Cascading Style Sheets,层叠样式表它它用来控制HTML标签的样式,,在美化网页起到非常重要的作用
-
CSS的编写格式是键值对形式的,比如
color : red background-color: blue; font-size: 20px
冒号 : 冒号左边的是属性名, 冒号右边的是属性值
二.CSS的三种书写形式
- <1>.行内样式: (内联样式) 直接在标签的style属性中书写
注意一点: 每个属性设置完加分号:";"
<body style="background-color: red;"></body> -> :background背景色
<body style="color: red"></body> -> :color 字体颜色
颜色
body:相当于我们控制器里面的view
<div style="color: #ff0000; font-size: 40px; background-color: green; ">我是div,哈哈,你何方神圣</div>
行内标签
下面说两个概念:
(1).单值属性:只有一个属性值
color: purple;
(2).符合属性:有多个属性值
border: 5px solid red;
符合属性
- <2>.页内样式:在本网页的style 标签中书写
在title的下面写
<style>
body{
background-color: red;
}
p{
color: brown;
}
div{
color: green;
font-size: 45px;
}
</style>
页内样式(相当于一种封装)
讲解一个名词: **网站 = N个网页 + 服务器 + 数据库 **
三.外部样式:在单独的CSS文件中书写,然后在网页中用link 标签引用
<link rel="stylesheet" href="index.css">
解释:相当于iOS里面的抽出来的类用import来导入
href :非必须引入
rel: relation 联系
stylesheet: 层叠样式表
index.css : 结尾
外部样式的创建
外部样式的引入
下面说一下CSS的规律
1.就近原则(谁靠近body就先用谁,如果进的样式用完了,就会用远的样式:(前提是近的样式里面没有,而远的有))
2.叠加原则(远的样式有近的样式没有的样式)
