JavaWeb之CSS（脑图+详解）day02

最新推荐文章于 2021-06-22 19:26:03 发布

程序彤

最新推荐文章于 2021-06-22 19:26:03 发布

阅读量139

点赞数

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

本文链接：https://blog.csdn.net/m0_47119598/article/details/109312369

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在这里插入图片描述

CSS

定义

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

css与html结合的三种方式

body中的div块内写明样式
head中的style中写明样式
head中通过link标签引入.css文件

<head>
    <meta charset="UTF-8">
    <title>css</title>
<!--link标签引用css样式代码-->
    <link rel="stylesheet" href="./1_css.css">
<!--    -->
    <style>
        /*
        css与html代码结合的三种方式
            1.body中的div块内写明样式
            2.head中的style中写明样式
            3.head中通过link标签引入.css文件
        */
        /*
        div{
            border: 2px solid pink;
        }
        span{
            border: 1px solid blue;
        }
        */

    </style>

</head>
<body>
    <div>1</div>
    <div>2</div>
    <span>3</span>
    <span>4</span>
</body>

选择器

标签名选择器
#id选择器
.class选择器
,组合选择器

<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style type="text/css">
        #id1{
            color: blue;
            font-size: 30px;
            border: 1px solid pink;
        }
        #id2{
            color: greenyellow;
            border: 1px dashed purple;
        }
        .c1{
            color: purple;
            border: 2px dashed firebrick;
        }
        .c2{
            color: pink;
        }
        /*
        组合选择器：选择器1,选择器2,选择器n
         */
        .c,#i{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="id1">11</div>
    <div id="id2">22</div>

    <span class="c1">33</span>
    <span class="c2">44</span>

    <div class="c">组合</div>
    <span id="i">组合</span>
</body>

常用标签样式

text-decoration: none;/*去除下划线*/
border-collapse: collapse; /*单元格与表格无间隙*/
list-style: none;/*去除无序列表前的符号*/

<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <style type="text/css">
        div{
            color: aquamarine;
            border: 2px solid pink;
            width: 300px;
            height: 300px;
            background-color: black;
            font-size: 20px;
            margin-left:auto;
            margin-right: auto;
            text-align: center;
        }
        a{
            text-decoration: none;/*去除下划线*/
        }
        table{
            border: 2px solid purple;
            border-collapse: collapse; /*单元格与表格无间隙*/
        }
        td{
            border: purple 1px solid;
        }
        ul{
            list-style: none;/*去除无序列表前的符号*/
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">百度</a>
    <div>div块</div>
    <div>div块</div>
    <div>div块</div>
<table>
    <tr>
        <td>12</td>
        <td>22</td>
    </tr>
</table>

<ul>
    <li>11111</li>
    <li>22222</li>
    <li>11111</li>
    <li>11111</li>
</ul>
</body>