CSS

（引入）样式一般在 <head> 中。

样式位置

行内样式

写在标签 style 中， 名:值; 。（优先级最高）

1
<h1 style="color: pink; font-size: 25px;">CSS STYLE LEARNING</h1>

样式简单才使用。

内部样式

<style>...</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
h1{
    color: pink;
    font-size: 40px;
}

h2{
    color: blue;
    font-size: 25px;
}

p{
    color: red;
    font-size: 10px;
}

img{
    width: 200px;
}
</style>
1
2
3
4
<!-- 内部样式 -->
<h2>Let us start</h2>
<p>another style</p>
<img src="../html/star.jpg" alt="star">

外部样式

引入外部样式， 更改 href="url" （优先级=内部样式，样式会覆盖）

1
<link rel="stylesheet" href="style.css">

选择器

通配选择器

选择所有元素 *{} 。

1
2
3
* {
    color: red;
}

元素选择器

元素{} 统一设置样式。

1
2
3
4
h1{
    color: pink;
    font-size: 40px;
}

类选择器

.name{} ，class="name"

1
2
3
4
5
6
7
8
9
.fname{
    color: red;
}
.sname{
    color: green;
}
.tname{
    color: blue;
}
1
2
3
4
<h2 class="fname">Let us start</h2>
<h2 class="sname">inner style</h2>
<h2 class="tname">outter style</h2>
<h2 class="fname">extern style</h2>

ID选择器

#name{} 

1
2
3
4
5
6
7
8
9
#fname{
    color: red;
}
#sname{
    color: green;
}
#tname{
    color: blue;
}

可与 class 一起使用， ID 最好是唯一使用的。

1
2
3
<h2 id="fname">Let us start</h2>
<h2 id="sname">inner style</h2>
<h2 id="tname">outter style</h2>

交集选择器

元素.类名{}

1
2
3
p.fname{
    color: pink;
}

给元素为 <p> 且类名为 fname 。

1
2
<p class="fname">alice</p>
<p class="fname">bob</p>

并集选择器

选择器1,选择器2，...{}

1
2
3
4
5
6
7
.fname,
.sname,
.tname {
    font-size: 40px;
    background-color: black;
    width: 260px;
}

后代选择器

选择器 后代选择器{}

1
2
3
4
5
6
7
8
9
10
11
ul li {
    color: pink;
}

ol li {
    color: rgb(223, 25, 25);
}

.name div {
    color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>
<ol>
    <li>ol1</li>
    <li>ol2</li>
    <li>ol3</li>
</ol>

<h2 class="name">
    <div>class sub</div>
</h2>

属性选择器

[属性]{}

[属性="value"]{}

1
2
3
[title] {
    color: red;
}
1
2
<div title="atui"> test1 </div>
<div title="atui"> test2 </div>

伪类

动态伪类

选择器:状态{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a:link { /* 超链接独有 */
    color: orange;
}
a:visited { /* 超链接独有 */
    color: gray;
}
a:hover { 
    color: skyblue;
}
a:active {
    color: green;
}
p:hover {
    color: brown;
}
p:active {
    color: pink;
}

link 表示未访问。

visited 表示已经访问。

hover 表示鼠标悬停在这上。

active 表示鼠标正在点击。（顺序一般这样）。

1
2
3
<a href="https://www.bilibili.com/anime/">anime</a>
<a href="https://www.bilibili.com/guochuang/">guochuang</a>
<p>test active</p>

focus 可输入聚焦点击时才有。

1
2
3
4
input:focus {
    color: lightblue; /* 改变光标颜色 */
    background-color: gold; /* 背景颜色 */
}
1
<input type="text" name="username">

结构伪类

:first-child 伪类来选择父元素的第一个子元素。

:nth-of-type(n) 同类型的第几个元素。

否定伪类

:not(selector) 表示除了 selector。

目标伪类

:target 当锚点指向时。

1
2
3
p:target {
    color: pink;
}
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
<a href="#i1">to 1</a>
<br>
<a href="#i2">to 2</a>
<br>
<a href="#i3">to 3</a>
<br>
<a href="#i4">to 4</a>
<br>
<a href="#i5">to 5</a>
<br>
<a href="#i6">to 6</a>
<br>

<P id="i1">1</P>
<br>

<P id="i2">2</P>
<br>

<P id="i3">3</P>
<br>

<P id="i4">4</P>
<br>

<P id="i5">5</P>
<br>

<P id="i6">6</P>
<br>

伪元素

改变输入框提示的样式。

::placeholder

1
2
3
input::placeholder {
    color: pink;
}
1
<input type="text" placeholder="username">

改变鼠标选中元素的样式。

::selection

1
2
3
div::selection {
    color: orange;
}
1
<div>selection</div>

在某元素前创建子元素。

::before

在某元素后创建子元素。

::after

属性

颜色

rgb(x, y, z)

rgba(x, y, z, k) k 表示透明度[0, 1]。

字体

一般情况字体都要明确大小。

可为 body 配置字体。

1
2
3
body {
    font-size: 16px;
}

未配置字体的会默认继承（优先级最低）祖先的某些（包含字体）样式。

某些需要单独改的单独写样式即可。

更改字体族。

优先使用前面的，如果没有就使用后面的。

1
font-family: "Fira Code", "宋体";

字体风格。

italic 斜体。

normal 正常。

1
font-style: italic;

字体粗细。

bold 粗体。

narmal 正常。

lighter 细体。

1
2
font-weight: bold;
font-weight: lighter;

文本

颜色。

color

1
color: pink;

字间距。

letter-spacing

1
letter-spacing: 20px;

词间距。

word-spacing

1
word-spacing: 50px;

文本修饰。

text-decoration

underline 下划线。

line-through 中线。

overline 上划线。

none 无。

1
text-decoration: underline;

线种类

dotted 点线。

wavy 波浪线。

还可以选线的颜色。

1
text-decoration: line-through dotted red;

缩进

text-indent

1
text-indent: 50px;

文本对齐方式

text-align

left center right

1
text-align: center;

行高

line-height

1
2
line-height: 40px;
line-height: 1.5; 表示是字体大小的 1.5 倍

列表

list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

list-style-position 属性指定标记框在主体块框中的位置。

outside

标记盒在主块盒的外面。

inside

标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。

list-style-image 属性用来指定一个能用来作为列表元素标记的图片。

表格

border-width、border-style、border-color （不是独有）

一起写。

1
2
3
4
5
6
7
table {
    border: 2px black solid;
}

td, th {
    border: 2px blue solid;
}

border-spacing 单元格之间的间距。

1
border-spacing: 1px;

border-collapse 合并相邻的边框。

1
border-collapse: collapse;

empty-cells 空单元格处理

1
empty-cells: hide;

背景

background-image 背景图片。

background-repeat 背景重复方式。

background-position 背景图片位置。

1
2
3
4
background-color: pink;
background-image: url("favicon.ico");
background-repeat: no-repeat;
background-position: center top;

鼠标

cursor

1
cursor: url(hand.cur), pointer;

长度单位

em 相对 font-size 的大小。

rem 相对根 font-size 的大小。

% 相对父元素的大小。

元素显示模式

display

1
display: inline-block;
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
/* 预组合值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* 生成盒子 */
display: none;
display: contents;

/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;

隐藏，但占位。

visibility

1
visibility: hidden;

盒模型

content

子元素都在父元素的内容区内。

min-width

min-height

padding

1
padding: 20px 0px 20px 0px;

border

1
2
3
border: 10px solid orange;
border-color: orange;
border-left-color: gray;

margin

1
margin: 20px 0px 20px 0px;

内容溢出

在容器上加属性。

1
2
3
4
overflow: hidden;
overflow: visible; 直接超出
overflow: scroll; 给滚动条
overflow: auto; 自动

浮动

float

1
2
3
4
5
p {
    margin: 0px;
    font-size: 100px;
    float: left;
}
1
2
3
4
<div>
    <p>A</p>
    sajd fhkjasdh fklajs dhfkjlask jasd hfklajs dhf kjlas kjasdh fklajsd hfkjl askj asdhf klajsd hfkjl askjas dhfkl ajsdhfk jlas
</div>

定位

position

relative 相对之前的。

1
2
3
4
position: relative;
left: 100px;
top: 100px;

absolute 绝对定位。

根据最近祖先的的定位（必须要有 position）(在盒内，包含 padding 不包含 border)

1
2
3
position: absolute;
top: 0;
left: 0;

fixed 固定定位。

根据视口定位（会根据视口移动）。

sticky 粘性定位。

相对最近有滚动条的移动（body 有）。

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
38
body {
    margin: 0px;
    font-size: 16px;
    font-family: "Fira Code", "宋体";
    font-style: normal;
    font-weight: normal;
}

.container {
    height: 2000px;
    position: relative;
}

.header {
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: orange;
}

.content {
    background-color: pink;
}

.item {
    background-color: white;
}

.first {
    font-size: 40px;
    background-color: skyblue;
    position: sticky;
    top: 100px;
}

h2 {
    margin: 0px;
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<body>
    <div class="container">
        <div class="header"> header </div>

        <div class="content">
            <div class="item">
                <div class="first">A</div>
                <h2>A1</h2>
                <h2>A2</h2>
                <h2>A3</h2>
                <h2>A4</h2>
                <h2>A5</h2>
                <h2>A6</h2>
            </div>    

            <div class="item">
                <div class="first">B</div>
                <h2>B1</h2>
                <h2>B2</h2>
                <h2>B3</h2>
                <h2>B4</h2>
                <h2>B5</h2>
                <h2>B6</h2>
            </div>    

            <div class="item">
                <div class="first">C</div>
                <h2>C1</h2>
                <h2>C2</h2>
                <h2>C3</h2>
                <h2>C4</h2>
                <h2>C5</h2>
                <h2>C6</h2>
            </div>

            <div class="item">
                <div class="first">E</div>
                <h2>E1</h2>
                <h2>E2</h2>
                <h2>E3</h2>
                <h2>E4</h2>
                <h2>E5</h2>
                <h2>E6</h2>
            </div>    

            <div class="item">
                <div class="first">F</div>
                <h2>F1</h2>
                <h2>F2</h2>
                <h2>F3</h2>
                <h2>F4</h2>
                <h2>F5</h2>
                <h2>F6</h2>
            </div>    
        </div>
    </div>

</body>

有定位才有

z-index 层级。

布局

竖直中线

justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

1
2
3
4
5
justify-content: center; /* 居中排列 */
justify-content: space-between; /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */

justify-items 属性为所有盒中的项目定义了默认的 justify-self ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

1
2
3
justify-items: center; /* Pack items around the center */
justify-items: start; /* Pack items from the start */
justify-items: end; /* Pack items from the end */

水平中线

align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

1
2
align-content: center;
align-content: space-around;

align-items 属性设置了所有直接子元素的 align-self 值作为一个组。在 Flexbox 中，它控制子元素在交叉轴上的对齐。

1
align-items: center;

取消默认的 html 样式

全局选择器

1
2
3
4
5
* {
    margin: 0;
	padding: 0;
    ....
}

reset.css

引入自定义风格。