WEB安全 divcss基础

1.定义：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。

DIV是HTML的一个标签，DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

2.样式表类型：

<1>嵌入样式表（在head里面）

<2>外部样式表（link导入）

①第一种先创建一个css文件，命名为css，然后把demo1字体颜色，背景颜色，宽，高设置好，运用link引入外部文件css.css

运行出来和嵌入样式表的例子一样

②第二种是再第一种基础上再引入一个外部文件把css文件拖入到css文件夹里，同时新建一个名为g的css文件，在里面设置页面背景为粉色，再在css文件顶部引入@import url("g.css");   再在demo1修改href="css/css.css"（因为css.css被拖入到css文件夹中）即可。

 

运行：

<3>内联样式

在body里<div style="color: green; width: 100px; height: 100px; background: purple;">demo2</div>(求方便，直接在外部样式表基础上操作)

 运行：

3.样式选择器： 

元素选择器   div{属性:值}

ID选择器  #id{属性:值}

class选择器  .类名{属性:值}

子选择器    元数 空格 元素{属性:值}

后代选择器  元数 > 元数{属性:值}

属性选择器  元素[属性]{}

通配符选择器  *{属性:值}     （补：通配符“*”选择器选择所有元素，通配符“*”选择器也可以选择另一个元素内的所有元素）

群组选择器

4.背景：

规定要使用的背景颜色。

background-image 规定要使用的背景图像。

 使用图片当作背景，如果图片不够，将会垂直方向和水平方向重复拼接铺满整个页面。

 让图片不要重复，仅显示一次。

background-repeat:repeat-x; 背景图像将在水平方向重复。

background-repeat:repeat-y; 背景图像将在垂直方向重复。

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动

background-attachment: fixed;图片不随着内容滚动 （常用)

background-attachment: scroll;图片随着内容滚动

还有简写：background: url(img/2.jpg) no-repeat fixed;（用的多）

background-position 规定背景图像的位置。

background-size 规定背景图片的尺寸。

background-origin 规定背景图片的定位区域。

background-clip 规定背景的绘制区域。

inherit 规定应该从父元素继承 background 属性的设置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

5.边框：

简写：   border: 5px solid red;

margin- top：边框顶部离上一个边框的距离

边框宽度 border-width

边框颜色 border-color

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

上 右  下左

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

6.文字属性：

color:red; 文字颜色 

font-size:12px; 文字大小

font-weight:bold; 文字粗细(bold/normal)

font-family:"宋体"; 文字字体

font-variant:small-caps; 小写字母以大写字母显示

7.文本属性：

text-align:center; 文本对齐(right/left/center)

line-height:10px; 行间距(可通过它实现文本的垂直居中)

text-indent:20px; 首行缩进

text-decoration:none; 把文字自带的下划线去掉

文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线

letter-spacing: 10px; 字间距

 8.列表：

list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。

list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。

list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。

inherit 规定应该从父元素继承 list-style 属性的值

取值:disc 点| circle 圆圈| square 正方形| decimal 数字| decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99

lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...

upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...

lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...

lower-latin: 小写拉丁文，例如: a, b, c, ... z

upper-latin: 大写拉丁文，例如: A, B, C, ... Z

armenian: 亚美尼亚数字

georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...

lower-alpha: 小写拉丁文，例如: a, b, c, ... z

upper-alpha: 大写拉丁文，例如: A, B, C, ... Z

none: 无(取消所有的list样式)

注释掉的内容靠下一行的简写来实现，就是把导入图片设置成了它的小标签一样 

  

9.超链接：

a{text-decoration: none;}

a:link {color:red;} /* 未访问的链接 */

a:visited {color:blue;} /* 已访问的链接 */

a:hover {color:yellow;} /* 鼠标划过链接 */

a:active {color:pink;} /* 已选中的链接 */（指的是鼠标选中不放显示的颜色）

 10.盒子模型：

盒子模型的四组成部分：外边距（margin）、边框（border）、内边距（padding）、内容（content）。

 

 

11.border边框

操作之类的跟第五点的边框一样

常见的写法 border:1px solid red;  （简写)

单独属性:

border-widh:

border-style:

dotted（点状虚线)dashed（虚线）solid（实线）double（双实线）border-color(颜色)

12.margin padding:

 值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下 左右

padding:10px 10px 10px; 上 左右 下

padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）【注释内容】

单独属性：padding-top:

                  padding-right:

                  padding-bottom:

                  padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

 margin值：与padding相同，单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin:10px  上下左右都会腾出10px出来

margin:0px auto; 居中

13.float 脱离文档流浮动：

float:left;左浮动，当页面缩小时，也会遵循这一原则，如下图所示    float:right;右浮动

脱离文档流浮动：发现div4是从最上面开始为边框的

 这时候在.div4里添加clear:both;来清楚脱离文档流浮动，即会从div1,div2下面开始成立边框

 14.块级元素，行内元素：

块级元素：他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；

块级元素可以设置width、height属性；块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性。 

块级元素补充(block element）

address 地址|center 举中对齐块|div- 常用块级容易|dl 定义列表|form 交互表单 （只能用来容纳其它块元素）|h标签|hr 水平分隔线|ol 无需列表|ul有序列表|p 段落|pre 格式化文本

行内元素：行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；行内元素的width、height属性则无效；行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

 

行内元素补充：

a - 锚点|b - 粗体(不推荐)|br- 换行|code - 计算机代码(在引用源码的时候需要)|em - 强调|i - 斜体|img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）

当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}

input - 输入框|label - 表格标签|select - 项目选择|strong - 粗体强调|textarea - 多行文本输入框|u - 下划线|var - 定义变量

替换元素有如下：（和img一样的设置方法）

<img>、<input>、<textarea>、<select>

<object>都是替换元素，这些元素都没有实际的内容

块级元素，行内元素转换

display:none; 不显示（将其隐藏）

display:block;变成块级元素

display:inline; 变成行内元素

把demo11和demo12块级元素转化为行内元素，把ssss行内元素转化为块级元素

 display:inline-block;以块级元素样式展示，以行级元素样式排列

 

14.溢出：（当内容太多，超出边框）

 溢出处理：

overflow 属性规定当内容溢出元素框时发生的事情。

【visible 默认值。内容不会被修剪，会呈现在元素框之外。

inherit 规定应该从父元素继承 overflow 属性的值。】运行和没做过处理的一样

hidden 内容会被修剪，并且其余内容是不可见的。（常用）

overflow:scroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

overflow:auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。】

16.定位：

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

position: static;静态定位（不对它的位置进行改变，在哪里就在那里），默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。

position: fixed;固定定位（参照物--浏览器窗口）---做 弹窗广告用到。生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

position: relative;（相对定位 ）（参照物以他本身），生成相对定位的元素，相对于其正常位置进行定位。

 

position: absolute;（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

position: z-index;  z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。