1.css简介 用来修饰html样式的一种语言,层叠样式表 增强复用性 方便后期维护 2.css样式引入方式: (1)内嵌方式
<div style="color:red"></div>
(2)内部样式:head里边
<style>
div{color:red}
</style>
(3)外部样式 创建一个.css文件
div{color:red}
调用一个外部的css样式文件
<link rel="stylesheet" type="text/css" href="style.css">
rel:relation的缩写,引入的文件与html本身的关系,样式表
type:告知浏览器这段代码需要解析
href:需要引入的css的路径
特点:书写方便,复用性强,
3.css选择器 (1)基本选择器 优先级;id>class>元素 1)元素选择 h1{color:red;}d选择器
#div1{}----<div id="div1">
3)类选择器
.div1{}------<div class="div1">
(2)属性选择器
<style>
input[type="text"]{}
imput[type="password"]{}
</style>
(3)伪元素选择器
a标签的伪元素选择器
静止时:a:link{color:black}
悬浮时:a:hover{color:red}
活动时:a:active{color:blue}
完成时:a:visited{color:yellow}
(4)层级选择器 父选择器 子选择器{} 4.css的属性 (1)文字属性
font-size:字号
font-family:字体类型
(2)文本属性
color:颜色
text-align:对齐方式
text-decoration:下划线
(3)背景属性
bckground-color:背景颜色
background-image:背景图片 url("路径")
background-repeat:平铺方式 默认x方向和y方向都平铺
属性:repeat,no-repeat,repeat-x,repeat-y
(4)长度宽度属性
width:
height:
(5)列表属性
list-style-type:列表项前的小标志
list-style-image:列表项前的小图片 url("")
(6)显示属性
display:是否让标签元素显示
属性:none(消失),block(显示),inline(覆盖)
(7)浮动元素
div是行元素
float:浮动方向 left,right
缺点:会对父元素和相邻元素没有设置浮动的 造成不可预测的后果 属性:clear:both /left/right 清除浮动
5.css的盒子模型
border:盒子的边框
padding:盒子内部的间隙
margin:盒子外部与其他元素的间隙
border:
border-width:边框宽度
border-style:边框的线型
border-color:边框颜色
padding
padding:20px,50px 上下20 左右50
padding:10 20 30 40 顺时针
二、JS 1.javascript是基于对象模型 和 事件驱动 的脚本语言,可以潜入到html中 特点:交互性 : 安全性:js不能访问本地磁盘 跨平台性:所有的浏览器都内置js解析器 2.js作用? 可以动态的修改(增删)html及 css的代码 可以动态的校验数据 3.js的历史及组成? 组成:ECMAScript BOM(浏览器模型) DOM(文档对象模型) 4.js的引入方式 (1)内嵌脚本
<input type="button" value="button" onclick="alert('x')">
(2)内部脚本
<input id="btn" type="button" value="button">
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert("xxx");
};
</script>
(3)外部脚本创建一个.js文件 将js代码卸载其中,在Html 中使用<script>标签进行引入
<input id="btn" type="button" value="button">
window.onload = function(){
document.getElementById("btn").onclick = function(){
alert("xxx");
};
}
js代码写在哪都可以,在不影响html功能情况下 越晚越好。 5.js的基本语法 1)变量(弱类型)
var x = 5; var str = "hello";
y = 5;
2)原始类型 number:数字 string:字符串 boolean:布尔类型 undefined:未定义 null:空———>object
类型转换
number||boolean-->string: toString();
string-->number : parseInt("10"); parseFloat();
强制转换:
Boolean(value)
3)引用类型
var obj = new Object();
4)引用类型 赋值:=、 判断:>、 <、 ==、>=、<=、!=或<>、===(全等,代表值与类型都一致) 算术:+、-、*、/、 逻辑:&&、||、! void运算: 类型运算符:typeof:判断数据类型 instanceof:预测数据类型 5)逻辑语句
if else:
switch:
for
"10"+"20"=1020 进行连接
"7"-"2"=5 其它的进行算术运算
三、js 1.js的内置对象 1)Number
var myNum = new Number(value);
var myNum = Number(value);
toString():数字转换成字符串
valueOf():返回一个Number对象的基本数字值
2)Boolean
var bool = new Boolean(value); //object类型
var bool = Boolean(value);
toString():逻辑值转换为字符串,并返回结果
valueOf():返回Boolean对象的原始值
3)String
属性:length
方法:indexOf():检索字符串
lastIndexOf():从后检索
split():分割为字符串数组
substring():提取两个指定索引号之间的字符
substr():co索引号提取指定数目的字符