初识CSS

最新推荐文章于 2023-02-27 09:26:54 发布

Onism_DreamBoat

最新推荐文章于 2023-02-27 09:26:54 发布

阅读量52

点赞数

分类专栏：后端学习 JavaWeb 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_73574147/article/details/128698459

版权

后端学习同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaWeb

13 篇文章 0 订阅

订阅专栏

技术介绍

CSS是层叠式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

语法规则

在这里插入图片描述

选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)

属性(property):是要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成一个完整的样式声明，例如：p{color:blue}

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然每一个声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

注：一般每行只描述一个属性

CSS与HTML结合使用

第一种方式

<div style="border: 2px solid greenyellow">div标签1</div>
<span style="border: 2px solid indianred">div标签2</span>

存在的问题：

如果标签多了。样式多了，代码量非常庞大
可读性非常差
CSS代码没有复用性

第二种方式

在head标签中，使用style标签来定义各种自己需要的css样式。

格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
            div{
                border: 1px solid red;
            }
            span{
                border: 1px solid red;
            }
    </style>
</head>
<body>
    <div>div标签</div>
    <span>span标签</span>
</body>
</html>

在head中写的注释需遵守CSS的注释规范(/**/)

存在的问题：

只能在同一个页面复用代码，不能在多个页面中复用css代码。
维护起来不方便，实际的项目会有成千上万的页面，要到每个页面中去修改，工作量太大

第三种方式

把css样式写成一个单独的css文件，再通过link标签引入即可复用。

使用html的<link rel=“stylesheet” type=“text/css"href=”./style.css"/>标签导入css样例文件

1.css

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

CSSTest.html

<!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>div标签</div>
    <span>span标签</span>
</body>
</html>

CSS选择器

标签名选择器

格式：

标签名{
	属性：值；
}

标签名显示器，可以决定哪些标签被动的使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        div{
            border: 2px solid yellow;/*dashed:虚线*/
            color:blue;/*字体颜色*/
            font-size:25px;
        }
        span{
            border: 2px dashed blue;/*dashed:虚线*/
            color:green;/*字体颜色*/
            font-size:18px;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <span>span标签</span>
</body>
</html>

id选择器

格式：

#属性值{
	属性：值；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #id01{
            color:blue;
            font-size:25px;
            border: 2px yellow solid;
        }
        #id02{
            color:red;
            font-size:30px;
            border: 2px blue dotted;/*dotted:点线*/
        }
    </style>
</head>
<body>
    <div id="id01">div标签1</div>
    <div id="id02">div标签2</div>
</body>
</html>

class选择器(类选择器)

格式：

.class属性值{
	属性：值；
}

class类型选择器，可以通过class属性有效的选择性去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CLASS选择器</title>
    <style type="text/css">
        .class01{
            color:blue;
            font-size:25px;
            border: 2px yellow solid;
        }
        .class02{
            color:red;
            font-size:30px;
            border: 2px blue dotted;/*dotted:点线*/
        }
    </style>
</head>
<body>
    <div class="class01">div标签1</div>
    <div class="class02">div标签2</div>
</body>
</html>

组合选择器

格式：

选择器1，选择器2，选择器n{
	属性：值；
}

组合选择器可以让多个选择器共用同一个css代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id01{
            color:blue;
            font-size:25px;
            border:2px yellow solid;
        }
    </style>
</head>
<body>
    <div id="id01">div标签1</div>
    <div class="class01">div标签2</div>
</body>
</html>

常用样式

样式	作用(用途)
color	字体颜色
width	字体宽度
height	字体高度
background-color	背景颜色
font-size	字体大小
margin-left:auto margin-right:auto;	DIV居中
text-margin:center	文本居中
text-decoration:none	超链接去下划线
border-collapse:collapse	合并边框
list-style:none	列表去除修饰