每一条css样式定义由两部分组成,形式如下:[code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
@ CSS的基本特征?
总体来说,CSS具有以下特点:
1.丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2.易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。
另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,大家只需要在样式列表中找到相应的样式声明进行修改。
3.多页面应用
CSS样式表可以单独存放在一个CSS文件中,这样大家就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4.层叠
简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。
5.页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。
@ css怎么设置class的优先级?
样式权值设定
1. 内联样式表的权值最高 1000;
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
5 继承样式的权值为0.1
举例
< class a>
< class b>
<class c >
直接用 .c(类)选择器 它的权值只有10 ,
用 .a .b .c来选择,则它的权值为10+10+10。
@ 自学HTML5的条件是什么?
对于许多自学前端的学习者来说,学习兴趣是浓厚的,但是往往求学无方。现在网上的资源良莠不齐,在海量的信息库里挑选适合自己的HTML5学习线路更是难上加难。
今天小编就给大家分享一个HTML5初级开发工程师学习线路。
第一部分是HTML5课程介绍,通过这段课程学习,学生可以对整个HTML5课程有全面的了解,对未来主要的工作和业务应用场景有初步的认识。
1、互联网发展趋势
2、H5语言的优势
3、简单易学人人都能编程
4、H5就业和薪资情况
5、H5常见的项目与产品
6、H5的未来与方向
第二部分是HTML基础,通过这一部分基础学习,学生可以学会HTML,并且了解网页的组成,可写出基本的网页结构。
1、HTML简介与历史版本
2、常用开发软件
3、常见标签与属性
4、表格与表单
5、标签规范与标签语义化
6、实战:网页结构布局
第三部分是CSS基础,通过此阶段的学习,学生可以学会CSS,利用PS工具进行样式开发,结合HTML结构完成整页制作。
1、css简介与基本语法
2、常见的各种样式属性
3、CSS选择器与标签类型
4、理解盒子模型与CSS重置
5、浮动与定位
6、利用photoshop工具测量样式
7、HTML+CSS开发网页
8、实战:高仿电商首页效果
第四部分是CSS3基础,学成之后,学生可以利用CSS3制作出炫酷的网页动态效果。
1、css3常见样式
2、css3选择器
3、变形与动画
4、3D效果与关键帧
5、弹性盒模型
第五部分是移动端布局,通过这一阶段的学习,可以掌握移动端概念与移动端布局方案,理解什么是响应式,利用bootstrap来搭建页面。
1、移动端基本概念
2、viewport窗口设置
3、移动端布局方案
4、rem、vh、vw等单位
5、响应式布局
6、bootstrap框架
第六部分是JavaScript基础,可以基本掌握JS基本语法和简单的逻辑处理,掌握JS核心内容,利用JS开发网页中常见的特效效果。
1、JS简介
2、JS变量
3、数据类型与类型转换
4、运算符与优先级
5、流程控制-if..else
6、流程控制-switch…case
7、流程控制-while、do..while、for循环
8、break、continue语法
9、函数定义与调用
10、全局变量与局部变量
11、函数传参与返回值
12、函数作用域与变量作用域
13、DOM的基本操作
14、定时器使用
15、this指向与修改指向
16、数组、字符串等方法操作
17、时间对象与正则对象
18、掌握常见BOM操作
19、常见事件与事件细节
20、JSON与AJAX
21、JSONP跨域操作
22、前端cookie的使用
23、实战:JS配合HTML与CSS完成电商项目
第七部分是jquery框架,此阶段的学习结束,学生可以学会jquery框架,利用jquery框架快速开发网页效果。
1、jquery核心思想
2、jquery常见方法
3、jquery动画操作
4、jqueryAJAX操作
5、jquery工具方法
6、利用jquery快速开发网页
第八部分是PHP基础,学习之后可以掌握前后端真实开发模式,能够对数据库进行CURD操作,并能显示数据到页面,实现动态网站开发。
1、PHP简介与基本语法
2、mysql数据库及sql语法
3、apache服务器与集成开发工具
4、PHP链接数据库
5、PHP与AJAX交互
6、实战:留言板、登录、注册等
第九部分是H5基础项目,也是此学习路线的尾声部分。学生能够独立完成一整个大型网站的前端开发。具备独立的项目开发能力和思考能力。并且,做到多设备、多浏览器兼容等处理实现。
1、项目简介
2、项目功能演示
3、项目划分及框架
4、编写HTML页面结构
5、设置CSS样式
6、添加JS交互
7、可选框架:bootstrap、jquery、PHP等
8、项目调试及兼容
9、项目验收