WEB安全之DIV CSS基础（一）：样式类型和样式选泽、背景和边框

1、DIV和CSS样式

• 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]
  CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

• DIV是html的一个标签，css是一个样式表

• 网页中的div与样式表
  

• head顶部引入的样式表
  

• 去掉样式表，网页外观就发生了改变

• 样式表写在外面，然后再用link引用过来，写在内部对搜索引擎不太友好

2、样式表类型

2.1.嵌入样式表

• 在head里面的，用style书写的
• 使用.引入
• 创建一个div里面有demo1的文字，调整样式
  
  
• 将宽和高去掉
  
  

2.2.外部样式

• link导入的

<link rel="stylesheet" type="text/css" href="mystyle.css">
<div style:"background-colorred"></div>

外部里面引入css文件

• 新建css文件
  
• 在head里面用快捷方式做一个引入
  
• 不添加的时候是最原本的黑白，无边框
  

• 默认引用过来是
  

在外部里面再引入外部的

2.3内联样式

• 在标签内部来修饰标签的

div style:"background-color.red"></div>

3、注释

/**/注释内容

4、样式选择器

• 元素选择器 div(属性:值)
  ID选择器 #id(属性:体)
  class选择器 .类名{属性:值)
  子选择器 元数空格元素{属性:值)
  后代达择器 元数>元数(属性:值)
  属性选择器元素[属性]0
  通配符选择器 *{属性:值)
  群组选择器

类选择器

• 
• demo1就是一个类选择器，class是一个属性，值在样式表里面修改
• 
  

id选择器

• id选择器不能重复，类选择器可以重复
• id选择器如何改变它里面的值呢 先用#号选择它
  
  
  
  

元素选择器

• 把所有div的边框颜色进行设置
  
  
  
  

通配符选择器

• 通配符选择器可以选择所有元素
• 浏览器内部一般有默认边距
• 把所有元素和标签的所有外边距和内边距设为0px
  
  

群组选择器

• 为两个选择器设置即为群组选择器的意思
• 作用是把一些重复的值写到一起
  
  

子选择器

• 将demo2的p标签段落的颜色改变（默认是黑色）
• 
  
  
  
• 使用>号也可以达到这种效果
  
  

5、背景

• background-color 规定要使用的背景颜色。
  background-position 规定背景图像的位置。
  background-size 规定背景图片的尺寸。
  background-repeat 规定如何重复背景图像。
  background-origin 规定背景图片的定位区域。
  background-clip 规定背景的绘制区域。
  repeat 默认。背景图像将在垂直方向和水平方向重复。
  repeat-x 背景图像将在水平方向重复。
  repeat-y 背景图像将在垂直方向重复。
  no-repeat 背景图像将仅显示一次。
  inherit 规定应该从父元素继承 background-repeat 属性的设置。
  background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
  background-image 规定要使用的背景图像。

• 两种方式都可以把背景变为红色

• 
  

• 也可以把背景设置成一张图片，会自动铺满屏幕
  
  

• 不让其铺满

• no-repeat
  
  

• 纵向铺满，repeat-y
  
  

• 横向铺满，repeat-x
  
  

• 背景是否随着内容滚动

• 不让其铺满，横向，背景固定，设置滚动条（用的多）
  
  

• 默认滚动，随内容滚动而滚动，scroll
  
  

• 简写（用的多）
  
  

• inherit 规定应该从父元素继承 background 属性的设置。
  left top
  left center
  left bottom
  right top
  right center
  right bottom
  center top
  center center
  center bottom

• 背景图片的滚动

• 背景图片是否随着内容的滚动而滚动由background-attachment设置

• background-attachment:fixed; 固定，不随内容的滚动而滚动

• background-attachment:scroll; 滚动，随内容的滚动而滚动

6、边框

边框颜色

• border-color:#000

边框宽度

• border-width:1px;

• 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值

• 设置边框
  

• 再设置一个demo7，让其与demo6的间隔相差10px，margin-top
  
  

• 给四个边框四个不同效果
  
  

• 简写