用于指定css样式作用的html对象,Html/Css(新手入门第二篇)(示例代码)

一、在实际工作中，都是一个团队在做项目，不是一个人在工作。多人协作，就是每个团队都有自己

的命名习惯。

1、css选择符命名，规范。

2、都有命名规范文档。

二、css选择符作用：指定css样式所作用对象(范围)

1、标签选择符：针对html标签

2、id选择符：针对页面中只出现一次的内容，id

3、类选择符：针对某些元素，相同的样式，重复样式

*****默认情况下某些html元素本身有自己的默认值。

4、控制所有元素----使用通配符----*

通配选择符：*{属性：值}，用于定义所有html元素

***** *的作用范围很广，但是它的效率很低。慎用

*{margin：0；pandding：0；}//重置所有元素的外边距和内边距为零

5、选择符的嵌套使用----包含选择符

前端开发的极限----就是代码非常精简。

6、如果多个选择符会有一些相同的样式，这个时候我们就可以把这些选择符组成一个组

选择符1，选择符2，......{属性：值}

*****css选择符就是表示你将把你定义的样式用给谁。

/*下面选择符，表示，这些选择符分为一组，他们都有相同的样式*/

body,ul,ol,li,p,hi,h2,h3,h4,h5,h6,form,fieldset,table,top a,.top,.top a,.top a:visited

/*表示针对类名为top里面的a*/

.top a,.top a:visited

三、css盒子模型

****一个盒子是由以下几部分构成的：

1、盒子里的内容 content

2、盒子的边框 border

3、盒子的边框与内容之间的距离，称为填充--padding，内边距(内补丁)

4、多个盒子存在，盒子与盒子之间的距离，称为边界--margin，外边距(外补丁)

*****就是盒子所在的实际宽度为例=左右边界+左右边框+左右内填充+内容宽度

*****css盒子的相关属性

【1】、内容属性：内容本身的宽=width，内容本身的高=height

【2】、内填充属性：内容与边界之间的距离 padding

*****在定义盒子的宽度时要考虑到内填充，变宽，边界的存在。

如果增加了内填充了，整个盒子宽度值要再减去你增加的内填充值。(css3中可以用box-

sizing:border-box;来令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

)

小盒子的上面=20 右面30 下面50 左面100 外边界

margin：20 30 50 100；

margin-top：

margin-right：

margin-bottom：

margin-left：

*****将来在使用外边距要注意浏览器的兼容性。

*****除了值为0的情况下，所有的非零的值，后面都要加单位。

*****我们需要将所有浏览器的默认内外边距都从零开始算。

在实际工作，不要用这个*(margin：0；padding：0)，效率最低。

所以我们是用到了哪些元素就把哪些元素的默认值归零。

css的属性，虽然有继承的特点但是并不是所有的属性都有继承。

css布局主要是通过盒子模型来实现--w3c将网页内容放置在一些盒子中，对这个盒子的一些属性进行

控制。

内容：width height

内填充：padding

外框：border

外边界：margin

关于列表的属性介绍：--存在兼容性问题

list-style：列表的图片

语法：

list-style：list-style-image || list-style-position || list-style-type

列表的样式：列表的图片 列表符号位置 列表的样式

list-style-none 不要列表的符号。

边框属性说明：

css语法：

border：border-width||border-style||border-color

根据语法，推理出它的使用方式

如果只写border，则后面要跟着的是三个不同的子元素，第一个：粗细，第二个：样式，第三个：颜

色

边框样式：粗细为两个像素 实线 蓝色

border：2px solid blue

*****css小技巧：

【1】、让盒子水平居中：将对象的左右边界设置为auto；

【2】、让盒子中的内容垂直居中：设置行高(line-height)=盒子的高度，但是不要有换行。

【3】、我们在调试的时候，可以适当加背景颜色。

*****html元素的分类：块与内联

背景图片默认情况下是进行水平与垂直方向上的平铺。

默认背景的图片在元素的左上角显示。

背景图片的依附方式：固定的定义是将图片固定在屏幕(可视区域)的某个位置。

兼容性 IE6只有html与body这两个元素支持这个属性

让你显得专业一点的技巧：翻转效果：其实思路就是准备两张大小相同，内容不同的图片，正常情况

下显示一张，鼠标进过的时候再显示另一张。(css3中常用transform属性来定义图片的翻转效果)

伪类，表示一种状态

：link

css精灵技巧：主要是为了减少http请求【css3中常用字体图标来替代传统的小图标(未来趋势)】

浏览器--服务器(交流)(例：购物超市--结账时候。)