一.CSS1.CSS介绍
CSS指Cascading Style Sheets,用于定义网页的显示效果。
2.CSS 编写规则 Ø 基本语法
css规则主要由两部分1.选择器2.一个或多个声明组成
选择器的主要作用是确定需要更改样式的 HTML 元素。每个声明都由一个属性和一个值组成。使用大括号将声明括起来。使用冒号 (:) 分隔属性和值。多个声明使用分号 (;) 分隔。
如图所示:
Ø 价值单位 Ø 书写笔记
选择器{
属性1:值1;
属性2:“Times new roma”;
属性 3:值 31 值 32;
}
3.导入 CSSØ 内联样式表
用法:
使用相关标签中的样式属性。style 属性可以包含任何 CSS 属性
例如:
div 内联样式表
注意:
这种方式比较灵活,但是为多个相同的标签定义相同的样式比较麻烦,适合局部修改。
Ø 内部样式表
用法:
在head标签中添加style标签,然后在style标签body中修改多个标签的样式。
例如:
注意:
这种方式只适用于当前页面
Ø 外部样式表
用法:
例如:
myStyle.css 文件有以下内容
跨度{
边框:10px 双倍 #0000ff
}
例如:
Ø @import 导入
这种方式也是外部导入。
用法:
1.css文件,所有样式都存放在文件中
例如:
myStyle.css 文件有以下内容
跨度{
边框:10px 双倍 #0000ff
}
注意:
关于 @import 和引用外部样式表之间的区别:
1.@import 这样导入的CSS会在整个页面加载完成后加载样式。如果网络不好,你会先看到没有风格装饰的页面,然后闪一会儿再看到有风格装饰的页面。使用外部样式表时,会先加载样式表,所以你看到的是样式化页面。
Ø 优先级问题
就近原则:在不同的导入方法中,如果存在具有相同属性的样式,则该方法中的 HTML 元素将使用该方法中定义的样式。
4.CSS 选择器
CSS 选择器主要用于选择需要设置样式的 HTML 元素。对于CSS来说,选择器有很多,我们主要介绍如下:
Ø id选择器
要求:
html 中的标签有一个 id 属性,它有一个值。例如
在css中使用#来介绍,是指id属性中的值。例如#y1{…}
Ø 类选择器
要求:
html 中的标签有一个类属性,它有一个值。例如
在 css 中使用。引入,是指类属性中的值。例如,.yy1{…}
Ø 元素选择器
这是最常见的选择器。简单地说,文档中的元素就是选择器。例如:div{…}
Ø 属性选择器
要求:
html标签中必须有一个属性,不管这个属性是什么例如
在css中定义时,使用标签名[attribute=attribute value] 比如input[type=”text”]{…}
Ø 伪类
css 伪类用于为某些选择器添加特殊效果。
接下来我们介绍anchor伪类。
在支持 CSS 的浏览器中,链接的不同状态可以以不同的方式显示,这些状态包括:活动状态、已访问状态、未访问状态和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接*/a:visited {color: #00FF00} /* 已访问的链接*/a:hover {color: #FF00FF} /* 鼠标悬停在链接上 */a:active {color: #0000FF} /* 选择的链接*/
注意:
5.CSS属性Ø字体
Css 字体属性定义文本的字体系列、大小、粗体、样式(如斜体)和变体(如小型大写字母)
共同属性:
font:简写属性,作用是在一个声明中设置字体的所有属性。
格式:{字体:样式变体粗细大小/行距字体系列}
例如:{ font: italic bold 12px/20px arial,sans-serif}
font-family:定义字体系列
“,” 表示如果本地不存在该字体系列,则使用下一个
font-size:定义字体大小如font-size: 40px
font-style:定义字体样式如font-style:italic
Ø 文字
CSS 文本属性定义文本的外观。使用文本属性,您可以更改文本颜色、字符间距、对齐文本、装饰文本、缩进文本等。
共同属性
color:定义文字颜色如color:#ffff00
text-align:定义文本对齐方式如:text-align:center
text-decoration 为文本添加装饰。例如 text-decoration:underline(下划线)
letter-spacing:定义字符间距
word-spacing:定义字间距
o 背景
CSS 允许应用纯色作为背景js中属性选择器,以及使用背景图像来创建相当复杂的效果。CSS 在这方面远远优于 HTML。
共同属性:
background:简写属性,作用是在声明中设置背景属性
格式:{背景:颜色url(图片路径)重复滚动位置}
例如:{background:#00FF00 url(bgimage.gif) no-repeat fixed top}
background-color:定义背景颜色
background-image:定义背景图片 background-image: url (xx.jpg)
background-position:定义背景图片的起始位置 background-position:10% 5%;
background-repeat:定义背景图片是否重复以及如何重复 background-repeat: no-repeat
Ø 尺寸
CSS Dimension 属性允许您控制元素的高度和宽度。
共同属性:
width:设置元素的宽度
height:设置元素的高度
Ø 清单
CSS 列表属性允许您放置、更改列表项徽标或使用图像作为列表项徽标。
共同属性:
list-style:简写属性。用于在一个声明中设置列表的所有属性。
格式:{list-style : 图像类型位置}
例如:{list-style : url(liebiao.jpg) square inside}
list-style-type:定义列表项标志的类型
list-style-position:定义列表项logo的位置常用值:inside,outside
list-style-image:将列表项标志定义为图像
Ø 表格
CSS表格属性可以帮助你大大改善表格的外观
共同属性:
border-collapse:定义是否将表格边框合并为单个边框。常用值:折叠、分离
border-spacing:定义单元格边框之间的距离
caption-side:定义表格标题的位置常用值:top、bottom
Ø 简介
轮廓线是围绕元素绘制的一条线,位于边框边缘的外围,以突出显示该元素。
CSS 轮廓属性指定元素轮廓的样式、颜色和宽度。
共同属性:
outline:在一个声明中设置所有大纲属性
格式:{outline:color style width}
例如:{outline:#00FF00 点粗;}
outline-style:定义轮廓的样式。常用值:solid(实线)、dashed(虚线)、double(双线)……
outline-color:定义轮廓的颜色
outline-width:定义轮廓的宽度常用值:thin、thick、14px…
Ø 定位
CSS Positioning 属性允许您定位元素。
定位的基本思想很简单,它允许你定义一个元素的盒子相对于它的正常位置应该出现在哪里,或者相对于一个父元素、另一个元素js中属性选择器,甚至是浏览器窗口本身
共同属性:
position:将元素放置在静态、相对、绝对或固定位置。
top:定义定位元素的上边距边框与其包含块的上边框之间的偏移量
right:定义定位元素的右边距边界与其包含块的右边距边界之间的偏移量
left:定义定位元素的左边距边界与其包含块的左边界之间的偏移量
bottom:定义定位元素的下边距边框与包含块的下边框之间的偏移量。
Ø 分类
CSS 类属性允许您控制元素的显示方式、设置图像在另一个元素中的显示位置、相对于其正常位置定位元素、使用绝对值定位元素以及元素的可见性。
共同属性
float:定义元素浮动的方向
clear:设置一个元素的边是否允许其他浮动元素
cursor:指向元素时显示的指针类型
display:定义是否显示以及如何显示元素常用值none和inline消失
可见性:定义元素是可见还是不可见。常用值隐藏和可见占位符隐藏
6.CSS 盒子模型 Ø 盒子模型
CSS 框模型指定元素框如何处理元素内容、填充、边框和边距。
元素框最里面的部分是实际的内容,而直接包围内容的是填充。填充呈现元素的背景。填充的边缘是边框。边框之外是边距,默认情况下是透明的,因此不会遮挡其后面的任何元素
Ø 边框
元素的边框是围绕元素内容和内边距的一条或多条线。
CSS 边框属性允许您指定元素边框的样式、宽度和颜色。
共同属性:
border:简写属性,用于设置声明中四个边的属性。
格式:{border:width 样式颜色}
例如:{border:1px 纯红色;}
border-color:简写属性,定义元素边框可见部分的颜色,或者分别设置四个边的颜色。
border-style:用于定义所有边框的样式,或者单独设置每一边的边框样式。
border-width:简写属性,用于设置元素所有边框的宽度,或者单独设置每条边边框的宽度
border-top:简写属性,用于将上边框的所有属性设置为一个声明
border-right:简写属性,用于将右边框的所有属性设置为一个声明
border-bottom:简写属性,用于将下边框的所有属性设置为一个声明
border-left:简写属性,用于将左边框的所有属性设置在一个声明中。
Ø 边距
元素边框周围的空白区域是边距。设置边距会在元素外部创建额外的“空白”。
设置边距最简单的方法是使用边距属性,它接受任何长度单位、百分比值,甚至是负值。
共同属性:
边距:简写属性,在一个声明中设置所有边距属性
margin-top:定义元素的上边距
margin-right:定义元素的右边距
margin-bottom:定义元素的下边距
margin-left 定义元素的左边距
注意:使用边距定义所有边距时可以使用值复制。
如果缺少左边距值,则使用右边距值。
如果缺少下边距的值,则使用上边距的值。
如果缺少右边距的值,则使用上边距的值。
Ø 填充物
元素的内边距位于边框和内容区域之间。控制这个区域的最简单的属性是 padding 属性。
CSS padding 属性定义了元素边框和元素内容之间的空白。
共同属性:
padding:简写属性,用于在一个声明中设置一个元素的所有填充属性
padding-top:定义元素的顶部填充
padding-right:定义元素的右内边距
padding-bottom:定义元素的底部填充
padding-left:定义元素的左内边距。
二.javaScript1.javaScript介绍
1992年,Nombas公司开发出C-minus-minus(简称Cmm)嵌入式脚本语言,后更名为ScriptEase。
1995 年,Netscape Netscape 的 Brendan Eich 开发了内置在 Netscape Navigator 2.0 浏览器中的 LiveScript 脚本语言。在 Netscape Navigator 2.0 正式发布之前,Netscape 更名为 JavaScript
与此同时,微软进军浏览器,发布了 IE 3.0 和一个名为 JScript 的 JavaScript 克隆
同时存在 3 个不同的 JavaScript 版本。1997 年,第 39 技术委员会(TC39) 推出了 ECMA-262 标准,该标准定义了一种称为 ECMAScript 的新脚本语言。从那时起,Web 浏览器一直在努力工作(尽管有不同程度的成功和失败))使用 ECMAScript作为 JavaScript 实现的基础。
ECMAScript 只是定义脚本语言的所有属性、方法和对象的描述。其他语言可以实现ECMAScript作为功能的基准,JavaScript是这样的(简称js):
Ø js组成:
一个完整的js实现由以下三个不同的部分组成:
ECMAScript(js的核心,描述js的基本语法和基本对象)
DOM(文档对象模型)
BOM(浏览器对象模型)
:
Ø js介绍:
Ø js函数:
通过js可以改变html内容,改变html样式,验证输入。
2.导入jsØ,直接在html页面插入javascript
在两者之间编写 JavaScript 代码。
格式:
较旧的实例可能
Ø 备注:
请登录后发表评论
注册
社交帐号登录