CSS
简介：全称,层叠样式表，主要为HTML网页添加美化的成分，处理HTML的各个标签的细节问题。
-
引入方式：行内样式表，内部样式表，外部样式表；
01——行内样式： <h1 style="color:red;font-size:111px;">CSS必须嵌入到HTML中，方可显示其效果</h1> 02——内部样式 <head> h1{ color:green; font-size:99px } </head> 03——外部样式（推荐） <link href="itcast.css" style="text/css" rel="stylesheet"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>css的引入方式</title>
<style type="text/css">
div{
font-size: 44px;
color: green;
}
</style>
<link href="../Css/out.css" style="text/css" rel="stylesheet"/>
</head>
<body>
<p style="font-size: 33px;color: red">十一快乐</p>
<p style="font-size: 35px;color: green;">十一快乐</p>
<div>元旦快乐</div>
<div>元旦快乐</div>
<div>元旦快乐</div>
<span>春节快乐</span>
<span>春节快乐</span>
<span>春节快乐</span>
<span>春节快乐</span>
<hr>
<h1>最大号标题</h1>
</body>
CSS选择器
定义：为一个或多个符合条件的标签统一添加属性；
选择器种类
01——标签选择器 <h1>{}
02——类选择器 .a{} class="a" 可以精确控制某个标签的样式
03——ID选择器 #name{} id="name"
04——组选择器 h1,h2{}
05——父类选择器 div h2{}
06——通用选择器 *{}
07——伪类选择器 根据用户的动作，显示出标签的状态，最常用的就是超链接
{
01——a:link 指值元素没有被访问过的状态
02——a:hover 指鼠标经过元素的状态
03——a:active 指鼠标按下激活元素的状态
04——a:visited 指元素已经访问的状态
}
<style type="text/css">
/*标签选择器*/
h1{
font-size: 88px;
color: yellow;
}
/*类选择器，通过class来调用*/
.a{
color: blue;
}
.b{
color: black;
}
/*ID选择器，通过ID来调用*/
#TYPE{
color: aqua;
}
/*组选择器，定义一组标签的属性*/
h2,h3{
color: fuchsia;
}/*父类选择器 可以为子类选择属性*/
div h4{
color: maroon;
}
/*通用选择器 为body内的所有便签统一选定属性*/
*{
color: olive;
}
</style>
</head>
<body>
<h1>英国脱欧</h1>
<h1 class="a">美国被罚</h1>
<h1 class="b">中国得胜</h1>
<h1 id = "TYPE">小日本被操了</h1>
<h2>人民币降息</h2>
<h3>人民币降息</h3>
<div>
<h4>台湾回来吧</h4>
<h4>美国一起来吧</h4>
</div>
<div>哈哈</div>
<span>呵呵</span>
</body>
CSS属性
- CSS属性分为以下几类：背景，文本，字体，列表，边框（具体看文CSS档）
CSS的盒子模型
CSS盒子模型常用来WEB页面的布局
-
属性：padding文字与边框的间距，margin 盒子与盒子的间距
<title>盒子模型</title> <style type="text/css"> .a{ border-style:dashed; width: 200px; height: 200px; background-color: red; /* padding-left: 140px; padding-top: 140px; */ margin-left: 50px; margin-top: 50px; } </style></head>
<body><div class="a">哈哈</div> </body>
绝对定位和相对定位
- 绝对定位：参照于原点坐标，对象可重叠；
- 相对定位：参照于上一个临近标签的坐标，对象不可重叠
<title>相对和绝对定位</title>
<style type="text/css">
/*
.a{
border-style: double;
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.b{
border-style: double;
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 60px;
top: 60px;
}
*/
.a{
border-style: double;
width: 200px;
height: 200px;
background-color: red;
background-image:url("");
position: relative;
}
.b{
border-style: double;
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 205px;
}
.c{
border-style: double;
width: 100px;
height: 100px;
background-color: fuchsia;
position: relative;
left: 310px;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">
</div>
<div class="c">
</div>
</body>
JavaScript
- 简介：基于对象（通过内置对象或者自定义对象来完成逻辑），事件驱动（js代码不会自己运行，需要用户或系统的时间触发后方可运行，），解释性，脚本弱类型语言；
- 用途：HTML中动态内容的制作和实现。
嵌入网页的方式
01——在HTML标签中定义事件时，直接书写JS脚本
相同的JS代码，在不同的浏览器或者同一种浏览器的不同版本中，运行效果可能不同
02——在网页中嵌入JS脚本
DHTML手册主要查询某个标签有哪些属性，事件等
03——在网页中调用独立JS文件（推荐）
04——一个网页中，多个用<script>标签定义的JS片段，可以相互访问
<script type="text/javascript">
//函数
function fun() {
window.alert("我们去百度了")
window.open('07_position.html')
}
</script>
<script type="text/javascript" src="../JS/out.js"></script>
</head>
<body>
<input
type="button"
value="去百度"
style="font-size: 100px"
onclick="fun()"
/>
<input
type="button"
value="去新浪"
style="font-size: 100px"
onclick="goSina()"
常量与变量
1.字符串大小写敏感
2.提倡采用换行或空白符让代码优美，增强可读性
3.JavaScript中以换行符做为语句的结束，建议一行只写一条语句，并用分号结束
4.变量以字母，字数，下画线，美元符号开头，不能以数字开头，不要使用关键字或保留字
5.变量分全局变量和局部变量，变量可以先声明，后使用，也可以直接使用无需声明（方法外的变量为全局变量，方法内的变量叫局部变量）
<body>
<script type="text/javascript">
function sayHi(userName) {
//通过报警框显示信息
window.alert(userName+"你好！！！");
}
sayHi("昭君");
</script>
<script type="text/javascript">
function a(num) {
var num = 10;
window.alert(num);
}
</script>
<script type="text/javascript">
var num = 100;
a(100);
window.alert(num)
</script>
</body>
数据类型
- Js的数据类型：基本数据类型：number（var）,boolean(0为假，非零为真),string;
- 特殊类型：null,undefind;
- 复合类型:数组，函数，对象；
<body>
<script type="text/javascript">
var num1 = 100;
var num2 = 0111;
var num3 = 0x13456;
//用js在浏览器的文档区域中显示数据
//documen表示浏览器中的文档区域
window.document.write(num1+"<br/>");
window.document.write(num2+"<br/>");
window.document.write(num3+"<br/>");
</script>
</body>
<body>
<script type="text/javascript">
window.document.write("大'家'好");
window.alert("大家好\n我叫林培拔")
window.document.write('\u2605');
</script>
<body>
<script type="text/javascript">
function show(age) {
if(age<=16){
return "未成年";
}else{
return "成年了！"
}
}
</script>
<script type="text/javascript">
var msg = show(22);
window.alert(msg);
</script>
</body>
额外内容
Uri 指web和非web的资源标识符
Url:指web的资源标识符
规定：:GET<=1KB
GET:这个方式提交数据是将数据编码，添加在URL后面，发给服务器
POST:通过IO流的方式将数据传到服务器
UTF-8 ：全世界所有文字的编码和解码方式，推荐用，汉字3字节，英文2字节
Iso8859-1:英语语系为主的编码和解码方式
GB2312：简体常用汉字编码和解码方式
GBK：简体或不常用常用汉字编码和解码方式
黑马资源
三、CSS和HTML的结合方式
CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
a. 行级样式表:采用style属性,范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
b. 内嵌样式表:采用<style>标签完成。范围针对此页面
c. 外部样式表: 采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import，必须写在<style>标签中，并且必须是第一句
eg: @import url(a.css) ;
两种引入方式的区别：
外部样式表中不能写<link>标签,但是可以写import语句
四、CSS选择器
选择器分为两大类:
1.基本选择器
a.标签选择器:指的就是选择器的名字代表html页面上的标签
p{
color:red ;
border:1px dashed green;
}
b.类选择器：规定用圆点.来定义
优点：灵活
eg: .one{background-color:#ff0099; }
c. ID选择器：规定用#来定义
eg: #one{cursor:hand; }
区别：标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。
d:通用选择器： 用*定义,代表页面上的所有标签。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.扩展选择器
a. 组合选择器:采用逗号隔开
eg: p,h1,h2,.one,#two{color:red ; }
b. 关联选择器(后代选择器): 采用空格隔开
eg: h4 span i{color:red ; }
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
c. 伪类选择器
1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg:a:link{color:red ;}
a:visited{color:yellow;}
注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
2) :动态伪类 : 针对所有的标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
五、CSS各种选择器的冲突(掌握)
CSS样式的冲突:
1.ID选择器 > 类选择器 > 标签选择器
2.行级样式表 > 内嵌样式表 > 外部样式表
外部样式表的ID选择器 > 内嵌样式表的标签选择器
原则： 就近原则
六、CSS的各种属性(掌握)
? CSS中尺度单位的介绍
CSS的单位:
a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡
b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)
*字体设置
p{
font-size:50px; /*字体大小*/
font-style:italic ; /*斜体*/
font-weight:bold; /*粗体*/
font-family:幼圆; /*字体类型*/
font-variant:small-caps; /*小写变大写*/
}
*文本设置
p{
letter-spacing:0.5cm ; /*字母间距*/
word-spacing:1cm; /*单词间距*/
text-align:center; /*在所包含容器的中间*/
text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/
text-transform:lowercase; /*单词字体大小写*/
color:red ;
}
*背景设置
body{
background-color:#ff99ff ; /*背景颜色*/
background-image:url(images/2.gif) ; /*背景图片*/
background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/
background-position:center right; /*背景位置*/
background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/
}
*列表设置
ul li{
list-style:none; /*列表前样式*/
list-style-image:url(images/2.gif) ; /*列表项前图片*/
margin-left:80px;
}
*盒子模型(border margin padding)
padding:是内容到边的距离
border: 是边的粗细
margin:是控件到控件的距离
*定位设置(position,float,clear,z-index)
#d{
position: absolute; /*
1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流
2.相对定位: 相对的是自己在顺序流中原来的位置
*/
left:100px; /*横坐标*/
top:100px; /*纵坐标*/
border:1px solid red ;
width:100px;
height:100px;
background-color:#ff66ff;
}
#d1{
position: relative; /*相对位置*/
left:100px;
top:100px;
border:1px solid green ;
width:100px;
height:100px;
background-color:#339900;
}
span{
position: relative;
left:20px;
top:20px;
}
z-index:值任意，值越大离我们越近
float : 浮动
overflow: 超出范围怎么办