CSS属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57535054/article/details/136915176

内部样式使用style标签把CSS嵌入到HTML中

外部样式创建一个单独CSS文件（.css）通过HTML中的link标签，把CSS文件引过来

内联样式直接在元素里面使用style属性把对应的CSS内容写进来

CSS基本语法规则：一个选择器，大括号，大括号里面有样式内容

CSS要在style里写 style放哪都可可以，但一般放在head内

具体的样式值，以键值对方式来体现的

键和值之间使用：来分割

CSS注释为/* */

内部样式使用style标签把CSS嵌入到HTML中

外部样式创建一个单独CSS文件（.css）通过HTML中的link标签，把CSS文件引过来

内联样式直接在元素里面使用style属性把对应的CSS内容写进来

内联样式的优先级更高

选择器

标签选择器直接对div进行操作

div{
    color: green;
    font-size: 50px;
}

类选择器给特定div命名再操作

<div class="one">这是绿色</div>
/* 类选择器需要在前面加. */
.one{
    color: green;
    font-size: 30px;
}

id选择器

<div id="three">这是黑色</div>
#three{
    color: black;
    font-size: 30px;
}

后代选择器

<ul>
        <li>1</li>
        <li>2</li>
    </ul>

    <ol class="red">
        <li class="one"></li>
        <h3>1122</h3>
        <li>4</li>
    </ol>



.red .one{
    color: green;
}

ul li{
    color: green;
}

子选择器

<ol class="red">
        <li class="one"></li>
        <h3>1122</h3>
        <li>4</li>
    </ol>

ol>h3{
    color: yellow;
}

并集选择器

ul li,ol li{
    color: aqua;
}

伪类选择器

当鼠标移动到自己的位置时变色

    <div class="weilei">
        <p>伪类选择器</p>
    </div>
/* 鼠标移到到该位置变色 */
.weilei:hover{
    color: red;
}

鼠标点击时变色

    <div class="weilei">
        <p>伪类选择器</p>
    </div>
/* 鼠标点击变色 */
.weilei:active{
    color: blueviolet;
}

CSS属性

字体属性

字体

/* 字体 */
    font-family: 微软雅黑;

字体粗细范围100-900

    /* 字体粗细 */
    font-weight: 200;

文本属性

文本颜色

有三种形式

直接写单词

color: red;

rgb形式

color: rgb(0,0,0);

rgba透明功能

第4个属性范围是0-1 数值越小越透明

color: rgba(0, 2555, 0, 0.3);

文本对齐

默认为左对齐

右对齐

    /* 右对齐 */
    text-align: right;

居中

    /* 居中 */
    text-align: center;

文本装饰

删除线

    /* 删除线 */
    text-decoration: line-through;

文本缩进

    /* 文本缩进 */
    text-indent: 20px;

行高

上文本和下文本的距离

    /* 行高 */
    line-height: 50px;

背景属性

背景颜色

只在对应区域变色，而不是全部页面变色

background-color: red;

背景图片


background-image: url(文件路径);

    /* 横着铺图片 */
    background-repeat: repeat-x;
    /* 竖着铺图片 */
    background-repeat: repeat-y;
    /* 不铺 */
    background-repeat: no-repeat;

设置图片坐标

    /* 设置图片坐标 */
    background-position: 0 200;

设置图片背景大小

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;