css学习day04

最新推荐文章于 2024-07-19 15:50:46 发布

sep.17

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量1k

点赞数 14

文章标签： css 学习前端

本文链接：https://blog.csdn.net/2201_75646248/article/details/139751920

版权

一.背景设置

1.背景透明

css3支持背景透明的书写语法是:background: rgba(0,0,0,0.3)

注意: 最后一个参数是alpha 透明度取值范围 0~1之间;

背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

2.背景的尺寸(background-size)

背景尺寸的属性:

1)使用像素,可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高）

2)contain 设置contain会自动设置整张图片的尺寸,保证图片始终完整出现在背景区域,但可能会留白

3)cover 设置cover时,会自动缩放比例,保证图片始终充满背景区域,如果有溢出部分则会被影藏,我们平时使用cover最多

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值
背景缩放	背景图片的尺寸	长度单位、cover、contain

二.字体图标

使用阿里巴巴矢量库

<!-- 引入css文件 -->
    <link rel="stylesheet" href="fonts/iconfont.css">

 <!-- 第二步:设置标签和class名 iconfont一定不能少 icon--meinv引入字体图标 -->
    <span class="iconfont icon-meinv
    "></span>

三.list-style属性

list-style 简写属性在一个声明中设置所有的列表属性。

可以按顺序设置如下属性：

list-style-type
list-style-position
list-style-image

1.list-style-type

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块

2.list-style-position

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

3. list-style-image

值	描述
URL	图像的路径。
none	默认。无图形被显示。

四.css三大特性

1.CSS层叠性

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

可以这样理解权重：这个选择器对于这个元素的重要性。

2. CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

1)所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

2)并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。

3. CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。

!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

即:

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的,如:

.nav li a span 0,0,1,3

五.盒子模型

盒子模型组成部分:content(width/height) padding(内边距) border(边框) margin(外边距)

1. 盒子边框（border）

<!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>
        .con {
            width: 200px;
            height: 100px;
            border: 10px solid red;
        }
        
        .con1,
        .con2,
        .con3 {
            width: 200px;
            height: 100px;
            margin: 30px;
        }
        /* 边框样式:虚线 dashed,点线 dotted,双实线 double */
        
        .con1 {
            /* 虚线 */
            border: 3px dashed red;
        }
        
        .con2 {
            /* 点线 */
            border: 3px dotted blue;
        }
        
        .con3 {
            /* 双实线 */
            border: 3px double yellow;
        }
    </style>
</head>

<body>
    <div class="con">momo</div>
    <div class="con1">边框样式1</div>
    <div class="con2">边框样式2</div>
    <div class="con3">边框样式3</div>
</body>

</html>

1.1边框的四个方向

<!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>
        .con1,
        .con2,
        .con3,
        .con4 {
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 20px;
        }
        
        .con1 {
            border-top: 2px solid red;
        }
        
        .con2 {
            border-right: 2px solid red;
        }
        
        .con3 {
            border-left: 2px solid red;
        }
        
        .con4 {
            border-bottom: 2px solid red;
        }
    </style>
</head>

<body>
    <!-- .co$&{边框$}*4 -->
    <div class="con1">边框1</div>
    <div class="con2">边框2</div>
    <div class="con3">边框3</div>
    <div class="con4">边框4</div>
</body>

</html>

1.2边框的综合设置

border : border-width || border-style || border-color

/*没有顺序*/   
border: 1px solid red;

1.3圆角边框

<!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>
        .con1,
        .con2,
        .con3 {
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 20px;
        }
        
        .con1 {
            border-radius: 10px;
        }
        
        .con2 {
            /* 左上 右上 右下 左下 */
            border-radius: 20px 10px 30px 40px;
        }
        
        .con3 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div class="con1">圆角边框1</div>
    <div class="con2">圆角边框2</div>
    <div class="con3">圆角边框3</div>
</body>

</html>

2.内边距(padding)

padding属性用于设置内边距。 是指边框与内容之间的距离。

.con {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 上下左右都是20 */
            padding: 20px;
            /* 上下 左右 */
            padding: 10px 20px;
            /* 上 左右 下 */
            padding: 10px 20px 30px;
            /* 上 右 下 左 */
            padding: 10px 20px 30px 40px;
        }

<div class="con">今天辛苦了</div>