【干货】CSS指层叠样式表CSS书写规则基本基本语法

一.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中属性选择器,甚至是浏览器窗口本身

共同属性:

p​​osition:将元素放置在静态、相对、绝对或固定位置。

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 代码。

格式:

较旧的实例可能

Ø 备注:

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论