一、HTML+CSS+JavaScript
HTML:负责网页的结构
CSS:负责网页的美观
JavaScript:负责用户与浏览器的交互
二、CSS入门
1、定义
CSS(Cascading Style Sheet)中文叫层叠样式表,简称样式。
2、使用方式(3种):
(1)行内样式
使用方法:利用标签的style属性进行css控制,css写在stylr属性值中
弊端:一次只能控制一个标签的样式
举例:<a href="xxxx" style="font-size:19px;color:#090">超链接</a>
(2)内部样式
使用方法:使用style标签进行css控制,css内容写在style标签体内,一次可以控制多个标签的样式
弊端:和HTML标签混杂在一起,不好维护,css内容无法在多个HTML页面重用
举例:
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>
(3)外部样式(推荐使用)
使用方法:建立一个后缀为css的文件,css内容都写在该文件中,在使用css的页面的HTML页面中,导入外部文件
举例:
<link href="01.css" rel="stylesheet"/>
href : 表示外部css文件的位置
rel: 表示关联的是样式表
三、语法
1、css中的内容使用规则:
选择器(selector):使用选择器来选择需要添加样式的标签
css属性(property):给选择的标签添加什么样式。例如:字体大小、颜色、背景等。
css值(value):添加的样式的具体值,例如:字体的大小可以设置为12px,颜色可以设置为红色等。
2、选择器
(1)标签选择器:
作用:选择到所有同名的标签
举例:
p{
font-size:20px;
color:#FFF;
}
(2)类选择器
作用:选择同类的标签
注意:选择的标签必须具有class属性,同类的标签使用同名,当一个标签同时被标签选择器和类选择器选择的时候,类选择器优先
举例:
.c2{
font-size:20px;
color:#FFF;
}
(3)id选择器
作用:选择一个标签
注意:选择的标签必须具有id属性,在同一个页面中不要出现两个同名的id属性的标签,会对JavaScript代码选择标签的时候有影响,id选择器的优先级最高
举例:
#d2{
font-size:20px;
color:#FFF;
}
(4)并集选择器
作用:选择某个选择器中的子标签
举例:
选择div里面的span标签
div span{
font-size:20px;
color:#FFF;
}
(5)通用选择器
作用:选择所有的标签
举例:
*{
ont-size:20px;
color:#FFF;
}
(6)伪类选择器
作用:控制标签在不同状态下的样式
标签拥有4种状态:
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活(按下但没有松开)的状态
visited: 已经被访问过的状态(鼠标点下且松开)
注意:
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
所以:正确顺序: link visited hover active
举例:
<style type="text/css">
a:link{
font-size:24px;
color:#F00;
}
a:visited{
font-size:24px;
color:#CCC;
text-decoration:none;
}
a:hover{
font-size:24px;
color:#00F;
text-decoration:none;
}
a:active{
font-size:24px;
color:#0F0;
text-decoration:underline;
}
</style>
2、常用CSS属性和值
(1)文本属性和值:
文本颜色:color:颜色
字符间距:letter-spacing:10px
对齐方式:text-align:center
文本修饰:下划线:text-underline,中划线:text-line-through,上划线:text-overline,没有:text-decoration:none,单词间距:word-spacing:10px
(2)字体的属性和值:
字体类型:font-family:"宋体";(这里的字体类型是读取系统的默认字体库,尽量使用通用的字体,如果你设置的字体用户的系统上没有,就使用默认的宋体显示)
字体大小:font-size:24px;
字体样式:font-style:itaic;正(normal默认)斜(italic)
字体加粗:font-weight:bold;
这几种属性和值得简写属性:font: italic bold 36px "黑体";
属性值得排序方式为:
font-style
font-variant
font-weight
font-size/line-height
font-family
(3)背景属性和值
背景颜色:background-color:#FFF;
背景图片:background-image:url();
设置背景图片是否重复或者如何重复:no-repeat; 值:not-repeat: 不重复,repeat-x: x轴重复,repeat-y: y轴重复,repeat: x和y轴重复(默认)
设置背景图片的起始位置:background-position:top center;
简写属性:background:#FFF url(mm.jpg) no-repeat top center;
排序方式:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
(4)列表属性和值:
列表符号类型:list-style-type:none;
设置列表符号的图片:list-style-image:url();
(5)表格属性和值
合并表格的边框:border-collapse:collapse;
(6)边框的属性和值
边框颜色:
左边框:border-left-color:#F00;
右边框:border-right-color:#0F0;
上边框:border-top-color:#00F;
下边框:border-bottom-color:#C90;
简写属性:border-color:
默认值排序:上右下左(如果当前方向没有设置颜色,那么取对面的颜色)
边框宽度:
border-left-width:10px;
border-right-width:20px;
border-top-width:30px;
border-bottom-width:40px;
简写属性:border-width:
默认值排序:上右下左(如果当前方向没有设置边框,那么取对面的边框宽度)
边框样式:
border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
简写属性:border-style:
默认值排序:上右下左(如果当前方向没有设置样式,那么取对面的边框样式)
所有边框样属性简写:border:
border-width
border-style
border-color
四、盒子模型
可以把html页面上每一个标签看做是一个盒子。
宽度和高度(width和height): 决定这个盒子的容量
内边距(padding): 盒子边框与内容的距离
边框(border): 盒子的厚度
外边距(margin): 盒子与盒子之间的距离
五、CSS定位
相对定位:relative(相对自己之前的位置)
绝对定位:abosolute(相对父标签的位置)
固定定位:fixed(相对浏览器位置固定,不随着滚动条的拖动而位置改变)