CSS教程

CSS总结3

本文主要是介绍CSS总结3,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一,

1,chorme调式工具 -->右击-->检查

2,快速向下复制一行 shift+alt+向下箭头

二,1,emmet语法快速生成html样式

(5)-->p.demo(class)   div#two(id)

        (6)--> 有顺序div{$}*5    无顺序ul>li*5  div{文字}*5

,2,emmet语法快速生成css样式:直接打出首字母 

三,复合选择器

1,后代选择器

<style>

    /* 注意用空格隔开 */

    ul li a {

        color: beige;

    }

    /* 多个ol选一个 */

    .nav li {

        color: blue;

    }

</style>

<body>

    <ol class="nav">

        <li>yayayy</li>

    </ol>

    <ol>

        <li>啦啦啦啦</li>

    </ol>

    <ul>

        <li><a href="#">阿巴巴</a></li>

    </ul>

</body>

2,子元素选择器

<style>

    .div>a {

        color: blueviolet;

    }

</style>

<body>

    <div class="div">

        <!-- 只有这里的a变色 -->

        <a href="#">儿子</a>

        <p>

            <a href="#">孙子</a>

        </p>

    </div>

</body>

3,并集选择器

<style>  //习惯竖着写,最后一个选择器不加逗号

    div,

    p,

    .pink li {

        color: aquamarine;

    }

</style>

<body>

    <div>qw</div>

    <p>df</p>

    <ul class="pink">

        <li>sda</li>

        <li>eg</li>

    </ul>

</body>

4,链接伪类选择器

<style>

/*顺序固定需牢记*/

    /* 链接伪类用: */

    a:link {

        /* 未访问过的链接 */

        color: black;

    }

    a:visited {

        /* 已经访问过的链接 */

        color: coral;

    }

    a:hover {

        /* 鼠标经过时的链接 */

        color: cyan;

    }

    a:active {

        /* 鼠标按下没有松开 */

        color: darkkhaki;

    }

</style>

<body>

    <a href="#">小猪佩奇</a>

</body>

5,focus伪类选择器 

<style>

input:focus {

    /* :focus把获得光标的input表单元格选取出来 */

    background-color: darkorange;

}

</style>

<body>

    <input type="text"><input type="text"><input type="text">

</body>

四,CSS元素显示器

1,块元素

特点:1)自己独占一行

            2)宽,高,行内外间距可变

             3)宽度默认值与浏览器一样宽

            4)可放任何元素,块元素,行内元素2

注:1)文字类元素(h1 p)不放块元素 (div)

2,行内元素

特别: 1)多个可以在一行

            2)宽高设置无效

             3)宽度默认值是本身内容的宽度

              4)行内元素只能收纳文本和其他元素

注:1)链接里面不再放链接

3,行内块元素(img/ input/ td/)

特别:1)一行放多个

            2)可以设置长宽行内外边距

五,元素显示模式

<style>

    /* 转化为块元素:display:block */

    /* 转为行内元素: display:inline */

    /* 转化为行内块元素: display:inline-block */

</style>

六,

1,单行文字垂直居中

让line-height的像素等于height像素

全放在盒子里(div,要有宽高)

2,背景颜色 透明色

background-color: transparent;

3,背景图片

background-image: url(插入背景图片,类似img);

background-images: none   无背景图

4,背景平铺

background-repeat

 5,

background-position: center top;

背景图片位置-方位名词

1),指定两个值是方位名词,前后两个值顺序无关,比如left top和top left 效果一致

2)如果只指定了一个方位名词,另一个省略,则省略的默认居中对齐

        上 (top)中(center)下 (bottom)    左 (left)中(center)右(right)

  background-position:20px 40px;

背景图片位置-精确单位

1),参数值是精确坐标,第一个一定是x轴,第二个一定是y轴

2)如果只指定一个数值,则一定是x轴,另一个居中对齐

background-position: 20px center;

背景图片位置-混合单位:第一个一定是x轴,第二个一定是y轴

6,综合案例

    <style>
        /* 标题也能成为盒子 */
        h3{
            width: 118px;
            height: 40px;
            background-color: aqua;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(图片网址);
            background-repeat: no-repeat; 
            /* 不平铺 ,二者基本连着用*/
            background-position: left center;
            /* 注意空格 */
            text-indent: 1.5em;
        }

    </style>
</head>
<body>
    <h3>成长守护平台</h3>
</body>
</html>
<!-- 获取网页图片办法:打开检查,单击图片,找到源代码, -->
<!-- 在旁边的代码里找到图片网址,右键open in new tab,然后图片另存为文件里面 -->
<!-- 若图片不是居中对齐,则不在body里面插入图片,而是在head里面 -->

7,超大背景图

 <style>

        body{

            background-image: url(图片网址);

            background-repeat: no-repeat;

            background-position: top center;

        }

    </style>

8,背景附着(默认图片跟着背景走)

background-attachment :fixed; 图像不随着文字滚动

9,背景复合写法:(用空格隔开)

background:transparent url() no-repeat fixed center top;

background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置;

10,背景颜色半透明:background:rgba(0,0,0,0.3) 

1),最后一个参数是透明度,取值在0~1之间

2)背景半透明是盒子背景半透明,盒子里面内容不影响

这篇关于CSS总结3的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!