CSS(3)

最新推荐文章于 2024-08-26 21:00:00 发布

小白一枚2号

最新推荐文章于 2024-08-26 21:00:00 发布

阅读量434

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_79590957/article/details/134908570

版权

背景属性：

1.bgi:即：background-image，背景图（默认平铺（复制）效果），网页中使用装饰性的图片效果。属性值：url(图片路径)

2.bgr：即：background-repeat，背景图平铺方式。属性值：no-repeat，不平铺；repeat，平铺（默认）；repeat-x(y)，向x(y)轴方向平铺，x水平，y竖直。

3.bgz：即：background-size，背景图大小。属性值（在no-repeat的情况下）：contain，等比例缩放背景图片以求图片完全装入背景区，可能背景区部分空白；cover，等比例缩放背景图以求图片完全覆盖背景区，可能图片部分看不见；100%，缩放背景图以求背景图和背景区完全嵌合，可能图片会变形。

4.bgp：即：background-position，图片位置。属性值（在no-repeat下）：有left，center，right（水平方向），top，center，bottom（垂直方向）和两个数字（单位px），可正（向背景区移动）可负（向背景区外移动）。

5.bga：即：background-attachment，图片固定。属性值：fixd。

显示模式：

1.块级元素：block；独占一行，默认宽度是父级的100%，添加宽高属性生效，典型：div。

* div - 常用块级
 
* dl - 定义列表
 
* h1 - h5 - 标题1-6
 
* hr - 水平分隔线
  
* ol - 排序表单
 
* p - 段落
 
* table - 表格
 
* ul - 非排序列表

2.行内元素：inline；一行存在多个，尺寸由内容撑开（设置宽高无效），只能设置水平方向的外边距（margin），可设置外边距（padding），典型：span。

3.行内块：inline-block：一行存在多个，默认尺寸由内容决定，设置宽高生效，典型：img。

4.显示模式转换：display: block(inline)(inline-block);

CSS(3)新增的选择器：

1.ul li:first-child{....;}选中列表中第一个li标签。

2.ul li:last-child{....;}选中列表中最后一个li标签。

3.ul li:nth-child(N){...;}选中列表中第N个li标签；N=2n 偶数标签，N=2n+1/2n-1奇数标签，N=5n，5的倍数的标签；N=n+5,5以后的标签；N=-n+5，第5个以前的标签。

伪对象选择器：

E::before/E:before；E::after/E:after;

1.E::before/E:before见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        div::before {
            content: "老鼠";
        }
        div::after {
            content: "大米>";
        }
    </style>
</head>
<body>
    <div>爱</div>
</body>
</html>

content:插入文本，且content必须存在

content:url(./ughsfyg.jpg);插入图片

小白一枚2号

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
CSS(3)

属性值（在no-repeat下）：有left，center，right（水平方向），top，center，bottom（垂直方向）和两个数字（单位px），可正（向背景区移动）可负（向背景区外移动）。N=2n 偶数标签，N=2n+1/2n-1奇数标签，N=5n，5的倍数的标签；N=-n+5，第5个以前的标签。repeat-x(y)，向x(y)轴方向平铺，x水平，y竖直。一行存在多个，尺寸由内容撑开（设置宽高无效），只能设置水平方向的外边距（margin），可设置外边距（padding），典型：span。
复制链接

扫一扫