web前端知识（二）

web前端知识（二）

CSS层叠样式表

概念

• css 是（Cascading Style sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。现阶段CSS已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一，现阶段CSS最新标准CSS3.0

作用

• css将从基础开始建设直到全面代替传统web设计方法
• 提高页面浏览速度，使用CSS,比传统的web设计方法至少节约50%以上的文件尺寸
• 缩短改版时间，降低维护费用，只需要修改几个CSS文件就可以重新设计一个有成千上百页面的站点。
• 强大的字体控制和排版能力。
• 容易编写
• 一次设计，随处发布。不仅仅永固web浏览器，也可以发布在其他设备上
• 更好的控制页面布局，结合css和div元素，可以比传统的使用table元素更好的控制页面布局。
• 实现表现和结构，内容相分离，将页面的表现形式部分玻璃出来放在独立的样式文件中，减少未来网页无效的可能。
• 更方便搜索引擎的搜索。

语法规则

将CSS引入HTML的方式有三种：

• 1、外部样式表 格式: < link rel="stylesheet" href=" 链接地址" />
• 2、嵌入样式表 格式：<style type="text/css">选择器</style>
• 3、内联样式表 格式：在元素中添加style属性<p style=""></p>
• 4、导入样式表 格式:<style type="text/css">@import"my.css"</style>

css选择器

一个css样式语句：

选择器：用于规则所应用的元素，规则本身则指定格式。
分类：

• 简单选择器

  • 元素选择器：以HTML标签元素作为选择器类型 格式：元素{属性：值}
  • 类选择器：选择标签中的class属性作为选择器类性 格式：.类名{属性：值}
  • ID选择器 ：选择标签元素中的id属性作为选择器类性 格式：#id名{属性：值},注意id值是唯一的，不能重复。
  • 伪类和伪元素选择器。伪类和伪元素是特殊的类和元素，能自动地被支持css的浏览器所识别 ，伪元素是值元素的一部分，如段落额第一个字母

    /*选择器:伪类 { 属性: 值;}*/
    a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
    a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
    a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
    a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */ 
    
    /*选择器:伪元素 { 属性:值;}*/
    p:first-letter {font-size:2em}  /* p元素中内容首字母放大 */
    
    

• 复合选择器 :就是两个或多个基本选择器，通过不同的方式连接而成

  • 交集选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是元素选择器，第二个必须是类选择器或者ID选择器。同时满足两个选择器的条件，两个选择器之间不能有空格，必须连续书写。

  • 并集选择器：是多个选择器通过逗号连接而成的。在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明风格相同的CSS选择器。它的结果是同时选中各个基本选择器所选择的范围，任何形式的选择器都可以作为并集选择器的一部分。

  • 后代选择器：如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记，两者之间使用空格分隔。注意：后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的”各级后代“。

优先级

层次优先级从小到大依次为：外部样式表、嵌入式样式表、内联样式。
不同选择器之间的优先级别从小到大依次为：元素选择器、类别选择器、ID选择器。

css的属性和值

通过选择器找到你要美化的元素后，可以通过设置属性来设定具体要美化哪一方面，值来表示你要美化成什么样子。
如：

div{
	background-color:red;  //背景颜色为红色
}

字体设置（部分属性）：
font-family：“黑体”；表示设置字体类型
font-size：12px; 表示字体大小12像素
color:red;字体颜色为红色
font-style:italic；字体为斜体
font-weight:blod;字体加粗
font-transfrom:capitalize；单词首字母大写
text-decoration: underline; 设置下划线

段落样式设置：
text-indent:2em 首行缩进2个标准字符大小的距离
letter-spacing:1px;单词内部的字母间距
word-spacing:10px;单词之间的距离
line-height:控制行与行之间的距离
text-align：left;左对齐
background-color: red; 设置背景颜色
color:yellow; 前景色

设置背景样式:
background-image:url(“图片路径”);设置背景图片
background-repeat:no-repeat;图片不平铺 repeat-x(y)只沿x(y)方向平铺
background-position:right bottom 图片放在右下方
注：1.第一个值用于设定水平方向位置，可以选择left(左)、center(中)、right(右)。
2.第二个值用于设定垂直方向的位置，可以选择top(上)、center(中)、bottom(下)。
background-attachment:fixed；固定图片位置

图片缩放：

img{
	width:50%; /*相对宽度*/
	height:100px;/*绝对高度*/
}

长度单位：

• 相对类型：px像素，根据显示设备的分辨率；em以目前的高度为单位。
• 绝对类型：in(英寸)、 cm(厘米) 、mm(毫米)、 pt(点数) 、pc(印刷单位)。

控制鼠标指针：

设置列表样式：
list-style-type: 列表编号类型。
list-style-image:设定项目符号的图片样式。

边框设置：
一个边框分为四个方向，分别是left(左)、right(右)、top(上)、bottom(下)。可以为这四个方向的边框分别设置边框样式，比如：border-left-style、border-top-width。
边框有3个要素构成：

• border-width(粗细)：使用css中的长度单位
• border-color(颜色)
• border-style(线性)
  如：border:1px solid red，这个表示边框宽度为1像素，红色的实线。

圆角设置：
1、border-radius:30px 20px 15px 2px； （ 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 ）
2、border-radius:10px; （所有角都使用半径为10px的圆角 ）

CSS浮动

块级元素和内联元素：块级元素定义内容时时要换行的，而内嵌元素定义内容时不换行的。

• 常见的块级元素：div、blockquote、列表元素（dl,ol,ul）、fieldset、form、h1-h6、hr、p、pre、table等。
• 内嵌元素有：span、a、img、lable、所有的输入表单元素、iframe、object等

标准文档流：一个块级元素在水平方向会自动伸展，直到包含它的元素边界，而垂直方向和兄弟元素依次垂直排列，左右撑满。

浮动：在使用浮动（float）方式后,块级元素脱离标准文档流，会紧贴上个浮动的元素。

浮动方式：
float:left;左浮动
float:right；右浮动
float：clear；清楚浮动

盒子模型

标准的盒子模型：

IE盒子模型：

在CSS中，一个独立的盒子模型content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。

设置内边距（padding):
用于控制内容与边框之间的距离，padding属性可以设置1,2,3,4个属性值：

• 设置1个属性值时，表示上下左右4个padding均为该值。
• 设置2个属性值时，前者为上下padding的值，后者为左右padding的值。
• 设置3个属性值时，第1个位上padding的值，第2个为左右padding的值，第3个为下padding得值。
• 设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。

设置外边距（margin）:
用于控制元素与元素之间的距离，属性设置与padding一致。
注：当margin设为负数时，会使被设为负数的块向相反的方向移动，设置覆盖在另外的块上。

盒子的定位：
css中提供了position这个属性，可以帮助设计者对标签进行定位，更好完成网页的布局。position的属性有4个值：

• static；默认值 表示块保持在原本应该在的位置上，即该值没有任何移动效果。
• relative；相对定位 除了将position属性设置为relative之外，还需指定一定的偏移量，水平方向通过left或者right属性来指定，垂直方向通过top和bottom来指定；这四个属性只有当position属性设置为absolute、relative或fixed时才有效；使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置；使用相对定位的盒子扔在标准流中，它对父亲和兄弟盒子没有任何影响。
• absolute ；绝对定位 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位；绝对定位的元素从标准流中脱离，这意味着他们对其后的兄弟盒子定位将有影响，就好像这个盒子被拿走了，其他排在后面的盒子将填补前面的位置。
• fixed； 固定定位 它与绝对定位有些类似，区别在于定位的基准不是祖先元素，而是浏览器窗口或者其他显示设备的窗口。

z-index ：调整定位是重叠块的上下位置，它与名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的元素位于值小的上方；z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可设置各块之间的重叠高低关系，默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

盒子的display属性：display属性的block和inline两个值，一个代表块级显示，一个代表内嵌显示。

• 当块级元素转成内嵌元素时：display:inline;
• 内嵌元素转成块级元素时：display:block;
• 内嵌元素转成带宽高的内嵌元素：display:inline-block;
• 元素消失：display:none;表示该元素将被隐藏，此隐藏表示该元素彻底从页面上消失。Visibility 同样可以让元素在页面上隐藏，默认值为visible(元素显示)。通过设置值为hidden时，元素隐藏；display元素是直接从页面上消失，不占据空间，visibility则是元素只是视觉上隐藏，依然占据空间。