这是我参与「第四届青训营 」笔记创作活动的的第2天
内容
- CSS
Cascading Style Sheets 层叠样式表
作用
1. 设置字体和颜色
2. 设置位置和大小
3. 添加动画效果
工作方式
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，但是下面的步骤基本都会出现:
1. 浏览器载入HTML文件（比如从网络上获取）。
2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
3. 接着，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。
4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
6. 网页展示在屏幕上（这一步被称为着色）。
选择器
通配符选择器
<style>
* {
color: red;
font-size: 20px;
}
</style>
<body>
<h1>This is heading</h1>
<p>this is some paragraph.</p>
</body>
标签选择器
<style>
p {
color: red;
}
</style>
<body>
<p>pppppppppppp</p>
<p>这个p标签是什么颜色</p>
<p>2222</p>
</body>
类选择器
<style>
.red {
color: red;
}
.size {
font-size: 66px;
}
</style>
<body>
<p class="red size">111</p>
<p>222</p>
<div class="red">这个标签文字也要变红</div>
</body>
id选择器
<style>
#blue {
color: blue;
}
</style>
<body>
<div id="blue">这个div文字是蓝色的</div>
<p id="blue">111</p>
</body>
属性选择器
<style>
[title]
{
color:blue;
}
</style>
<body>
<h2>适用于:</h2>
<h1 title="Hello world">你好世界</h1>
<a title="w3cschool" href="http://w3cschool.cn">w3cschool</a>
<hr>
<h2>不适用于:</h2>
<p>你好!</p>
</body>
伪类选择器
<style>
h3:hover
{
color: cyan;font-size: 25px;
}
</style>
<body>
<h2>伪类选择器</h2>
<h3>静态伪类选择</h3>
<h3>动态伪类选择</h3>
<h3>其他伪类选择</h3>
</body>
后代选择器
<style>
.c span
{
color: skyblue;
}
</style>
<body>
<div>
<span>c的子代</span>
<div>
<span>c的后代</span>
<span>c的兄弟</span>
</body>
样式
line-height 行间距
letter-spacing 字母间距
word-spacing 单词间距
font-size 字母大小
font-family 字体
一些奇奇怪怪的扩展
SQL注入
├── DataBase
├── 关系型
│ ├── MySQL
│ ├── Oracle
│ ├── PostgreSQL
│ ├── SQL
│ └── Server
├── 非关系型
│ ├── MongoDB
│ └── Redis
开启远程连接命令行
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '密码' WITH GRANT OPTION;
