1.简介
1)html:在一个网页中负责的事情是一个页面的结构。(内容)
2)css(层叠样式表)---Cascading Style Sheets:在一个网页中主要负责了页面的数据样式。
2.编写css代码的方式:
1)外链式:引人外部的css文件。 -----推荐使用!
A.调用格式1:使用link标签。-----推荐使用!
格式:<link href="css文件的路径" rel="stylesheet" type="text/css">
例子:<link href="css.css" rel="stylesheet" type="text/css">
B.调用格式2:使用<style>引人
格式:<style type="text/css">
@import url("css.css");
</style>
2)外联式:在style标签中编写css代码。
缺点: 只能用于本页面中,复用性不强。
格式: <style type="text/css">
编写的代码。如:
color:#FOO;
</style>
3)内联式:直接在html标签中使用style属性编写。
缺点: 只能用于本标签中,复用性不强。
格式: <p style="color:#OFO">新闻 </p>
3.css知识
1)注释---【/* 内容 */】
2)选择器:找到对应的数据进行样式化。
A.标签选择器:就是找到所有指定的标签进行样式化。
格式:
标签名{
样式1;样式2....
}
B.类选择器:使用类选择器首先要给html标签指定对应的class属性值。
<p class="one">
格式:
.class的属性值{
样式1;样式2....
}
例子:
.one{
background-color:#OFO;
color:#FOO;
}
注意事项:
a.html元素的class属性值一定不能以数字开头。
b.类选择器的样式是要优先于标签选择器的样式。
顺序:类选择器---->标签选择器
C.ID选择器:使用id选择器首先要给html元素添加一个id的属性值。
<p id="two">
格式:
#id属性值{
样式1;样式2....
}
注意事项:
a.优先级最高。
顺序:id选择器--->类选择器--->标签选择器
b.id的属性值也是不能以数字开头的。
c.id的属性值在一个html页面中只能出现一次。(测试是不出问题)
D.交集选择器:就是对选择器1中的选择器2里面的数据进行样式化。
格式:
选择器1 选择器2{
样式1;样式2....
}
E.并集选择器:对指定的选择器进行统一的样式化。
格式:
选择器1,选择2...{
样式1;样式2....
}
F.通过选择器:
格式:
*{
样式1;样式2....
}
I.伪类选择器:状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
1和2可以换顺序,3、4固定
应用:table
例子:tr:hover{ background-color:#O6F;}
3)常用的css样式
A.操作背景的属性
a.background-color:#CCC; 设置背景颜色
b.background-image:url(?); 设置背景图片
c.background-repeat:no-repeat; 设置背景图片是否要重复
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
d.background-position:400px 100px; 设置背景图片的位置,第一个参数为左上角的左边距离,第二个参数为上边距离。
B.操作文本的样式
a.color:#FOO; 颜色
b.font-size:16px; 字体大小
c.line-height:40px; 行高
d.letter-spacing:10px; 字间隙
e.text-align:center; 字体方向
f.text-decoration:none; 字体修饰
none 无
underline 下画线
overline 上画线
line-through 中间穿过的线
blink 闪烁(目前浏览器不支持,看不到效果)
g.text-transform:uppercase;
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
4.特殊
1) <input type="text" placeholder="请输入用户名">用于提示用户/>
2) border-radius:0.7em 边框的圆角 ---------???
3) font-weight:bold; 文本字体粗细 粗 还有bolder
font-style:italic; 文本款式---如斜体 斜体还有:oblique 、italic
5.表格CSS table属性
1)border-collapse:设置是否把表格边框合并为单一的边框。
2)border-spacing:设置分隔单元格边框的距离。 ------仅作用于“separated border”模式
3)caption-side:设置表格标题的位置。-------top ------bottom
4)empty-cells:设置是否显示表格中的空单元格。 ------仅作用于“separated border”模式
5)table-layout:设置显示单元、行和列的算法。
例子:
/*表格属性*/
table{
border-collapse:collapse; /*合并单一的边框。 */
/* border-collapse:separate;*/
border-spacing:20px; /*设置分隔单元格边框的距离。----"separated borders"*/
/* caption-side:top; 设置表格标题的位置 */
caption-side:bottom;
/*empty-cells:show; */ /*设置是否显示表格中的空单元格。----"separated borders"*/
empty-cells:hide;
table-layout:fixed; /*固定长度,不足下一行*/ 英文会很长,中文会控制。
/*table-layout:auto;*/
}
6.表框的属性
1)width:宽
2)height:高
3)border-style:dotted((点)solid(实体)、double(双实线)、dashed(虚线)
4)border-color:边框颜色
5)border-bottom-color:边框底部颜色
6)border-top-width:边框顶部宽度
7)border-bottom-style:边框底部款式 ---上、右、下、左(顺时针类似)
7.盒子模型
1)内边距(padding)和外边距(margin)
2)例子:
div{
border-style:solid;
width:100px;
height:100px;
/* 内边距 */
padding-left:10px;
padding-top:20px;
}
.one{
margin-bottom:30px;
}
.two{
margin-left:700px;
}
8.定位
1)相对定位:相对于元素原本的位置进行移动的。position:relative;
2)绝对定位:相对于整个页面而言。position:absolute;
3)固定定位:相对于整个浏览器而言。position:fixed;
4)默认定位:默认值,没有定位。position:static;
1)html:在一个网页中负责的事情是一个页面的结构。(内容)
2)css(层叠样式表)---Cascading Style Sheets:在一个网页中主要负责了页面的数据样式。
2.编写css代码的方式:
1)外链式:引人外部的css文件。 -----推荐使用!
A.调用格式1:使用link标签。-----推荐使用!
格式:<link href="css文件的路径" rel="stylesheet" type="text/css">
例子:<link href="css.css" rel="stylesheet" type="text/css">
B.调用格式2:使用<style>引人
格式:<style type="text/css">
@import url("css.css");
</style>
2)外联式:在style标签中编写css代码。
缺点: 只能用于本页面中,复用性不强。
格式: <style type="text/css">
编写的代码。如:
color:#FOO;
</style>
3)内联式:直接在html标签中使用style属性编写。
缺点: 只能用于本标签中,复用性不强。
格式: <p style="color:#OFO">新闻 </p>
3.css知识
1)注释---【/* 内容 */】
2)选择器:找到对应的数据进行样式化。
A.标签选择器:就是找到所有指定的标签进行样式化。
格式:
标签名{
样式1;样式2....
}
B.类选择器:使用类选择器首先要给html标签指定对应的class属性值。
<p class="one">
格式:
.class的属性值{
样式1;样式2....
}
例子:
.one{
background-color:#OFO;
color:#FOO;
}
注意事项:
a.html元素的class属性值一定不能以数字开头。
b.类选择器的样式是要优先于标签选择器的样式。
顺序:类选择器---->标签选择器
C.ID选择器:使用id选择器首先要给html元素添加一个id的属性值。
<p id="two">
格式:
#id属性值{
样式1;样式2....
}
注意事项:
a.优先级最高。
顺序:id选择器--->类选择器--->标签选择器
b.id的属性值也是不能以数字开头的。
c.id的属性值在一个html页面中只能出现一次。(测试是不出问题)
D.交集选择器:就是对选择器1中的选择器2里面的数据进行样式化。
格式:
选择器1 选择器2{
样式1;样式2....
}
E.并集选择器:对指定的选择器进行统一的样式化。
格式:
选择器1,选择2...{
样式1;样式2....
}
F.通过选择器:
格式:
*{
样式1;样式2....
}
I.伪类选择器:状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
1和2可以换顺序,3、4固定
应用:table
例子:tr:hover{ background-color:#O6F;}
3)常用的css样式
A.操作背景的属性
a.background-color:#CCC; 设置背景颜色
b.background-image:url(?); 设置背景图片
c.background-repeat:no-repeat; 设置背景图片是否要重复
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
d.background-position:400px 100px; 设置背景图片的位置,第一个参数为左上角的左边距离,第二个参数为上边距离。
B.操作文本的样式
a.color:#FOO; 颜色
b.font-size:16px; 字体大小
c.line-height:40px; 行高
d.letter-spacing:10px; 字间隙
e.text-align:center; 字体方向
f.text-decoration:none; 字体修饰
none 无
underline 下画线
overline 上画线
line-through 中间穿过的线
blink 闪烁(目前浏览器不支持,看不到效果)
g.text-transform:uppercase;
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
4.特殊
1) <input type="text" placeholder="请输入用户名">用于提示用户/>
2) border-radius:0.7em 边框的圆角 ---------???
3) font-weight:bold; 文本字体粗细 粗 还有bolder
font-style:italic; 文本款式---如斜体 斜体还有:oblique 、italic
5.表格CSS table属性
1)border-collapse:设置是否把表格边框合并为单一的边框。
2)border-spacing:设置分隔单元格边框的距离。 ------仅作用于“separated border”模式
3)caption-side:设置表格标题的位置。-------top ------bottom
4)empty-cells:设置是否显示表格中的空单元格。 ------仅作用于“separated border”模式
5)table-layout:设置显示单元、行和列的算法。
例子:
/*表格属性*/
table{
border-collapse:collapse; /*合并单一的边框。 */
/* border-collapse:separate;*/
border-spacing:20px; /*设置分隔单元格边框的距离。----"separated borders"*/
/* caption-side:top; 设置表格标题的位置 */
caption-side:bottom;
/*empty-cells:show; */ /*设置是否显示表格中的空单元格。----"separated borders"*/
empty-cells:hide;
table-layout:fixed; /*固定长度,不足下一行*/ 英文会很长,中文会控制。
/*table-layout:auto;*/
}
6.表框的属性
1)width:宽
2)height:高
3)border-style:dotted((点)solid(实体)、double(双实线)、dashed(虚线)
4)border-color:边框颜色
5)border-bottom-color:边框底部颜色
6)border-top-width:边框顶部宽度
7)border-bottom-style:边框底部款式 ---上、右、下、左(顺时针类似)
7.盒子模型
1)内边距(padding)和外边距(margin)
2)例子:
div{
border-style:solid;
width:100px;
height:100px;
/* 内边距 */
padding-left:10px;
padding-top:20px;
}
.one{
margin-bottom:30px;
}
.two{
margin-left:700px;
}
8.定位
1)相对定位:相对于元素原本的位置进行移动的。position:relative;
2)绝对定位:相对于整个页面而言。position:absolute;
3)固定定位:相对于整个浏览器而言。position:fixed;
4)默认定位:默认值,没有定位。position:static;