JavaWeb_03_CSS样式

柳絮，曾轻语

于 2023-06-15 09:52:47 发布

阅读量89

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_42788897/article/details/131209142

版权

《CSS样式》

一、样式引用

引用方式

内联样式：写在标签里面
内部样式：写在页面里面
外部样式：写在页面外面

案例一

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的首页</title>
    <!-- 引用外部样式 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 内部样式 -->
    <style>
        #div2 {
            width: 300px;
            height: 100px;
            background-color: lightcoral;
            display: inline-block;
        }
    </style>
</head>

<body>
    <!-- 内联样式测试 -->
    <div id="div1" style="width:300px;height: 100px;background-color: greenyellow;display: inline-block;"></div>
    <!-- 内部样式测试 -->
    <div id="div2"></div>
    <!-- 外部样式测试 -->
    <div id="div3"></div>
</body>

</html>

index.css

#div3 {
    width: 300px;
    height: 100px;
    background-color: lightblue;
    display: inline-block;
}

二、选择器

案例二

html

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <!-- id：html中元素唯一标识，不可重复 -->
        <td id="td5">5</td>
        <!-- class：表示引用样式 -->
        <td class="td6">6</td>
        <td class="td7">7</td>
        <td class="td8">8</td>
    </tr>
</table>

/* 1.标签选择器 */
table {
    margin: auto;
    border: 1px solid black;
}

/* 2.id选择器 */
#td5 {
    background-color: aqua;
}

/* 3.类选择器 */
.td6 {
    background-color: blueviolet;
}

/* 4.派生选择器 */
table tr td {
    width: 200px;
    height: 50px;
    background-color: greenyellow;
    border: 1px solid black;
    text-align: center;
}

/* 5.分组选择器 */
.td7,
.td8 {
    background-color: yellow;
}

/* 6.伪类选择器 */
/* 多样式冲突时，使用!important声明该样式为最终样式 */
td:hover {
    background-color: white !important;
}

三、常用样式属性

案例三

html

<div class="test">
    狭路相逢勇者胜！
</div>

.test {
    /* 框样式 */
    width: 60%;
    height: 200px;
    background-color: lightpink;
    border: 5px solid greenyellow;
    border-radius: 20px;
    margin: auto;
    margin-top: 100px;
    padding: 10px;

    /* 文本样式 */
    text-align: center;
    line-height: 200px;
    font-family: "楷体";
    font-weight: bold;
    font-size: 50px;
    color: blue;
}