CSS(1)

已于 2023-03-30 22:56:56 修改
阅读量178 收藏
点赞数
文章标签： css html 前端
于 2023-03-28 21:55:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64054032/article/details/129821110
版权

本身可以嵌入到HTML文件中编写，需要一个style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
            color: rebeccapurple;
            font-size: 100px;
//CSS的属性名命名方式都是这种带-的（脊柱命名）
//-这个符号在css中不能起到算术运算的作用

//上一行为CSS具体设置的属性，键值对，若干个属性都在一个{}中，
//属性之间用；来分割
//键和值之间使用:来分割

//color可以写成16进制形式，可以写成rgb/rgba形式，也可以直接写单词

        }
    </style>
    <div>
        你好 CSS
    </div>
</body>
</html>

//div本身是选择器，声明了针对页面上的哪一个元素或者那些元素生效

注意：css中只支持/* */这种方式的注释，不支持//这种形式的注释

上述使用css的方式叫做内部样式，还有一种内联样式，就是每个标签都可以有style属性，里面就可以写css，不需要写选择器，但是只针对当前元素生效，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        /* div{
            color: rebeccapurple;
            font-size: 100px;
        } */
    </style>
    <div style="color:green">
        你好 CSS
    </div>
</body>
</html>

当给一个元素分多种方式设置样式的时候，如果是不同的属性，彼此会叠加

相同属性下，style属性设置优先级要大于style标签的

还有一种外部样式，把css写到一个单独的.css文件中，通过link标签导入到html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<link rel="stylesheet" href="style.css">
//需要在head标签前写上link标签来使用外部样式，加上这个才能让css生效


</head>
<body>
    <style>
        /* div{
            color: rebeccapurple;
            font-size: 100px;
        } */
    </style>
    <div>
        你好 CSS
    </div>
</body>
</html>
div{
    color: blue;
    font-size: 200px;

}

外部样式和内联样式冲突，还是内联样式优先级高，外部样式和内部样式冲突，要看谁离元素更近。

CSS选择器

描述了你要选中页面中的哪个或是那些元素。{}的样式就是针对这些元素生效的

标签选择器

div{
    color:blue;
font-size:200px;
}

//写个标签名字，针对所有标签名字叫这个的标签生效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
    <style>
            div{
                color: red;
                font-size: 200px;
            }
            p{
                color: sandybrown;
                font-size: 100px;
            }
    </style>
    <div>咬人猫</div>
    <div>咬人猫</div>
    <p>玉子</p>
    <p>玉子</p>
</body>
</html>

 类选择器

 类选择器允许让多个元素引用同一个类（为CSS选择器中最灵活的，最常用的方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
    <style>
            .one {
                color: aqua;
                font-size: 200px;
            }
    </style>
    <div class="one">咬人猫</div>
    <div>咬人猫</div>
    <p>玉子</p>
    <p>玉子</p>
</body>
</html>

 id选择器

每个元素都有一个id属性，值应该要在页面中是唯一的

使用id选择器来选中到对应的元素上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
    <style>
            #the-id {
                color: blue;
                font-size: 100px;
            }

    </style>
    <div>咬人猫</div>
    <div>咬人猫</div>
    <p id="the-id">玉子</p>
    <p>玉子</p>
</body>
</html>

 通配符选择器

可以选择页面中的所有元素，可以让页面所有元素都被选中，通常用于改掉 浏览器的默认样式（例如文本 默认颜色 字体大小 p 默认的段落间距）

*{
}

后代选择器

<ul>
    <li>
        <div></div>
    </li>
</ul>

//此时ul是li的父标签，li是div的父标签

就是在指定的元素里面去筛选后代元素 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    ul li{
        color: red;

//先选择ul合集 然后选择li下的标签，也可以使用.one的形式
        
    }
</style>
</head>
<body>
    <ul>
        <li>咬人猫</li>
        <li>咬人猫</li>
        <li>咬人猫</li>
    </ul>

    <ol>
        <li>咬人猫</li>
        <li>咬人猫</li>
        <li>咬人猫</li>
    </ol>

</body>
</html>

 子选择器

和后代选择器不同的是，只是选择儿子而不选择孙子及其后面

<style>
    ul>li{
        color: red;
    }

</style>

并集选择器

针对多个不同的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    div, p{
        color: red;
        font-size: 200px
    }
    


</style>
</head>
<body>
    <div>咬人猫</div>
    <div>咬人猫</div>
    <div>咬人猫</div>

    <p>兔子</p>
    <p>兔子</p>
    <p>兔子</p>

</body>
</html>

伪类选择器

选中元素的不同状态

hover 鼠标放上去

active 鼠标按下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    div{
        font-size: 100px
    }
    div:hover{
        color: red;
    }
    


</style>
</head>
<body>
    <div>咬人猫</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    div{
        font-size: 100px
    }
    div:hover{
        color: red;
    }
    div:active{
        color: burlywood;
    }
    


</style>
</head>
<body>
    <div>咬人猫</div>
</body>
</html>

设置文本对齐：

div{
     text-align: center;
}
//上述为居中对齐，还有左对齐和右对齐

 文本装饰

用于加上上划线，下划线，中划线


    <style>
        div{
        text-decoration: underline; //下划线
        text-decoration: overline;  //上划线
        text-decoration: line-through; //中划线
        }
    <style>

文本缩进

扩大第一行字到页边距的距离

    <style>
        div{
            text-indent: 10px;
            //这里可以把10px换成2em 就是指往内缩进2个文字的距离
        }
    </style>
</head>
<body>
    <div>
        这是一段测试话
        这是一段测试话
        这是一段测试话
        这是一段测试话
    </div>
    
</body>

 设置文字的行高

    <style>
        div{
            line-height: 80px;
        }
    </style>

 设置背景图片

    <style>
        div{
            width: 100000px;
            height: 100000px;
            background-image: url(78551403_p0.jpg);

        }
    </style>
</head>
<body>
    <div>
    </div>
    
</body>

但是图片现在是平铺的，是铺满的 

    <style>
        div{
            width: 100000px;
            height: 100000px;
            background-image: url(78551403_p0.jpg);
            background-repeat: no-repeat;
            //使用no-repeat来取消平铺
        }
    </style>

//background-repeat:repeat-y 在y方向平铺
//background-repeat:repeat-x 在x方向平铺

 

单个图片在左上角，我们把它设置到中间位置

    <style>
        div{
            width: 5000px;
            height: 5000px;
            background-image: url(78551403_p0.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            //这里面可以写center left right top bottom来描述位置
            //也可以写具体的数值来表示坐标（第一个是纵坐标 第二个是横坐标）
            //坐标系原点在左上角 往右为x轴 往下为y轴
        }
    </style>

 我们再来设置背景图的大小

    <style>
        div{
            width: 5000px;
            height: 5000px;
            background-image: url(78551403_p0.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100px 200px;
            //size后面写contain和cover可以让图片变大，尽可能适应div的尺寸
        }
    </style>

让图片随着窗口大小调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 100%;
            height: 100%;
 //width height后面写100%就是让图片和父级也就是body的大小一样宽，也就是浏览器窗口
            background-image: url(78551403_p0.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100px 200px;
        }

        html,body{
            height: 100%;
//需要再给html和body设置一个大小
        }
    </style>
</head>
<body>
    <div>
    </div>
    
</body>
</html>

圆角矩形

    <style>
        button{
            width: 200px;
            height: 200px;
            border: none;
            background-color:royalblue ;
            color: white;

            border-radius: 10px;
//这里px的值越大 角就越圆
        }
    </style>
</head>
<body>
    <button>
        这是按钮
    </button>
    
</body>

元素的显示模式

块级元素：独占一行的 例如div h1 p table tr

行内元素：不独占一行的 例如 span a u b strong

可以用display属性针对行内/块级元素进行转化，大部分都是行内元素转换成块级元素，而不是块级元素转换成行内元素

    <style>
    a{
        display: block;
    }
    </style>
</head>
<body>
    <a href="#">你好</a>
    
</body>

display可以让元素隐藏

思鱼不是死鱼
关注
css入门之CSS1、CSS2、CSS3、CSS4发展历程
蛐蛐的博客
07-11 2099
CSS 最初于 1996 年发布，由用于添加字体属性的属性组成例如字体和文本的强调颜色、背景和其他元素。CSS2 于 1998 年发布，为其他媒体类型添加了样式，以便可以用于页面布局设计。CSS3 于 1999 年发布，其中添加了演示样式属性，允许从文档构建演示文稿。CSS3 将其规范划分为许多单独的模块，这使得 CSS3 更易于处理。借助 CSS3，设计人员现在可以使用自定义字体，例如 Google Fonts 和 Typecast 中可用的字体。在 CSS 和 CSS2，设计人员只能使用“网络安全字体”
CSS滚动动画
liuhao9999的博客
06-28 2268
CSS滚动动画
CSS之垂直对齐
qq670471201的博客
11-19 390
CSS之垂直对齐 vertical-align: baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的底端与行中最低的元素...
css设置图片左上角加文字
FinelyYang的专栏
12-27 1288
4. absolute：元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，那么相对于最初的包含块（通常是body元素）。在上面的例子中，`.container`是一个相对定位的元素，`.box`是一个绝对定位的元素，并且相对于`.container`元素进行定位。通过设置top和left属性，我们可以调整`.box`元素在`.container`内的位置。请注意，上述代码中的`.container`是用来包裹图片和文本的父容器的类名，`.text`是用来添加文字的元素的类名。
css里的那些事儿
weixin_30300225的博客
07-07 124
一，background-position：（图片定位） 三种写法： 　　1）：按％比，左上角最小（0％，0%），右下角最大（100%，％100）； 　　2）：（x,y）左上角最小（0，0），右下角最大（max，max）； 　　3）top，center，left，right，bottom；二，background-clip: 　　1，包含那一部分的值：border；paddi...
css图片上面显示文字
qq_43101834的博客
02-01 1602
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { width: 300px; height: 300px; padding: 10px; background-color: #0087F1; } .imgbox
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
css1css1css样式css1css1css1css1css1css1css33333
08-08
css1css样式css1css1css1css1css1css1css33333
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
DIV CSS鼠标经过悬停在图片上时图片上方显示文字
热门推荐
学无止境
07-12 1万+
纯div+css实现第一张图片没有文字内容，鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理： 首先我们设置一个盒子对象，并且将图片使用style标签内设置为CSS背景图片，同时设置该对象html a超链接display:none隐藏，该超链接锚文本内放好文字内容，最后设置鼠标悬停经过整个对象时候显示超链接内容。 需要注意是，我们使用了css
通过CSS3使图片从左上角移动到右下角
Mr_Yan的博客
04-24 9754
去网上着了好久都没找到，后来想到了cacl计算属性才解决 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, ini
使用CSS给图片加上角标记
南京小龙虾的博客
04-25 2943
实现后的效果，图片左上角有了标记信息 主要是通过定位和伪类实现 左上角代码 <html> <div class="wrap"> <img width="200" height="200" src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></img> <!-- 标记信息 --> <p class="mark"> .
html+css 在图片上添加文字
weixin_30602505的博客
09-04 6418
html <view class="container"> <image class="" src="{{book.image}}"></image> <view class="description"> <text class="title">{{book.title}}<...
CSS——弹性盒子布局（display: flex）
懒羊羊大王的博客
09-14 998
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
基于less和scss 循环生成css
最新发布
k0933的博客
09-14 213
【代码】基于less 循环生成css。
css总结（记录一下...）
tzz_1122的博客
09-11 335
text-stroke-color:设置文字边界填充颜色。text-fill-color:设置文字内部填充颜色。text-stroke-width:设置文字边界宽度。ellipsis:显示省略符号来代表被修剪的文本。break-word:允许在单词内换行。normal:使用浏览器默认的换行。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 536
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
"学习网页设计：CSS1至CSS3版本简介与应用
CSS1于1996年发布，并于1999年进行了修订。CSS2于1999年发布，添加了对媒介和可下载字体的支持。而CSS3计划将CSS划分为更小的模块，引入了众多新的功能和特性，例如圆角、阴影、动画等。 使用CSS的优势在于可以将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值