CSS

1、CSS选择器

　　1.1 元素选择器

　　　　元素选择器根据元素名称来选择 HTML 元素。

        p {
          text-align: center;
          color: red;
        }

　　1.2 id 选择器

　　　　根据id 属性来选择特定元素。

        #box {
            text-align: center;
            color: red;
        }

　　1.3 类选择器

　　　　根据class属性来选择特定元素。

        .box {
            text-align: center;
            color: red;
        }

　　1.4 通用选择器

　　　　选择页面上的所有的 HTML 元素。

        * {
            text-align: center;
            color: red;
        }

2、使用CSS的三种方式

　　2.1 外部CSS

　　　　引用外部的CSS文件。

    <head>
        <link rel="stylesheet" href="./css/style.css">
    </head>

　　2.2 内部CSS

　　　　内部样式是在 head 部分的 <style> 元素中进行定义。

    <head>
        <style>
            body {
                margin: 0;
            }
        </style>
    </head>

　　2.3 行内CSS

　　　　在元素上定义样式。

        <h1 style="color:blue;text-align:center;">This is a heading</h1>

3、CSS 背景

　　3.1 background-color

　　　　background-color 属性指定元素的背景色。　　　

　　颜色通常由以下方式指定：

有效的颜色名称 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            背景颜色
        </div>
    </body>
</html>

　　3.2 不透明度 / 透明度

　　　　opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明。

　　　　使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。

　　　　RGBA 的透明度：

　　　　　　不对子元素应用不透明度。

　　　　　　RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

            div {
                background: rgba(0, 128, 0, 0.3)
            }

　　3.3 背景图片

　　　　background-image 属性指定用作元素背景的图像。

　　　　默认情况下，在水平和垂直方向上都重复图像，以覆盖整个元素。

            div {
                background-image: url("img/tulip.jpg");
                width: 500px;
                height: 500px;
            }

　　　　背景重复 background-repeat：

　　在水平方向重复：

background-repeat: repeat-x;

　　在垂直方向重复：

background-repeat: repeat-y;

　　不重复：

background-repeat: no-repeat;

　　　　背景位置：

　　　　　　 background-position 属性用于指定背景图像的位置。

            body {
                background-image: url("img/tulip.jpg");
                background-color: aliceblue;
                width: 500px;
                height: 500px;
                background-repeat: no-repeat;
                background-position: right top;
            }

　　　　背景附着：

　　　　　　 background-attachment属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

                background-attachment: fixed;

                background-attachment: scroll;

　　　　背景属性简写：

            body {
                background-color: #ffffff;
                background-image: url("tree.png");
                background-repeat: no-repeat;
                background-position: right top;
            }

　　　　简写后：

            body {
                background: #ffffff url("tree.png") no-repeat right top;
            }

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。

4、边框属性

　　border-style 属性指定要显示的边框类型。

<!DOCTYPE html>
<html>
    <head>
        <style>
            p.dotted {
                border-style: dotted;
            }

            p.dashed {
                border-style: dashed;
            }

            p.solid {
                border-style: solid;
            }

            p.double {
                border-style: double;
            }

            p.groove {
                border-style: groove;
            }

            p.ridge {
                border-style: ridge;
            }

            p.inset {
                border-style: inset;
            }

            p.outset {
                border-style: outset;
            }

            p.none {
                border-style: none;
            }

            p.hidden {
                border-style: hidden;
            }

            p.mix {
                border-style: dotted dashed solid double;
            }
        </style>
    </head>
    <body>

        <h1>border-style 属性</h1>

        <p>此属性规定要显示的边框类型：</p>

        <p class="dotted">点状边框。</p>
        <p class="dashed">虚线边框。</p>
        <p class="solid">实线边框。</p>
        <p class="double">双线边框。</p>
        <p class="groove">凹槽边框。</p>
        <p class="ridge">垄状边框。</p>
        <p class="inset">3D inset 边框。</p>
        <p class="outset">3D outset 边框。</p>
        <p class="none">无边框。</p>
        <p class="hidden">隐藏边框。</p>
        <p class="mix">混合边框。</p>

    </body>
</html>

5、边框宽度

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上、下边框 5 像素，左、右边框 20 像素 */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上、下边框 20 像素，左、右边框 5 像素 */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上 25 像素、右 10 像素、下 4 像素、左 35 像素 */
}
</style>
</head>
<body>

<h1>border-width 属性</h1>

<p>border-width 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>

</body>
</html>

6、边框颜色

<!DOCTYPE html>
<html>
    <head>
        <style>
            p.one {
                border-style: solid;
                border-color: red green blue yellow;
                /* 上红、右绿、下蓝、左黄 */
            }
        </style>
    </head>
    <body>

        <h1>border-color 属性</h1>

        <p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>

        <p class="one">多色的实线边框</p>

    </body>
</html>

7、简化边框属性

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border: 5px solid red;
            }
        </style>
    </head>
    <body>

        <h1>border 属性</h1>

        <p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>

    </body>
</html>

posted @ 2023-03-15 18:09 诸葛卧龙仙人阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

CSS

公告