1. English Word
- 内容：content
- 容器：container
- 导航：nav
- 侧栏：sidebar
- 广告：banner
- 菜单：menu
- 滚动条：scroll
- 椭圆：ellipse
- 省略：ellipsis 文本的时候使用text-overflow：ellipsis
- 多边形：polygon
- 灵活：flex
2. Selector
2.1 常用選擇器
-
元素/標籤选择器（Element Selector）：通过元素名称选择 HTML 元素
p { color: blue; } -
类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML元素
.highlight { background-color: yellow; } -
ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML元素
#runoob { width: 200px; } -
属性选择器（Attribute Selector）：通过元素的属性选择 HTML元素。属性选择器可以根据属性名和属性值进行选择
input[type="text"] { border: 1px solid gray; } -
后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML元素。后代选择器使用空格分隔元素名称。
注意是父元素内的所有元素.container img { border: 1px solid gray; } -
子元素选择器（Child Selector）：通过指定元素的直接子元素关系选择 HTML元素。子元素选择器使用
>符号分隔父元素和子元素。注意是父元素的直接子元素.container ul > li { border: 1px solid gray; }
2.2 All Selector
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 | 1 |
| #id | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有<p>元素 | 1 |
| element,element | div,p | 选择所有<div>元素和 <p> 元素 | 1 |
| element.class | p.hometown | 选择所有 class="hometown" 的 <p> 元素 | 1 |
| element element | div p | 选择<div>元素内的所有<p>元素 | 1 |
| element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 | 2 |
| element+element | div+p | 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 | 2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择 lang 属性等于 en，或者以 en- 为开头的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个<p>元素的第一个字母 | 1 |
| :first-line | p:first-line | 选择每一个<p>元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
| :before | p:before | 在每个<p>元素之前插入内容 | 2 |
| :after | p:after | 在每个<p>元素之后插入内容 | 2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有<p>元素 | 2 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| [attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [attribute*=value] | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
3. Style
菜鳥教程： www.runoob.com/cssref/css-…
3.1 文字居中
#第一種
h1 {
text-align: center;
}
#第二種
h1 {
margin: auto;
}
3.2 圖片居中
<div className='container'>
<img className='demo_img' src='https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800' />
</div>
#第一種
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container > img{
height: 450px;
width: 750px;
}
#第二種
.container {
display: grid;
place-items: center;
}
.container > img{
height: 450px;
width: 750px;
}
#第三種
.container {
position: relative;
}
.container > img{
position: absolute;
left: 50%;
transform: translate(-50%);
height: 450px;
width: 750px;
}
3.3 Border
3.4 圓角
3.5 Display
3.6 Position
3.7 權重
important >行内样式> id > class >标签>伪类>通配符
可以使用 !important 强制提升某个规则的权限
3.8 鼠標形狀
| 值 | 描述 |
|---|---|
| url |
需使用的自定义光标的 URL。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
3.9 圖片越界
圖片太大，超出父元素的範圍
img {
width: 100%;
height: 100%;
object-fit: cover;
}
3.10 Practice
刻後盾人頁面
<!DOCTYPE html>
<html>
<head>
<title>后盾人</title>
<link rel="stylesheet" href="./houdunren.css" type="text/css">
</head>
<body>
<header>
<div>
<ul>
<li>首页</li>
<li>Document</li>
<li>community</li>
<li>incloud</li>
<li>售后</li>
</ul>
</div>
<div>
<button>login</button>
<button>logout</button>
</div>
</header>
<main>
<article class="list">
<p>数据元素样式</p>
<ul>
<li>使用css</li>
<li>表格table</li>
<li>表格颜色与背景</li>
<li>数据表格设计</li>
<li>多种形式定义符号</li>
</ul>
</article>
<aside class="community">
<div class="up">
<p>社区小铁</p>
<hr>
<p>后盾人的精神食粮，主张友好，分享，自由的技术交流施区</p>
<hr>
<span>
<button>发起交谈</button>
<button>签到打卡</button>
</span>
</div>
<div class="down">
<p>最新课程</p>
<ul>
<li>数据元素样式</li>
<li>背景和渐变</li>
<li>盒子模型详解</li>
<li>搞定css权重</li>
</ul>
</div>
</aside>
</main>
<footer>
<div>我们的使命：传播互联网前沿技术，帮助更多的人实现理想</div>
<hr>
<div>
<p>Copyright © 2010-2020 houdunren.com All Rights Reserved 京ICP备12048441号-3</p>
<pre> 18611400072 2300071698@qq.com</pre>
<p>编码: 向军大叔 / 晚八点直播</p>
</div>
</footer>
</body>
</html>
Css样式
body {
margin: 10px auto;
border: solid 1px gray;
padding: 10px;
overflow: scroll;
width: 1200px;
}
header {
height: 110px;
border-bottom: green solid 5px;
div {
&:nth-of-type(1) {
margin: 13px auto;
width: 900px;
height: 80px;
float: left;
ul>li {
font-family: 'Courier New', Courier, monospace;
font-size: 30px;
margin-top: auto ;
margin-left: 30px;
display: inline-block;
}
ul>li:hover {
color: red;
}
}
&:nth-of-type(2) {
margin: 13px auto;
width: 280px;
height: 80px;
float: right;
button {
margin-top: 20px;
width: 120px;
height: 40px;
&:nth-of-type(1) {
background: green;
border-style: none;
border-radius: 15px;
}
&:nth-of-type(2) {
margin-left: 20px;
border-style: none;
background: hotpink;
border-radius:15px;
}
}
button:hover {
background: red;
}
}
}
}
main {
margin-top: 30px;
border: 1px yellow;
overflow: hidden;
box-sizing: border-box;
background:goldenrod;
padding: 15px 5px ;
article.list {
float: left;
height: 300px;
width: 950px;
background: cadetblue;
P {
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
ul>li {
border-bottom: olive 1px solid;
margin-bottom: 10px;
}
ul>li:hover {
background: green;
}
}
aside.community {
float: right;
height: 300px;
width: 200px;
div.up {
box-sizing: border-box;
font-size: 10px;
border: gray solid 2px;
background: honeydew;
border-radius: 12px;
span {
margin: 5px 25px;
button {
margin: 3px;
font-size: 5px;
}
button:active {
background: hotpink;
}
button:hover {
background: yellow;
}
}
}
div.down{
font-size: 10px;
margin-top: 10px;
border: gray 2px solid;
background: tomato;
border-radius: 12px;
}
}
}
footer {
margin-top: 20px;
div {
text-align: center;
}
hr {
width: 65%;
}
}
4. Plugin
4.1 格式化代碼
安裝插件後，執行 Shift + Alt + F
