CSS总结3

最新推荐文章于 2024-10-31 14:03:24 发布

pipasound

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量133

点赞数 2

分类专栏： html+css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_61109509/article/details/120976253

版权

html+css 专栏收录该内容

13 篇文章 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，超大背景图