本周总结
一、CSS
1、css使用方式
css：Cascadig Style Sheet层叠样式表
书写属性一定是样式库存在的样式
使用方式 ：
1）行内样式：
弊端：一次只能控制某一个标签，加入样式
任何html标签中都有style属性
style-“样式属性名称1：属性值1；样式属性名称2:属性值2;…”
2) 内联样式（内部样式）
使用选择器
标签名称选择器
在head标签体中:style标签
选择器{
样式属性名称1:属性值1;
样式属性清楚2:属性值2;
....
}
弊端：style中样式代码和html标签在同一个页面使用，不利于后期管理
3）外联样式（外部样式）
单独在当前项目下css文件夹
书写关联当前html标签的css样式文件
在当前html页面要使用css外部文件，需导入
< link href=“css文件” rel=“stylesheet” />
rel=“stylesheet” 关联层叠样式表 固定写法
2、css选择器
1）标签选择器
2）class：类选择器
就是在当前html标签上给定义class属性 ，给定一个属性值
在样式标签中
.class属性值{
样式属性名称1:value1;
样式属性名称2:value2;
}
特点：同一个html页面上，多个标签可以指定相同的class属性值
3）id选择器:
在标签中指定id属性以及属性值
在style标签中
#id属性值{
样式属性名称1:value1;
样式属性名称2:value2;
...
}
在同一个html页面，标签中id属性值必须唯一，否则后面通过JavaScript的id属性值获取标签对象可能获取不到
优先级 ：id选择器>class选择器>标签（element）选择器
4）子元素选择器
选择器1 选择器2{
属性样式:属性值;
}
选择器2选中的元素是选择器1选中的元素的子元素
<style>
/*标签选择器*/
/* div{
color: #00F;
font-size: 20px;
} */
/*class选择器*/
/* .c1{
color: #0F0;
font-size: 35px;
}
*/
/*id选择器*/
/* #cart{
color: #0000FF;
font-size: 10px;
} */
/* 子元素选择器 (后代选择器)
selector1 selector2{
...
}
*/
/* .c1 #sp{
font-size: 20px;
color: #008000;
} */
/*并集选择器
selector1,selector2{
...
}
*/
/* .c1,#span2{
font-size: 40px;
color: red;
} */
/* 通用选择器*{}*/
*{
font-size: 10px;
color: slategray
}
</style>
5）伪类选择器
描述的标签几种状态:
link:未访问过当前标签的状态
hover:鼠标悬停在标签的状态
active:鼠标正在访问(激活状态) 点击标签,但是没有松开的状态
visited:已经访问过的状态(点击了,并且已经松开)
语法:
选择器:状态名称(不区分大小写){
样式属性:属性值;
}
循环状态效果必须遵循：
在css定义中，a:hover必须位于a：link和a：visited之后才能生效
在css定义中，a:active必须位于a：hover之后才能生效
2、css常用样式属性
1）背景样式
background-color:背景颜色
background-image:背景图片
background-repeat:设置背景图片是否重复以及如何重复
background-position:设置背景图片的起始位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css常用样式属性_背景样式</title>
<style>
body{
/*背景颜色*/
/* background-color:moccasin */;
/*背景图片
图片 不是当前系统默认分辨率大小,图片就会自动x轴,y轴重复
*/
/* background-image: url(image/c.jpg); */
/* 设置背景图片是否重复以及如何重复
background-repeat:默认值 repeat(x轴/y轴重复)
no-repeat;不重复
repeat-x:x轴重复
repeat-y:y轴重复
*/
/* background-repeat: no-repeat; */
/*
background-position:默认值就是 left top
content center
right bottom
*/
/* background-position: left top; */
/*背景的简写属性:
只需要声明一个样式:就可以将上面所有的属性都是设置(先后顺序有条件的)
background:background-color background-image background-repeat background-position''
*/
background: darkgray url(image/c.jpg) no-repeat right top ;
}
</style>
</head>
<body>
</body>
</html>
2）边框样式
设置边框颜色 border-方向-color
border-left-color:#00F ;
border-right-color:#F00 ;
border-top-color:#0F0 ;
border-bottom-color:darkgray ;
边框颜色,边框宽度,边框样式的简写属性:
border-color/border-width/border-style:
1）默认方向：上 右 下 左
2）如果某一边没有设置颜色，补齐对边的颜色
设置边框宽度border-方向-width
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;
边框宽度简写属性
border-width:10px ;
光有颜色和宽度不行,必须指定四个边框的样式属性:border-方向-style
solid:单实线
double:双实现
dotted:点
dashed:虚线
边框样式的简写属性
border-style: solid;
边框的简写属性:
border:border-width border-style（必需) border-color
3、css浮动属性
浮动属性float属性
一旦某个元素进行浮动,那么就会脱落当前文档流(当前body中的先后顺序),直到它的外边缘
碰到某一个框或者是浏览器边框停止掉
left(使用居多)
right(其次)
设置不浮动
css样式属性clear :清除浮动!
both:两边都不浮动 (推荐)
left:左浮动
right:右不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动属性</title>
<style>
/*分别给三个div设置边框 */
#div1{
border:1px solid #000;
background-color: #0F0;
width: 150px;
height: 150px;
/* 右浮动 */
/* float: right; */
/*左浮动*/
float: left;
}
#div2{
border:1px solid #000;
background-color: #00F;
width: 150px;
height: 150px;
float: left;
}
#div3{
border:1px solid #000;
background-color: #F00;
width: 150px;
height: 150px;
/* float: left; */
}
#clear{
clear: both;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<!-- 没有文本的div
设置空的div
-->
<div id="clear"></div>
<!--
如果不需要浮动
-->
<div id="div3">div3</div>
</body>
</html>
4、css文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文本样式</title>
<style>
body{
/* 文本对齐方式 */
text-align: center;
/* text-decoration 属性用于设置或删除文本装饰
underline:下划线
overline:上划线
line-through:中划线
none:去掉装饰
*/
text-decoration: none;
/* 字符间接letter-spacing */
letter-spacing: 10px;
/* word-spacing 针对中文:单词间距
系统认为:两个字组成一个单词
*/
word-spacing: 20px;
}
</style>
</head>
<body>
今天 天气 不错!
</body>
</html>
5、文字样式
font-family:字体类型:一定是字体库存在的类型
font-style:字体样式
normal - 文字正常显示 默认值
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-style: oblique;
font-size:字体大小
字体粗细程度
bold:适当加粗
bolder:比bold设置的相对粗一些
6、css定位属性
定位属性:position
left:向右移动
top:向下移动
绝对定位 absolute
针对他的父元素进行移动:body父元素进行移动
相对定位 relative
针对当前元素以前的位置进行移动
固定定位 :fixed(使用居多)
二、javascript
1、变量定义
1)在js中，定义变量是var定义,var可以省略不写,(前期学习阶段不建议)
js是一个弱类型语言(语法以及语句不严谨),可以重复定义变量,后面的值将前面的值覆盖
2)var可以定义任何数据类型, 如何查看数据类型 typeof(变量名)
js中数据类型:通过值判定的
3)基本数据类型划分:
无论整数还是小数,都是number类型 -----提升为js的内置对象Number(引用类型)
无论是字符串还是字符,都是string类型----提升为js的内置对象String(引用类型)
boolean类型----提升js内置对象Boolean(引用类型)
undefined:未定义类型,没有给变量赋值(毫无意义)
object—自动提示js内置对象 (引用类型:代表任意Javascript内置对象的模板)
<!DOCTYPE html>
<html>
<head>
<meta charset
最低0.47元/天 解锁文章
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
