关于CSS

全名Cascading Style Sheets——即层叠样式表
指定元素的颜色，字体，大小等

优先级：ID>类>标签名

通常语法如下，所有的属性和值都是以键值对形式出现

1
2
3
4
5
6
7
8
9
10
/*选择器{
    属性1：属性值1；
    属性2：属性值2；
}*/

/*比如p标签选择器*/
p {
    color: blue;
    font-size: 16px;
}

CSS应用方法

使用的优先级，内联样式>内部样式表>外部样式表

内联样式

直接嵌入标签内，作为style属性
<h1 style="color: red">123</h1>

内部样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPY html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Untitled-1</title>
        <style>
            p{
                /* 这是指对p类型如此的style，但若是h1，或者ul等则无效 */
                color: red;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p>My first paragraph</p>
    </body>
</html>

外部样式表

创建一个文件夹，专门储存css样式，需要时再调用
<link rel="stylesheet" href="css文件的路径">

选择器

yusnsu

元素选择器

对于特定标签，统一规定格式

1
2
3
4
p {
    color: blue;
    font-size: 16px;
}

类选择器

设定一个类，要用这个格式，就把这个加进标签的属性
在声明时，要给类选择器前面加上一个点

1
2
3
4
5
.highlight {
    background-color: yellow;
}

<h3 class="highlight">123</h3>

ID选择器

声明时，前面要加井号

1
2
3
4
5
#header {
    background-color: yellow;
}

<h3 id="header">123</h3>

通用选择器（选择所有元素）

声明时，前面带星号

1
2
3
*{
    font-family: 'KaiTi';
}

子元素选择器（选择直接位于父元素内部的子元素）

1
2
3
4
5
6
7
8
.father > .son{
    color: yellow;
}

/*p是div的子元素*/
<div class="father">
    <p class="son">123</p>
</div>

后代选择器

后代包含子代，子代不包含后代
注意写法，中间要放空格

1
2
3
4
5
6
7
8
9
10
.farher p{
    color: yellow;
}

<div>father
    <p>这是子代</p>
    <div>
        <p>这是孙代，后代之一</p>
    </div>
</div>

相邻元素选择器

紧跟在被选中元素之后的元素才会被更改

1
2
3
4
5
6
7
h3 + p{
    color: red;
}

<p>123</p>
<h3>123</h3>
<p>123</p>/*只有这个会被更改*/

伪类选择器

选择HTML文档的元素的特定状态或位置的
不仅仅是元素本身的属性
以冒号开头，用于用户交互文档结构或者其他条件下的元素应用样式

1
2
3
4
5
6
7
8
9
10
11
12
13
element: hover{/*鼠标悬停时*/

}
/*
:first-child 选中第一个子元素
:nth-chile 选中第n个子元素
:active 链接的状态

::after 
::before
伪元素选择器，创建虚拟元素，所以以双冒号开头
在选中元素之前或之后插入虚拟的内容
*/

css常用属性

“行内元素”不能往外扩充大小
可以用<display>转成目标格式

1
2
3
4
5
6
.div-inline{
    display: inline;
    xxx;
}

<div class="div.inline">xxx</div>

盒子模型

布局方式

  • 标准流，网页按元素的书写顺序依次排序
  • 浮动
  • 定位
  • Flexbox和Grid，自适应布局

浮动

创建浮动框，使其移动，直至缘触

浮动是相对于父元素进行，只会在父元素内部移动

1
2
3
选择器 {
    float: left/right/none;
}

特性：脱离标准流；一行显示，顶部对齐；具备行内块元素特性
占满一行后再进入下一行，紧挨

清除浮动

为了避免对后续布局产生影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*第一种方法，在父元素中加属性*/
.father {
                color: red;
                width: 300px;
                height: 300px;
                overflow: hidden
            }

/*第二种方法，浮动标签的父元素添加一个伪元素*/
.father::after{
    content:"";
    display:table;
    clear:both;
}

定位

更容易控制

  • 相对定位，按照在文档流中的正常位置——微调元素位置
  • 绝对定位，相对于已定位的祖先元素
  • 固定定位，相对于浏览器窗口，不占据文档流，不随滚动而滚动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .box-relative{
                    width: 100px;
                    height: 100px;
                    background-color: green;
                    position: relative;/*相对定位*/
                    top: 50px;
                    left: 50px;
                }
    .box-absolate{
                    width: 100px;
                    height: 100px;
                    background-color: yellow;
                    position: absolate;/*绝对定位*/
                    top: 50px;
                    left: 50px;
                }
                .box-fixed{
                    width: 100px;
                    height: 100px;
                    background-color: pink;
                    position: fixed;/*固定定位*/
                    top: 50px;
                    left: 50px;
                }