css学习

开发 评论

CSS 相关知识点

1. 样式的优先级

行内样式 > 内部样式 、 外部样式

其中针对内部样式和外部样式采用的是就近原则，谁距离标签比较近，就使用睡得样式表。

2.选择器

2.1 基本选择器

为了获取页面的的元素

（1）标签选择器

（2）类选择器

（3）id选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<h1 class="myh1" id='name'>1111</h1>

<style>
	h1{
	  color: red;
	}
	.myh1{
	  background-color:black;
	}
	#name{
	  font-size:40px;
	}
</style>

选择器的优先级顺序：

​ id选择器 > class 选择器 > 标签选择器

2.2 层次选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>
            <h1>测试</h1>
        </title>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li><p>p4</p></li>
            <li><p>p5</p></li>
            <li><p>p6</p></li>
        </ul>
    </body>

<style>
   
</style>
</html>

1、后代选择器

所有的后代

1
2
3
4
5
<style>
    body p{
        background-color: aquamarine;
    }
</style>

image-20211127164240275

2、子选择器

只有最近的子代

1
2
3
4
5
<style>
    body>p{
        background-color: aquamarine;
    }
</style>

image-20211127164222041

3、相邻兄弟选择器

只有一个，相邻向下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <title>
            <h1>测试</h1>
        </title>
    </head>
    <body>
        <p>p1</p>
        <p class="active">p2</p>
        <p>p3</p>
        <ul>
            <li><p>p4</p></li>
            <li><p>p5</p></li>
            <li><p>p6</p></li>
        </ul>
    </body>

<style>
    .active + p {
        background-color: aquamarine;
    }
</style>
</html>

image-20211127164948302

4.通用选择器

当前选中元素的向下的所有兄弟元素

1
2
3
4
5
<style>
    .active ~ p {
        background-color: aquamarine;
    }
</style>

2.3 结构伪类选择器

我觉得意义不大

2.4 属性选择器

属性选择器可以根据元素的属性或者属性值来选择元素

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
<!DOCTYPE html>
<html>
    <head>
        <title>
            <h1>测试</h1>
        </title>
    </head>
    <body>
        <p>p1</p>
        <p class="active">p2</p>
        <p class="active node">p3</p>
        <ul>
            <li><p class="active node">p4</p></li>
            <li><p>p5</p></li>
            <li><p>p6</p></li>
        </ul>
    </body>

<style>
    /* 不加~就是完全匹配 */
    body p[class~="active"]{
        background-color: aquamarine;
    }
</style>
</html>

3.样式

3.1 字体样式

1
2
3
4
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色

3.2 文本样式

  1. 颜色

  2. 文本对齐方式

    1
    text-align: center;

  3. 首行缩进

    1
    2
    /* em代表缩进一个字 */
    text-indent: 2em;

  4. 行高

    行高和块的高度一致时，就可以保证文本上下居中。

    1
    line-height: 300px;

    image-20211128142513484

  5. 下划线

    1
    text-decoration: underline;

  6. 文本图片水平对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
        <img src="../../public/favicon.ico" class="favicon">
        <span class="spantext">111111111111111111111</span>
    </body>

    <style>
    	/* 逗号左边的参数是参照物 */
        .favivon,spantext{
            vertical-align: middle;
        }
    </style>

3.3 文本阴影和超链接伪类

3.3.1 超链接的相关伪类

1
2
3
4
5
6
7
8
9
10
<style>
    /* 鼠标在超链接上时的相关样式 */
    a:hover{
        color: aquamarine;
    }
    /* 鼠标点击超链接时的相关样式 */
    a:active{
        color: bisque;
    }
</style>

3.3.2 文本阴影

3.4 列表

3.4.1 相关样式

1
2
3
4
5
6
7
8
/* 
列表开头的相关样式：
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
line-style: none;

3.5 背景

3.5.1 背景颜色

3.5.2 背景图片

4.盒子模型

image-20211128155442979

margin: 外边框

padding: 内边框

border: 边框

4.2 边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

    1
    border: 2px solid red;

4.3 外边框

外边框水平居中

注意：如果margin: 0 auto; 未生效

在body中将text-align属性设置未center就行。

image-20211128224341019

1
2
3
4
/* 水平居中  首先外面是一个块元素，块元素外面有长度限制*/
margin:0 auto; 
/* 上边距20px,下边距30px,左边距10px,右边距40px */
margin:20px 30px 10px 40px;

4.4 圆角边框

1
2
/* 左上 右上 右下 左下 */
border-radius: 20px 20px 10px 10px;

4.5 阴影

1
box-shadow: ;

5. 浮动

5.1 行内元素

行内元素：　　

  • 与其他行内元素并排
  • 不能设置宽高，默认的宽度就是文字的宽度

5.2 块级元素

块级元素：

  • 霸占一行，不能与其他任何元素并列。
  • 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

5.2.1块级元素和行内元素的分类：

　　在HTML的角度来讲，标签分为：

　　　　文本级标签：p , span , a , b , i , u , em

　　　　容器级标签：div , h系列 , li , dt ,dd

　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。

　　从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

　　　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。

　　　　块级元素：所有的容器级标签，都是块级元素，以及p标签。

5.2.2块级元素和行内元素的相互转换：

　　我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换。

　　display：inline;

　　那么这个标签将变为行内元素，即：

　　　　1，此时这个div将不能设置宽度和高度了。

　　　　2，此时这个div可以和其他行内元素并排了。

　　同样的到了我们也可以用display将行内元素(比如span)转行成块级元素。

　　display：block；

　　那么这个span标签将变为块级标签，即：

　　　　1，此时这个span能够设置宽度，高度。

　　　　2，此时这个span必须独占一行，其他元素无法与之并排。

　　　　3，如果不设置宽度，将占满父级。

俄罗斯悍匪安全开发工程师

个人简介。