CSS总结3

2021/10/28 23:40:32

编程Tag： 选择器 css 元素 div 背景图片总结 background color

本文主要是介绍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 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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！