css 学习日记、持续更新中

Posted by admin 2021年7月19日 in 其他

列表中，往往最后一个元素想应用其他的特殊的样式，静态页面给最后一个元素一个class，还比较好实现，但是动态页面，元素不确定，给最后一个元素一个标识，比较麻烦，还得别人配合 :last-child伪类选择器非常实用,同样:first-child选择器是选择第一个元素，也很实用。

::after ::before 是在被选择元素的开头和结尾中插入内容的选择器，有时候也比较实用

<div class="list">
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
<p>这是第四段</p>
</div>
<style>
.list p{background-color: red;}
.list p:last-child {background-color: green;}
.list p:first-child {background-color: blue;}
.list p::after {
	content:"  结尾！";
}
.list p::before {
	content:"开始：";
}
</style>

!important 的使用
他是用于提高指定CSS样式规则的应用优先权；它被添加到CSS值的末尾以赋予它更多权重。
有时候比如咱们用的富文本编辑器，里面的元素有些默认的属性直接写在元素标签的style上了，因为元素上的样式的级别最高，不好通过样式来统一的修改样式，这个时候!important就派上用场了，他可以直接修改样式的优先级，请看下面的例子

<div class="img_box">
	<img id="face_img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-06-03%2F5ed769a931db1.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629256392&t=7648dc7358de301cb7d5df89684102cd" style="width:700px;height: 400px;">
</div>
<style>
#face_img { width: 50%; }
.img_box img { width: 80% !important; height: auto !important; }  /*优先使用此样式*/
</style>

display属性使用非常广，比如显示和不显示
display:inline的用法

<div>
    <p class="item">第一个段落</p>
    <p class="item">第二个段落</p>
    <p class="item">第三个段落</p>
</div>
<style>
.item {
    display:inline;  /*本来一个段落一行，可以通过inline属性使段落生出行内框 自然就显示到一块了*/
}
</style>

display的可选值及解释

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

background的属性

<div class="test_img"></div>
<div class="test_img_1"></div>
<style>
.test_img {
	width: 400px;
	height: 200px;
	background: #00FF00 url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-06-03%2F5ed769a931db1.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629256392&t=7648dc7358de301cb7d5df89684102cd') no-repeat;
}
.test_img_1 {
	margin: 30px 0;
	width:500px;
	height:250px;
	background-color: #ccc;
	background-image: url(http://test.thinkcmf.com/upload/test/bg1.jpg);
	background-repeat: no-repeat;
	background-position: -50px -30px; /* x% y% 第一个值是水平位置，第二个值是垂直位置。  可以是 top bottom left right 也可以是百分比，也可以是像素,左上角是0,0*/
}
</style>

可能的值

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

css