您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页div+css+盒子模型

div+css+盒子模型

来源:化拓教育网
1.table布局的缺点 显示样式和数据是绑定在一起的 布局的灵活度不高 一个页面可能有大量元素,造成代码冗余 增加带宽 搜索引擎不容易搜索到 优点: 理解比较简单 浏览器兼容性相对性好 在显示数据方面依旧有大的作为

2.div+css 一种比较流行的网页布局技术 Div 存放需要显示的数据的容器;(为html文档中的大块内容提供结构和背景的元素) Css (重叠样式表)指定数据显示的样式

3.css核心内容 标准流 盒子模型 浮动 定位

4.引入css

5.用于存放小块元素

用于存放大的元素

6.css滤镜技术 css的内嵌

7.css中常用的选择器

类选择器(class选择器) id选择器

Html元素选择器 通配符选择器

8.类选择器

.类选择器{

属性值1.:属性名; 属性值2.:属性名; … } 9.id选择器

#id选择器名{

属性值1:属性名; 属性值2:属性名; … }

10.html元素选择器 某个html元素{ 属性值:属性名; }

超链接案例css文件代码 A:link { Color:black; Font-size:24px

Text-decoration:none; }

A:hover{ Color:blue; Font-size:40px;

Text-decoration:underline; }

A:visited{ Color:red; }

多段落显示  Css p.cls1{ color:blue; font-size:30px; }

p.cls2{ color:red; font-size:20px; }

 Html

这是一段内容

这是另一段格式不同的内容

11.通配符选择器(可以用到所有html 文件中但是其优先级最低) 边距设置 *{

Margin-top:0px; Margin-left:0px; } Margin的多种设置

margin:#px; 上右下左(顺时针旋转)的边距

margin:#px #px;第一个值表示上下边距;第二个表示左右边距; margin:#px #px #px;

内外边距清零 *{

Margin:0px; (内边距) Padding:0px; (外边距) }

12.选择器优先级

id选择器>class选择器>html选择器>通配符选择器

13.父子选择器(多种选择器的组合使用) Html < span id=”id1”>这是一条重要的信息 Css #id1{

Color:biue; Font-style:bold; Font-size:50px; }

#idspan{ Color:red;

Font-style:italic; }

1.父子选择器可以为多级

2.父子选择器有严格的层级关系

3.父子选择器不局限于什么类型的选择器

案例:

#id span span .s1 #id span Div .s1 #id span

14.一个元素可以同时用id选择器和class选择器

 Html

使用多个选择器 使用一个选择器  Css .s1{

Color:blue;

Font-weight:bold; } #id1{ Color:red;

Font-style:italic; }

15.一个元素最多有一个id选择器,但可以有多个类选择器;当多个类选择器之间发生冲突时,以css文件中最后修改的属性为准。 Html

一个class 多个class Css .s1{

Color:red

Font-style:italic; } .s2{ Font-weight:bold;

}

16.我们可以把多个css文件中相同的部分提取出来,可以减少代码的冗余度。 Css .ad_1{

height:180px; } .ad_2{ height:260px;

} .ad_1,.ad_2{ Background-color: #9933CC Width:100px; margin:5px 0 0 6px

}

17.行内元素: 块元素

行内元素只占据其所需的宽度,不占一整行; 块内元素不管其内容多少,都占据一整行。

有一些元素对行内元素不生效,比如:margin,left,right,width,height等,建议尽可能的使用块元素进行定位。(与浏览器的版本和类别有关)

18.行内元素和块元素之间的相互转换 .s1{

Display:block 表示使用块元素显示 } .s2{

Display:inline; 表示使用行内元素使用}

19. @inport url(‘某个被引入的css文件’)

20.标准流和非标准流

流:html在网页中的显示顺序

标准流:在html中,写在前面的元素先显示,写在后面的元素后显示。

非标准流:在html文件中,当某个元素脱离了标准流,那么它就处于非标准流。

21.盒子模型

Margin :外边距 border :边框 padding :内边距 content:内容

22.一般编码时优先使用class选择器;而id选择器则一般用于最后或某种特殊情况或要求下。

23.utf-8引入css

(注意:保存文件的编码也应该是utf-8)

24.背景图片有时比图片显示节省带宽(repeat重复)

25.关键词注释:

Auto:居中Solid:实线

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务