HTML中css类 标签 高级 的分别运用?

html-css014

HTML中css类 标签 高级 的分别运用?,第1张

不是很明白楼主想知道什么,在此简单说说我对你提问的理解。

首先,css类是用于定义一个可通用的作用域,我把这个作用域理解成块。举例:

<div class="box">

<h3>块标题</h3>

<ul>

<li><a href="">列表链接</a></li>

<li><a href="">列表链接</a></li>

</ul>

</div>

定义这个类时

.box{width:300pxheight:300pxborder:1px solid #f00}

.box h3{}

.box ul{}

.box li{}

.box a{}

你可以看到,这个块里的其他标签的定义都由 .box 这个类开始,这代表当前div下的其他标签都将遵守以.box定义的相应标签的样式。使结构一目了然,样式也非常清晰。

类是可以重复使用的,像上面的结构,你可以重复多次,同样作用在这个结构上的样式类就都作用在每个重复的结构上。只需要书写一次。

与类不同的是ID,一个页面结构中,只允许一个ID,比如<div id="box"></div>那么这个页面结构中只允许出现一次id叫box的块。定义方法如下:

#box{}

如果你还不太明白,可以加我QQ:7453402,一起研究·

标签是指的什么?是说元素吗?

如:

.aaa

{

background-color:Red

}

.aaa A

{

background-repeat:repeat-x

}

第一个就是类,第二个是元素,类是在html里给某个html元素指定class,如:<div class='aaa'><a href='www.baidu.com'>百度搜索</a></div>,而元素则不用再指定。

h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。

- h5新增的标签

新增元素

说明

video    表示一段视频并提供播放的用户界面  

audio    表示音频  

canvas    表示位图区域  

source    为video和audio提供数据源  

track    为video和audio指定字母  

svg    定义矢量图  

code    代码段  

figure    和文档有关的图例  

figcaption    图例的说明  

main  

time    日期和时间值  

mark    高亮的引用文字  

datalist    提供给其他控件的预定义选项  

keygen    秘钥对生成器控件  

output    计算值  

progress    进度条  

menu    菜单  

embed    嵌入的外部资源  

menuitem    用户可点击的菜单项  

menu    菜单  

template  

section  

nav  

aside  

article  

footer  

header  

- css3

css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框

border-radius、box-shadow、border-image、

background-size:规定背景图片的尺寸

background-origin:规定背景图片的定位区域

background-clip:规定背景的绘制区域

文本效果(常用)

text-shadow:设置文字阴影

word-wrap:强制换行

word-break

css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D转换

transform:向元素应用2/3D转换

transition:过渡

动画

@keyframes规则:

animation、animation-name、animation-duration等

用户界面(常用)

box-sizing、resize

css3新增伪类

:nth-child()

:nth-last-child()

:only-child

:last-child

:nth-of-type()

:only-of-type()

:empty

:target  这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。

:enabled  

:disabled

:checked

:not