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(redgreenbluealpha)。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)    收藏  举报