学习目的
了解什么是CSS(层叠样式表)
了解CSS的基础语法
掌握基础CSS的基础使用
掌握盒子模型
一、CSS
概念
CSS全称 Cascading Style Sheet,意为层叠样式表语言。CSS是用来修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面变得更加好看。CSS好比是化妆品,HTML是主体,CSS依赖HTML主体的存在来修饰。
特点
CSS的存在就是修饰HTML,新建的CSS文件还是xx.html文件。
1.1 CSS三种嵌套方式
分类
内联定义方式:在标签内部使用 标签的style属性 来设置元素的CSS样式;
样式块方式:在HTML的头部
标签中使用style块;部样式表链入方式:
1.1.1 内联定义方式
概念
在标签内部使用 标签的style属性 来设置元素的CSS样式,这种方式称为内联定义方式。
特点
由于可以在每一个标签内部使用style属性来编写属于自己这个标签的样式,因此样式独立性较好,可以准确到每一个标签独有的样式。
语法格式
一个标签一个style属性,一个style可以有多个样式,每一个样式可以有一个值,采用 样式名:样式值 的方式表示一个完整的样式,多个样式之间需要使用 分号; 隔开。
标签>
示例
1.1.2 样式块方式
概念
在HTML的
头部中使用示例
div {
样式名 : 样式值;
样式名 : 样式值;
.....
}
table {
样式名 : 样式值;
样式名 : 样式值;
.....
}
/* id选择器 */
#usernameErrorMsg {
color : red;
font-size : 12px;
}
/* 标签选择器 */
div {
background-color : black;
border : 1px solid red;
width : 100px;
height : 100px;
}
/*类选择器(class属性选择器)*/
.student {
border : 1px solid red;
width : 400px;
height : 30px;
}
对不起,用户名不能为空!
专科
本科
1.1.3 外部样式表链入方式
概念
将样式写到一个独立于HTML之外的xxx.css文件夹当中,在需要样式修饰的HTML网页的头部
标签上使用直接引入独立css文件,这种方式称为链入外部样式表文件(该方式在开发中最常用)。语法格式
优点
易维护,类似于java面向接口编程,HTML主体的是接口,CSS样式是实现类,CSS随时可以修改维护,与主体无关;
维护成本较低。
示例
外部CSS样式文件:css文件夹的 1.css文件
a {
text-decoration : none;
}
/*
cursor : 鼠标样式,pointer是小手,hand也是,但是hand有浏览器兼容问题。建议使用pointer
*/
#baiduSpan {
text-decoration: underline;
cursor: pointer;
}
点击我链接到百度哦!
1.2 样式定位
描述
HTML中用于对标签(通常是div或span)在整个HTML页面中的位置布局样式,可以在CSS样式中对标签进行样式修饰的同时,还可以在样式块中给标签进行定位。
分类
相对定位:
绝对定位:
示例
#div1{
background-color: red;
border: 1px black solid;
width: 300px;
height: 300px;
position : absolute; /*绝对定位*/
left: 100px;/*靠左100像素*/
top: 100px;/*距顶100像素*/
}
二、盒子模型