html基础应用步骤代码,html基础2(示例代码)

html回顾

标记：

1.结构化标记

p

h1~h6

ul>li

ol>li

dl>dt+dd

div

2.文本修饰类

font

加粗：strong

斜体：em

下划线： u

删除线：del

3.表格标记

th表格的标题

重要属性：colspan rowspan

cellspacing

cellpadding

4.表单

text

password

submit

button

reset

file

radio

checkbox

image

css2 回顾

一、选择器

id选择器  #idname{ 属性名：属性值; }

类选择器  .classname{}

标签选择器  element{}

通配符选择器 *{}

后代  .header p{}

子元素选择器  .header>p{}

分组  h1,h2,h3{}

伪类选择器 :link  :visited   :hover :active

伪对象 :after :before ----> content

二、盒模型

margin

border

padding

width

height

三、文字、文本属性

color

font-size

font-style: italic/normal

font-weight:bold/normal

font-family

text-align

text-decorationg:underline line-through

text-indent:2em

line-height:1.5em

letter-spacing:字符间距

text-shadow文字阴影

四、背景属性

background

background-color

background-image

background-position

background-repeat

background-attachment:scroll/fixed

background-clip 背景裁剪

background-size

五：定位

浮动定位 float

相对定位 position:relative

绝对定位 position:absolute

六：显示属性 display  none/block/inline

七：内容溢出处理：overflow:hidden/visible/scroll/atuo

样式表的形式：将css连接到html中的方法

外部样式表：

内部样式表：

内联样式表：

css3 的特色：

1. 少用图片

2. 简单交互

3. 强大选择器>jquery

一、选择器

1.关系选择器

父子关系 div>p

兄弟关系 p+span

p~span

2.属性选择器 []

p[class]:找到包含class属性所有的p

p[class=name]{}:找到class属性值为name的所有的p

p[class^=‘a‘]{}:找到class的值以a开头的所有的p

p[class$=‘a‘]{}:找到class的值以a结尾的所有的p

p[class~=‘a‘]{}:找到class的值包含a这个单词的所有的p

p[class|=‘a‘]{}:找到class的值以a开头后面必须接‘-‘的p

p[class*=‘a‘]{}:找到class的值包含a这个字符串的所有p

3.目标伪类选择器

:target，突出显示活动的HTML链接，用于选取当前活动的目标元素

例如：p:target{background-color: blue;}

找到链接正在选中p

4.状态伪类：主要用于表单元素

焦点状态伪类  :focus

被禁用的表单元素 :disabled

被选中的表单元素 :checked

5.结构伪类

:first-child 首个子元素

:last-child 最后一个子元素

:nth-child(even) 找到第偶数个元素

:nth-child(odd) 找到第奇数个元素

:nth-of-type() 选择指定的元素

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算

:first-of-type第一个同类子元素

:last-of-type 最后一个同类子元素

6.伪元素

:first-line 文本的首行

:first-letter 文本的首字符

:before 在元素的内容前面插入新内容

:after 在元素的内容之后插入新内容 ::selection 匹配被用户选取的部分

7.内容生成

插入图像 content: url(images/1.jpg);

插入文字 content:‘abc‘

插入计数器 content:counter(计数器名称)

8.计数器的具体应用

counter-increment:test;/*定义了一个计数器 名字为test*/     content: counter(test);/*使用计数器*/

自定义计数器规则

counter-increment:test 2;/*定义一个偶数升序计数器*/

content: counter(test,lower-alpha);

/*使用计数器，并设置计数器的显示类型为小写罗马数字，支持所有list-style-type*/

一、css3文本修饰属性

1.添加阴影

text-shadow:2px 2px 5px gray,3px 4px red;

二、css3文本溢出处理

text-overflow

clip 裁切 【默认值】

ellipsis 显示省略号

用法：

**必须与overflow配合使用

**white-space:nowrap 设置文本强制不换行

三、添加私有前缀

-webkit-  chrome

-o-      欧朋

-moz-    火狐

-ms-      ie

四、文字描边和文字填充(webkit私有样式)

text-fill-color 给文字填充颜色

text-stroke设置文字描边

text-stroke-color设置文字描边颜色

text-stroke-width设置文字描边尺寸

五、设置元素透明属性opacity

六、盒子添加阴影 box-shadow

七、定位

定位的概念：以层的方式设置位置

定位属性position属性

static静态定位【默认】

relative相对定位：相对于元素本身设置位置,不会脱离文档流

absolute绝对定位：默认相对于body，如果父元素有定位，相对于父元素设置位置，脱离文档流

fixed固定定位：位置是固定的，脱离文档流

定位的层叠次序z-index,数值大的在上。不要加单位

设定位置的属性 right,left,top,bottom

八、设置渐变

linear-gradient(red,blue) 默认是水平渐变

linear-gradient(top,red,blue) 设置一个从上到下的垂直渐变

取值：top,left,right,bottom

颜色值透明的：transparent

九、border-image边框图像

border-image-repeat的属性值：

stretch：指定用拉伸方式来填充边框背景图。默认值

repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

space：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

十、背景属性

1. background-size属性

取值：

用长度值指定背景图像大小。不允许负值。用百分比指定背景图像大小。不允许负值。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

2. background-clip属性

3.

background-origin属性值 padding-box：从padding区域(含padding)开始显示背景图像

border-box：从border区域(含border)开始显示背景图像，默认值   content-box：从content区域开始显示背景图像。

3.background-clip:设置背景图像向外裁剪的区域

值

padding-box：从padding区域(不含padding)开始向外裁剪背景

border-box：从border区域(不含border)开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。text：从前景内容的形状(比如文字)作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

十一、变换(转换)---参考了ps的自由变换功能

变换的功能有：移动位置、缩放、倾斜、旋转

(1)2D变换

变换的属性：transform:

位置移动的方法 translate(x,y)

translateX(x)

translateY(y)

缩放：scale() 没有单位

取值：

默认值为1

缩小：0到1之间的数值

放大：大于1的数值

scaleX()

scaleY()

旋转：rotate(deg)

倾斜：skew(deg)

变换的中心点：transform-origin

用关键字设置left top right bottom

用数值和百分比进行设置

十二、过渡

transition-delay 过渡延迟时间，单位s或ms

transition-timing-function 过渡效果

ease:规定慢速开始，然后变快，然后慢速结束的过渡效果

linear：规定以相同速度开始至结束的过渡效果

ease-in：规定以慢速开始的过渡效果

ease-out：规定以慢速结束的过渡效果

ease-in-out：规定以慢速开始和结束的过渡效果

transition:用于设置元素发生样式变化时的过渡                  如：tansition:all 1s 2s linear;

html+css

1.鼠标样式cursor

poiner变成小手

move移动

wait等待

help帮助

2.获取属性值的方法：attr(属性名)

attr()

如：id,name,class,href,title

**块元素支持转换效果，内联元素不支持

全局属性

id,class,title，style

3. perspective属性

定义 3D 元素距视图的距离，以像素为单位，为元素的内容应用透视变换

值越小，效果越明显；值越大视觉效果就很小。

4. 3D位移

：translate3d(x,y,z)

，translateZ(z)

5. 3D旋转:

rotateX(deg)函数允许一个元素围绕X轴旋转；

rotateY(deg)函数允许一个元素围绕Y轴旋转；

rotateZ(deg)函数允许一个元素围绕Z轴旋转

6.动画

1.定义动画 @keyframes name{  }

2.应用动画 animation

3.动画子属性

1)animation-iteration-count:播放次数

infinite，表示无限次播放

2)animation-direction:播放动画的方式

取值：

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行