大家好,今天咱们来学习第二节的课程内容,内容呢比较少,主要是学习CSS,CSS里面的知识咱们大多数在以后开发中用的比较少,但是有些知识点还是需要掌握的,那话不多说,咱们就一起来看看吧。
1.html的框架标签
<frameset rows=”15%, *”>
<frame src=”top.html” name=”top”/>
<frameset cols=”15%, *”>
<frame src=”left.html” name=”left”>
<frame src=”right.html” name=”right”>
</frameset>
</frameset>
2.div标签和span标签
div和span这两个标签都是块级标签
他们两个标签的区别是什么呢?
div后面带换行
span后面不带换行
3.style属性
比如:
<div style=”color:red; background:green; width:300px;”>第一个div</div>
<div style=”color:green; background:red; width:400px;”>第二个div</div>
这里面要注意一下,咱们写的style属性里的值是需要加像素的,而不写在style属性里的值是不需要加像素单位的。
字体:
color 字体颜色
<div style=”color:red”>第一个div</div>
<div style=”color:green”>第二个div<div>
font 字体大小,样式等
<div style=”color:red; font:10px”>第一个div</div>
<div style=”color:green; font:10px”>第二个div</div>
文本:
text-align 文本对齐方式
<div style=”text-align:center”>第一个div</div>
text-decoration 文本装饰,比如下划线,删除线等
背景:
background 背景颜色,图片等
尺寸:
width 宽度
height 高度
定位:
position 定位方式
left x轴坐标
top y轴坐标
z-index z轴坐标
记住一个口诀:子绝父相
边框:
border 边框
布局:
display 显示与隐藏
外补丁:
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
4.什么是css
级联样式表,一种用来控制html样式的语言
5.css的好处是什么
将样式代码和html代码分离,简单灵活
6.css的定义格式
第一种:
上面的style属性的写法,也算是一种css定义写法
缺点:比如每一个div里面都要写一个style属性,如果一个页面里面有n多个div标签,而且这些div的样式值是一样的,重复性太大,还麻烦,并且修改样式也麻烦,维护起来也不方便。如果针对每一个不同的标签样式不一样,可以使用它。
第二种:
使用style标签,写在head标签内
<style type=”text/css”>
选择器 {
属性名:属性值;
属性名:属性值;
… …
}
</style>
如果针对每一个不同的页面样式不一样,可以使用它
第三种:
使用import来引入css文件
<style type=”text/css”>
@import url(theme.css);
</style>
已经不推荐使用
第四种:
使用link标签来引入css文件
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
推荐使用,如果不同的html文件里面的div都使用相同的属性值的话,有一个css文件可以供他们所有html引用,简单方便
7.css的选择器
常用的几种选择器:
元素选择器(类型选择器):
标签名 {
}
id选择器:
#id名 {
}
类选择器:
.class名 {
}
属性选择器:
input[属性名] {
}
input[属性名=属性值] {
}
后代选择器(包含选择器):
body p {
}
子元素选择器:
body > p {
}
组合选择器:
标签名,#id名,.类名 {
}
伪类选择器:
a:link 超链接未点击状态
a:hover 游标移到超链接上的状态(未点击)
a:active 点击超链接时的状态
a:visited 被访问后的状态
8.css的浮动
css浮动很难,我们只是使用很肤浅的浮动只是,大家不要往深里搞,会死人的
向左浮动:
float:left;
清除浮动:
清除左悬浮:
clear:left;
清除右悬浮:
clear: right;
清除左边和右边悬浮:
clear: both;
以上就是css的简单的知识点,大家只需要熟悉这些知识点就行,因为比较简单也并不是那么重要,所以也没有代码或者图片演示,但是大家自己在学习css的时候,还是要自己敲一边练练手,看看样式的演示效果就可以了。下次咱们再见吧。