HTML与CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/luoshui0428/article/details/47274825

HTML知识点总结

CSS样式的优点

1.实现内容和样式的分离,利于团队开发。

   2.实现复用，提高开发效率。

   3.实现页面的精确控制。

   4.利于搜索引擎的搜索。
选择器的分类

1.标签选择器

语法：标签名{   属性名1：属性值1;

                  属性名2：属性值2;

                  .......

}

2.类选择器

语法：   .类名{属性名1：属性值1;

             属性名2：属性值2;

               ......

}

3.ID选择器

语法：   #ID表示名{ 属性名1：属性值1;

                属性名2：属性值2;

               ......

}

注:内部样式>ID选择器>类选择器>标签选择器

行内样式表>内部样式表>外部样式表、
文本及字体属性

常用的文本属性：

line-height ：设置行高

   Text-align ：对齐方式（left:居左,right:居右,center:居中）

   Letter-spacing：设置字间距

   Text-decoration：文本修饰,underline（下划线）、none

   Whit-space：规定如何处理空白,例如规定是否换行。

取值：nowrap:不换行)

- 常用的字体属性：
  
  font：在一个声明中设置字体所有样式,
  
  例如：font:bold 12px 宋体)
  
  Font-family：定义字体类型例如：Font-family：宋体
  
     Font-size：定义字体大小
  
     Font-weight：定义载体粗细)
背景属性
- 常用的背景属性
  
  Background：在一个声明中设置所有背景属性
  
  (background：#ccc url(images/bd.jpg) repeat-x 20px -100px)
  
  Background-color：设置背景颜色
  
  Background-image：设置背景图片
  
  Background-repeat：设置背景的平铺
  
  Background-position：设置背景出现的初始位置

Background-repeat属性对应的取值

Repeat：纵向平铺，不填时的默认

Repeat-x：横向平铺)

Repeat-y：纵向平铺

No-repeat：背景图片不重复平铺

列表属性：list-style：

None：去掉修饰号

Disc：实心圆

Circle：空心圆

Square：实心正方形

Decimal：数字
盒子模型

盒子模型的常用属性：

边框(Border)、内边距(padding)、外边距(margin)、上(top)、下 (bottom)、左(left)、右(right)、高(htight)、宽(width)。

外边距(margin)的属性：

类别            属性       含义          举例

四个方向       Margin-top       上外边距             margin-top:1px

                        Margin-right    右外边距             margin-right:2px

                                               Margin-bottom 下外边距       margin-bottom:2px

             Margin-left     左外边距       margin-left:1px

缩写形式    Margin      统一设置4个边距 1px2px 3px 4px

                                                （上右下左）

Border属性如下:

类别

属性

含义

举例

修饰属性

Boder-color

边框颜色

border-color:#FF00FF

Border-width

边框宽度

border-width:2px

Border-style

边框样式常用的

值如下

None:默认无边框

Solid:实线

Dashed:虚线

Border-style:solid

Border-top

上边框

Border-top:2px

Border-right

右边框

Border-right:5px

Border-bottom

下边框

Border-bottom:5p

X dotted

Border-left

左边框

Border-left:4px

缩写形式

border

在一个声明中统

一设置四个方向

的边框属性

Border:1px solid

red

Border-left

在一个声明中设

置左边框的属性

Border-left:1px

Solid red

内边距Padding属性如下:

类别

属性

含义

举例

四个方向

Padding-top

内容与上边框的

之间的距离

Padding-top:2px

Padding-right

内容与右边框的

之间的距离

Padding-right:3px

Padding-bottom

内容与下边框之

间的距离

Padding-bottom:1

Padding-left

内容与左边框之

间的距离

Padding-left:5px

缩写形式

padding

在一个声明中统

一设置四个方向

的填充属性

Padding:2px 2px

2px 2px

浮动属性：

常见的浮动设置

                             Float:left                                                               设置元素左浮动

                             Float:right                                                                  设置元素右浮动

                             Float:none                                                                  默认值，不浮动

清除浮动(clear):

                       Clear:left                                                                   在左侧不允许有浮动元素

                       Clear:right                                                                        在右侧不允许有浮动元素

                       Clear:both                                                                        在左右两侧不允许有浮动元素

                       Clear:none                                                                       默认值,允许两侧都有浮动元素

超链接伪类

伪类

示例

含义

应用场景

A:link

a:link{color:#999

}

未单击访问时的

超链接样式

常用，超链接主

样式

A;visited

A:visited{color:#

333}

单击访问后的超

链接样式

需区分是否已

被访问

A:hover

A:hover{color:#

Ff7300}

鼠标悬浮其上的

超链接样式

常用，实现动态

效果

A:active

A:active{color:#9

99}

鼠标单击未释放

的超链接样式

少用，一般与

Link一致

多选器的常用符号及组合:

符号

中文

示例

含义

空格

Div ul{list-style:

None}

元素样式

逗号

Div,ul{text-align:

Center}

<div>和<ul>元素

采用相同样式

Id标识符

#nav{width:100%
}

Id为nav的元素

样式

类标识符

.pic{background:

url(bg.gif)}

类名为pic的元素

样式

冒号

A:hover{#ff0}

<a>标签的hover

伪类样式

li.

标签+类

li.pic{width:24px

类名为pic的<li>

标签样式

Div #

标签+id

Div#nav{text-alig
n:center}

Id为nav的<div>

标签样式

Id+空格+类

#nav .prc{border:

1px}

Id为nav元素内

的pic类样式

#.,

Id+空格+逗号

#nav .prc,#nav .te

Xt {height:24px}

Id为nav元素内

的pic和text类

都采用相同样式

背景透明效果

设置背景层的颜色，通过滤镜代码“filterr:alpha(opacity=50)”,设置背景为半透明。

注：由于此代码只适用于IE浏览器，因此还需通过代码“opacity：0.5；”设置背景的半透明来兼容其他的浏览器。
相对定位和绝对定位
- 相对定位（参照原来位置）
  
  Position：relative；
  
  top：10px；left：20px；
- 绝对定位（参照父容器位置）
  
  Position：absolute；
  
  top：200px；left：150px；
叠放次序
- 语法：z-index：num
- num默认为1，值越大越靠前。
Overflow
- Overflow与a:hover伪类组合，实现二级菜单的显示或隐藏。
- Overflow与<a>标签的锚点组合，实现类似框架窗口的关联效果。
- 采用“overflow：hidden”隐藏溢出容器尺寸的内容，隐藏后不占页面空间。
网站开发流程
- 网站开发流程一般包括：需求分析，网站制作，测试网页，发布网站几个环节。
- 制作网页前一般需要使用DW工具搭建站点的目录结构。
测试兼容性的方法
- 使用DW验证标签是否符合W3C相关规范以及浏览器兼容问题
- 使用FireFox验证是否符合W3C相关规范
- 发送网址到W3C官方网站验证是否符合W3C相关规范。
解决浏览器兼容性问题的两种方法：