一篇入门快速CSS_一篇 css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42190209/article/details/104729571

文章目录

CSS 概述

css是层叠样式表单。
是用于（增强）控制网页样式并允许讲样式信息与网页内容分离的一种标记语言
语法规则：
选择器 {
属性:值; (声明)
属性:值; (声明)
}
注释 /*这是注释*/

CSS与HTML的结合方式(3种)

方式一

标签后直接使用，这样会造成代码可读性下降，复用性差。

修改每个div标签的样式为：边框1个像素，实线，红色
    <div style="border: 1px solid red;"> div标签1 </div>
    <div style="border: 1px solid red;"> div标签2 </div>
    <span style="border: 1px solid red;"> span标签1 </span>
    <span style="border: 1px solid red;"> span标签2 </span>
    <p style="border: 1px solid red;"> p段落标签1 </p>
    <p style="border: 1px solid red;"> p段落标签2 </p>

方式二

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

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

    <!--
    css与html的结合方式二
    在head中标签中，使用style标签定义各种自己需要的css样式
    只能在同一个页面使用
    修改每个div标签的样式为：边框1个像素，实线，红色-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

方式三

把css样式写成一个单独的css文件，再通过link标签引用
html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    link标签专门用来引进css样式代码-->
    <link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
    <!--
    css与html的结合方式三
    把css样式写成一个单独的css文件，再通过link标签引用
    修改每个div标签的样式为：边框1个像素，实线，红色-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

css文件

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

CSS选择器（4种）

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
             border: 1px solid yellow;
             color: blue;
             font-size: 30px;
         }
        span{
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--css标签选择器
    标签名{
        属性：值;
    }
-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

2、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px dotted blue;
        }
    </style>
</head>
<body>
<!--id选择器
    #id值{
        属性：值;
    }
-->
    <div id="id001">div标签1</div>
    <div id="id002">div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

3、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02{
            color: gray;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--class类型选择器
    .class值{
        属性：值;
    }
    class类型选择器，可以通过class属性有效的选择性的使用样式
-->
    <div class="class01">div标签1</div>
    <div class="class02">div标签2</div>
    <span class="class01">span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

4、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id01,.class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        #id02{
            color: gray;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--组合选择器
    选择器1,选择器2,...选择器n{
        属性：值;
    }
    组合选择器可以让多个选择器共用同一个样式代码
-->
    <div id="id01">div标签1</div>
    <div class="class01">div标签2</div>
    <span id="id02">span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

CSS常用属性

div{
            /*字体颜色*/
            color: red;
            /*边界*/
            border: 1px yellow solid;
            /*宽高*/
            width: 300px;
            height: 300px;
            /*背景颜色*/
            background-color: green;
            /*字体大小*/
            font-size: 50px;
            /*DIV居中*/
            margin-left: auto;
            margin-left: auto;
            /*文本居中*/
            text-align: center;

        }
        a{
            /*超链接去下划线*/
            text-decoration: none;
        }
        table{
            /*表格边框合并成细线*/
            border-collapse: collapse;
        }
        ul{
            /*列表去前面的符号*/
            list-style: none;
        }