【前端基础】CSS

懒羊羊asd

已于 2022-09-24 15:21:34 修改

阅读量221

点赞数 23

分类专栏： Java Web 文章标签： css 前端

于 2022-08-02 14:37:45 首次发布

本文链接：https://blog.csdn.net/qq_53798578/article/details/125459034

版权

Java Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

CSS

1.CSS介绍

CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.

2.CSS语法规则

在这里插入图片描述
选择器:浏览器根据选择器决定受CSS样式影响的HTML标签.
属性:要改变的样式名,并且每个属性都有一个值.属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明.
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开.
注意:一般每行只描述一个属性.

3.CSS与HTML结合使用

第一种:在标签的style属性上设置k:v v 修改标签样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border : 1px solid red;">标签1</div>
<div style="border : 1px solid red;">标签2</div>
<span style="border : 1px solid red;">标签1</span>
<span style="border : 1px solid red;">标签2</span>
</body>
</html>

第二种:在head标签中,使用style标签来定义各种自己需要的CSS样式.
格式:
xxx{
k:v v;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style type="text/css">
     /*1*/
     div{
         border : 1px solid red;
     }
     span{
         border : 1px solid red;
     }
 </style>
</head>
<body>
<div >标签1</div>
<div >标签2</div>
<span >标签1</span>
<span >标签2</span>
</body>
</html>

第三种:把CSS样式单独写成一个CSS文件,再通过link标签引入,即可复用.
在这里插入图片描述

div{
    border : 1px solid yellow;
}
span{
    border : 1px solid red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div >标签1</div>
<div >标签2</div>
<span >标签1</span>
<span >标签2</span>
</body>
</html>

4.常用选择器

标签名选择器:
(1).格式:
标签名{
属性 : 值;
}
(2).代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         div{
             border : 1px solid red;
             color : blue;
             font-size : 20px;
         }
        span{
            border : 2px dashed yellow;
            color : red;
            font-size : 10px;
        }
    </Style>
</head>
<body>
<div >标签1</div>
<div >标签2</div>
<span >标签1</span>
<span >标签2</span>
</body>
</html>

id选择器:
(1).格式:
#id属性值{
属性 : 值;
}
(2).代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         #id001{
             border : 1px solid red;
             color : blue;
             font-size : 30px;
         }
        #id002{
            border : 5px dashed blue;
            color : red;
            font-size : 20px;
        }
    </Style>
</head>
<body>
<div id="id001">标签1</div>
<div id="id002">标签2</div>

</body>
</html>

class类型选择器:
(1).格式:
.class属性值{
属性：值;
}
(2).代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
         .class001{
             border : 1px solid red;
             color : blue;
             font-size : 26px;
         }
        .class002{
            border : 1px dashed blue;
            color : red;
            font-size : 26px;
        }
    </Style>
</head>
<body>
<div class="class001">标签1</div>
<span class="class002">标签2</span>

</body>
</html>

组合选择器:
(1).格式:
选择器1,选择器2,选择器n{
属性 : 值;
}
(2).代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
         .class001,#id002{
             border : 1px solid yellow;
             color : darkmagenta;
             font-size : 20px;
         }

    </Style>
</head>
<body>
<div class="class001">标签1</div>
<span id="id002">标签2</span>

</body>
</html>

5.CSS常用样式

(1).字体颜色: color : 颜色；
(2).宽度: width : px;
(3).高度: height : px;
注意:使用高度宽度之前,需使用border属性,否则看不到效果.
例如: border : px solid/dashed(实线或虚线) 颜色.
(4).背景颜色: background-color : 颜色;
(5).字体样式: color : 颜色; front-size : 大小；
(6).div居中: margin-left : auto; margin-right : auto;
注意是文本框居中,不是文本居中.
(7).文本居中: text-align : center;
(8).超链接去下划线:text-decoration : none;
(9).表格细线(将边框合并): border-collapse : collapse;
(10).列表去除修饰: list-style : none;