几个必须掌握的css概念:重用,子选择器和组选择器

html-css09

几个必须掌握的css概念:重用,子选择器和组选择器,第1张

这个可以看看HTML5课程大纲了解啊,分阶段学习的,不同阶段学习的内容可以了解下。

第一阶段:PCterminal

★ PC端页面重构

1、认知行业、岗位、部分专业术语,就业趋势与行业未来展望;

2、HTML5核心元素及布局应用;

3、CSS3核心属性及布局应用;

4、图形、图像软件的使用(PS,FW,AI);

5、浏览器兼容及解决方案;

6、图片整合、滑动门及宽高自适应等高级应用技术;

7、初步接触JS。

★ PC端交互开发(原生JS)

1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法;

2、DOM操作和BOM操作;

3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构;

4、Ajax动态读取数据、异步操作、与DOM、JSON的结合使用;

5、各种主流浏览器兼容性处理;

6、单例、工厂、代理、观察者等设计模式;

7、ECMA6.0新特性介绍。

★ PC端交互开发 (JQuery)

1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念

2、jQuery各种选择器的使用,及选择器的应用优化;

3、Dom节点操作、插入、删除、复制、移动节点等操作;

4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用;

5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题;

6、表单开发,设计可用性表单、表单验证、增强型表单;

7、Ajax、XMLHttpRequest 基础、jQuery Ajax、工具函数、缓存;

8、在jQuery中编写插件、插件扩展、插件应用、jQuery.pagination分页、jQuery.qtip信息提示、 jQuery.artDialog弹出层、jQuery.jscrollpane滚动条;

9、理解模块式开发,以及requirejs插件的使用。

★ PC项目实训

1、了解项目需求,项目流程;

2、了解项目管理,模块分配,项目时间预估;

3、了解产品周期,参与团队协作;

4、综合运用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技术,完成大型PC端项目开发。

第二阶段:Mobile terminal

HTML5+CSS3新添特性

1、HTML5概述,新增的元素和废除的元素、全局属性;

2、HTML5基础:新增文档结构元素(Article、section、nav)智能表单、文件API(FileList对象和File对象、FileReader接口)、拖放API;

3、CSS3基础:新增的后代选择器、伪类选择器、文本阴影、圆角、盒阴影、变形处理(transform)、动画(transitions)、帧定义(key-frames)、旋转(rotate)、 animation;

4、HTML5多媒体audio音频元素、Video视频元素、视频回调事件;

5、本地存储web storage、本地缓存;

6、定位基础知识以及原理,结合google(高德)地图定位;

7、响应式布局概念以及语法(@media)、web网页和mobile网页的区别、样式继承;

8、Canvas标签基础知识、绘制矩形、绘制圆形、使用路径、图像裁剪、保存为文件、创建动画。

★ WebAPP项目开发及实训

1、angular.js、backbone.js;

2、数据交互,ajax与DOM交互应用;

3、HTML5+CSS3在实际项目中的应用;

4、项目管理,模块分配,项目时间预估;

5、产品周期,团队协作;

6、微信场景开发;

7、微信平台互动开发。

第三阶段:混合应用开发及实训

★ 混合应用开发及综合实训

1、混合开发原理;

2、APP与webAPP;

3、混合应用与HTML页面交互;

4、通过客户端传递数据;

5、项目的版本迭代;

6、项目打包与应用,生成APK。

可以用jquery中的css()方法;

css()有两个参数。第一个参数是必选参数,一般是指css样式中的属性。第二个参数是可选参数,一般是指css样式中属性的值。当只有第一个参数是,则是指获取该属性的值。如果也有第二个参数,那就是表示改变属性的值。

示例如下:

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<title></title>

<script type="text/javascript" language="javascript" src='jquery.js'></script>

<script language='javascript'>

    $(function(){

        $('#btn1').click(function(){

            //css()为一个参数

            var divWid=$('#div-box').css('width')

            alert(divWid)

        })

        $('#btn2').click(function(){

            //css()为两个参数

            var divWid=$('#div-box').css('background','#00f')

        })

    })

</script>

<style type="text/css">

    #div-box {width:200pxheight:100pxbackground:#f00}

</style>

</head>

 

<body>

<div id="div-box"></div>

<input type='button' id='btn1' value='提取' />

<input type='button' id='btn2' value='改变' />

</body>

</html>

CSS选择器就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。

CSS选择器分类:

标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器

1、html标签选择器:

定义:以html标签作为选择器

2、class类选择器:

定义:为HTML标签添加class属性,通过类选择器来为具有此class属性的元素设置css样式。

类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则:

同一个元素可以设置多个类,之间用空格隔开:

3、ID选择器

定义:为HTML标签添加ID属性,通过ID选择器来为具有此ID的元素设置CSS规则

4、群组选择器

定义:集体统一设置样式

5、全局选择器

定义:所有标签设置样式

HTML文档结构图

6、后代选择器

定义:使用后代选择器设置,之间用空格隔开,后代选择器可以多层。

7、伪类选择器

链接的四种状态:激活状态,已访问状态,未访问状态,鼠标悬停状态。

伪类

说明

:link

未访问的链接

:visited

已访问的链接

:hover

鼠标悬停状态

:active

激活的链接

:hover 用于访问的鼠标经过某个元素时;

:active 用于一个元素被激活时(即按下鼠标之后放开鼠标之前的状态)

伪类选择器的属性:link >visited >hover >active

说明:

1) a:hover 必须置于 a:link和a:visited之后,才有效

2) a:active 必须置于 a:hover之后才有效

3) 伪类名称对大小写不敏感

8、CSS其它选择器

css继承特性,从父元素那继承部分css属性

选择器的优先级

ID选择优先级最高(id选择器定义具有唯一性)

class选择器次之(class选择器可以多个)

元素选择器再次之

其它选择器优先级主要根据定义的先后顺序,最后定义的优先级高

!important 加重选择器的优先级,添加在样式规则之后,中间用空格隔开。

CSS选择器命名规则

1:采用英文字母,数字以及"-" 和 "_" 命名

2:以小写字母开头,不能以数字和"-" 和 "_" 开头

3:使用有意义的命名规范

常用CSS命名

header

页头

main

主体

footer

页尾

nav

导航

sidebar

侧栏

container

容器

column

栏目

title

标签

menu

菜单

submenu

子菜单

*列举常用命名,大家根据自身项目及团队的规则命名

耐心学习基础知识,基础是盖房的根基,必须打结实。

如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。

每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!