初识前端——CSS相关知识点

前端三大模块：HTML/CSS/JavaScript。

CSS，层叠样式表，用来渲染HTML中元素标签的样式。如果head相当于女神的头部，body相当于女神的身体，那么CSS相当于女神的服饰/包包/化妆品。

1.CSS可以通过以下方式添加到HTML中：

  • 内联样式（衣/裤/鞋）：在元素标签中使用"style"属性 
    • <body>
    <div style="color: pink">asdf</div>
</body>

       

  • 内部样式表（粉底/眼影/口红）：在HTML文档头部<head>区域使用"style"属性
    • id选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
        #i2{
            background-color: #2459a2;
            height: 48px;
        }
        #i3{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>

<body>
    <div class="i1">ff</div>
    <div class="i2">ff</div>
    <div class="i3">2</div>
</body>
</html>
View Code

 

    • class选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #2459a2;
            height: 30px;
        }
    </style>
</head>

<body>
    <input class="c1" type="text" n="abaaba">
    <input class="c1" type="password">
</body>
</html>
View Code

 

    • 标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         span{
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div class="i1">ff</div>

    <span class="i1"> 女神1</span>
    <span class="i2"> 女神2</span>
    <span class="i3"> 女神3</span>
    <!-- 标签只要为span，class即使不同也会安照标签选择器来格式化 -->
</body>
</html>
View Code

 

    • 层级选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 div{
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div class="c1">
        <div>层级选择器（都符合才格式化）</div>
        层级选择器（只符合class条件）
    </div>
</body>
</html>
View Code

 

    • 组合选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .i1,.i2,.i3{
             background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div class="i1">组合选择器，style中用逗号分隔，只要在里面就格式化</div>
    <div class="i2">组合选择器，style中用逗号分隔，只要在里面就格式化</div>
    <span class="i4">不在style组合选择器中</span>
    <div class="i3">组合选择器，style中用逗号分隔，只要在里面就格式化</div>

</body>
</html>
View Code

 

    • 属性选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[n='abaaba']{
             width:400px; 
             height:40px; 
             background-color: black;
             color:white}
    </style>
</head>

<body>
    <div class="c1" n="baba">不合属性选择器中括号中条件</div>
    <div class="c1">不合属性选择器中括号中条件</div>
    <div class="c1" n="abaaba">属性选择器,对选择到的标签再通过属性再次进行筛选</div>
    <div class="c2" n="abaaba">不合属性选择器中括号中条件</div>
</body>
</html>
View Code

PS：当有多处声明标签格式时，标签上的style优先，格式会尽量多取用，当冲突时会遵循就近原则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[n='abaaba']{
             width:400px; 
             height:40px; 
             background-color: white;
             color:pink}
        .c2[n='abaaba']{
            background-color: rgb(124, 22, 110);
            color:teal
        }
    </style>
</head>

<body>
    <div class="c1 c2" n="abaaba" style="background-color:black;">
        取了属性选择器c1的长宽，属性选择器c2的字体颜色，以及内联style的背景色
    </div>
</body>
</html>
View Code

 

  • 外部引用（包包/豪宅/跑车）：使用外部CSS文件

将style中的语句（不包含style标签）单独打包成一个.css文件，若想取用在head中声明：

<link rel = "stylesheet" href="文件路径/文件全名" />

 

2.注释

  • 与html代码稍有区别，css代码注释前后分别加"/*" 和 "*/"
  • vscode中选中同时按"CTRL"和"/"即可。取消注释时按"CTRL+/"会有点小问题，注意下即可

 

3.边框

  • 宽度，样式，颜色(border:4px dotted red;)
  • 取哪边（border：left)

 

4.

height：高度 百分比

width：宽度 像素 百分比

text-align:center   水平方向居中

line-height + 标签高度     垂直方向根据标签高度居中

color：字体颜色

font-size：字体大小

font-weight：字体加粗

 

5.float

让标签“浮”起来，块级标签也可以堆叠

当子标签“浮”起来挡住父标签后想要都显示出来，可以在下方加入如下代码：

<div style="clear:both;"></div>

 

6.display

display:none;  --让标签消失

display:inline;  --让标签转化成行内标签(有多少占多少，无法设置高度，宽度，padding，margin）

display:block;  --让标签转化成块级标签(默认占整行，可以设置高度,宽度，padding,margin)

display:inline-block; 既块级也可行内

 

7.padding margin(0,auto)

padding:内边距

margin:外边距

 

8.position:

position:fixed  →固定在页面的某个位置

position:relative;(父标签）+position: absolute;(子标签)  →子标签内容显示在父标签内容的相对位置上，示例如下：

<div style="position:relative;">
    <div style="position:absolute;top:0;left:0>显示在父标签左上方</div>
</div>
View Code

 

9.opacity:设置透明度(0~1),1为实体，0为透明

 

10.z-index:层级顺序，配合position使用元素标签按照z-index属性大小进行显示，z-index大的显示在上方，若不写则默认为0；

 

11.overflow:当内容(如图片)超出标签定义范围后它会撑开标签范围从而占据一些超出预期的位置，所以就需要一个bra来限制它。而overflow属性刚好就可以，设置overflow:hidden;会是内容只显示标签定义范围部分的内容；设置overflow:auto；会给标签所示内容加一个滚动条，想看哪就看哪。

 

12.hover 在选择器后加上":hover"代表光标移动到选择器所修饰的元素位置时，该内容会按照选择器中的代码来进行修饰；(博客园的操作选项，当光标移至添加新随笔时，字体变红并加下划线）

 

13.background

  • background-image:url(“图片路径+图片全名”)；会安装标签定义大小重复访问填充，直至图片将标签范围完全填满
  • background-repeat:repeat-y;(y轴重复）/  repeat-x;(x轴重复)   /  no-repeat;(不重复)
  • background-position-x:像素大小。左/右移动像素大小值取图片
  • background-position-y:像素大小。上/下移动像素大小值取图片

 

posted on 2020-10-08 17:17  行而下的坏死  阅读(116)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3