css基础学习笔记

染星_

已于 2022-03-15 11:40:49 修改

阅读量326

点赞数 2

文章标签： css 学习

于 2022-03-08 18:36:15 首次发布

本文链接：https://blog.csdn.net/m0_67813526/article/details/123359951

版权

Css入门

css的书写规则

选择器

{

样式属性1：样式属性值1

样式属性3：样式属性值3

}

css（层叠样式表）的三种引入方式

优先级：行内样式>内部样式>外部样式

内部样式与外部样式冲突就近原则

行内样式

采用style属性引入样式

范围：仅仅是对当前style属性所在的标签有效

缺点：和框架没有分离

    <div style="background-color: blueviolet;">我是div</div>

内部样式

采用style标签引入样式

范围：当前页面所有能被选择器选到的标签

和框架半分离

<style>

        span {
           background-color: yellow; 
        }

        div {
            color: green;
            background-color: greenyellow;
        }
    </style>

外部样式

通过link标签引入

范围：所有使用link标签引入了样式表的页面

和框架完全分离

    <link rel="stylesheet" href="./03.样式表.css">

字体样式

设置字体颜色十六进制（六位或三位）：#123456

rgb（0~255）：rgb（44，88，200）

rgba（44，88，200，1）最后一位是透明度（0~1）

设置字号大小默认不能小于12p

设置文字粗细 lighter normal（默认值） bold bolder 100~900(整百)

设置字体样式 normal（默认值）倾斜：italic oblique

字体综合设置 font （font-style font-weight font-size font-family）

顺序不能改，font-size和font-family必须有

设置字体英文不需要" "

div {
            /* 设置字体颜色 pink 六位或者三位十六进制 rab（0~255）*/
            color: rgba(44, 88, 200,1);

            /* 设置字号大小 默认不能小于12px*/
            font-size: 20px;

            /* 设置文字粗细 lighter normal（默认值）bold  100~900*/
            font-weight: 400;

            /* 设置字体样式 normal（默认值） italic oblique*/
            font-style: oblique;

            /* 设置字体 */
            font-family: "华文彩云";
        }

        h1 {
            font-weight: lighter;
        }

单位

px（像素）

百分比：相对于父元素的宽高

em：1em = 1font-size

div {
            /* 设置元素宽度 */
            /* width: 200px; */
            /* width: 50%; */

            font-size: 22px;
            width: 10em;
            /* 设置元素高度 */
            height: 200px;
            background-color: pink;
        }

        p {
            background-color: greenyellow;
            width: 50%;
        }

文本样式

设置文本位置 text-align: center left right justify（两端对齐）

文本修饰 text-decoration: overline line-through undeline none

文本阴影 text-shadow: 阴影水平距离垂直距离模糊度颜色

首行缩进 text-indent：常以em为单位，1em为一个汉字宽度

设置文本行高 line-height: 30px

行高与盒子高度一样，可垂直居中

字间距 letter-spacing：字符与字符之间的空白（可设置英文，指字母之间）

单词间距 word-spacing：英文单词之间的间距

自动换行 word-break：normal 浏览器默认

break-all 允许单词内换行

keep-all 只能在半角空格或连字符处换行

 h2 {
            /* 设置文本的排列方式 left center right justify（两端对齐）*/
            text-align: left;

            /* 文本修饰 overline line-through underline none*/
            text-decoration: overline;

            /* 文本阴影 阴影水平距离 阴影垂直距离 阴影模糊距离 阴影颜色*/
            text-shadow: 5px 5px 3px red;
        }

        h3 {
            
            text-align: center;
            text-decoration: line-through red;
        }

        h4 {
            
            text-align: right;
            text-decoration: underline green;
        }

        p {
            text-align: justify;
            /* 设置文本的行高 */
            line-height: 20px;
        }

        a {
            text-decoration: none;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            /* 单行文本垂直居中 */
            line-height: 200px;
        }

选择器

通配符选择器能够选中当前页面的所有标签 *

* {
            /* color: hotpink; */
            /* 消除浏览器的默认内外边距 */
            margin: 0;
            padding: 0;
        }

标签选择器以标签名作为选择器

能选中所有和选择器同名的标签

不能进行差异化设置

div {
            width: 200px;
            height: 200px;
            background-color: khaki;
        }

id选择器以id名作为选择器 #id名

选中id名与id选择器相同的元素

当前页面id名不能重复

 #mydiv {
            color: lightcoral;
        }

类选择器以类名作为选择器

.类名

选中类名和类选择器相同的元素

.myTag {
            font-weight: bold;
        }

        .myTag2 {
            text-decoration: underline;
        }

属性选择器：

E【attr】选择存在attr属性的元素

E【attr=val】选择属性值完全等于val的元素

E【attr*=val】选择属性值包含val在任意位置的元素

E【attr^=val】选择属性值包含val在开始位置的元素

E【attr$=val】选择属性值包含val在结束位置的元素

复合选择器：

后代选择器

div span

子元素选择器

div>span

兄弟选择器 +：选择后面相邻的一个兄弟标签

~：选择后面所有的兄弟标签

伪类选择器 :hover 当鼠标移到元素上的状态时

.box:hover {
            background-color: pink;
        }

        .outer:hover>.box {
            height: 200px;
        }

::before ::after：结合content一起使用

p::before {
            content: "我会出现在最前面";
            background-color: green;
        }

        p::after {
            content: "我会出现在最后面";

            background-color: green;
        }

结构位置伪类选择器

:first-child :last-child :nth-child（n）

标签的显示模式

块元素 block

h1~h6 p div ul ol li...

独占一

可以设置宽高

若不设置宽高宽度默认父元素的100% 高度由内容撑开

行内元素 inline

a span...

和相邻行内元素或行内块排成一排

不能设置宽高

宽度和高度都由内容撑

行内块元素 inline-block

img input

和相邻行内元素或是行内块排成一排

可以设置宽高

img不能设置为行内元素（img本身有宽高）

/* 修改元素的显示模式 */
/* display: inline-block; */
 display: none;

标签的嵌套规则

块元素可以嵌套任意元素或文本但是文本类型的块元素（p ）只能嵌套行内元素或文本

行内元素只能嵌套行内元素但是a标签可以嵌套任意元素或文本（a标签不能嵌套a标签）

盒子模型：

在标准盒子模型下，width和height是设置的内容部分的宽高

可见宽度：设置宽度+水平方向的内边距+水平方向的边框

会将每一个元素都视作一个盒子模型

四要素：content（内容）

padding（内边距）

border（边框）

margin（外边距）

内边距设置内容到边框之间的距离

边框边框宽度边框样式（solid单实线 dotted点线 dashed虚线 double双实线）边框颜色

圆角边框

border-radius: 50%;

margin 设置元素与元素之间的间距

可以取1-4个值，取值情况与内边距一样

margin: 30px;

margin-right: auto; 右边距最大 auto仅对于水平方向的外边距有效

margin: 0 auto; 利用外边距让元素水平居中

只对块元素有效

设置了宽度

<!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>CSS</title>
    <style>
        *
        {
            margin: 0;
        }
        div
        {
            height: 300px;
            width: 300px;
            background-color: black;
            border: 20px solid yellow;
            padding: 20px;
            margin: 20px;
        }
        span
        {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            margin: 20px;
            border-radius: 20px 30px 40px 50px;
        }

    </style>
</head>
<body>
    <div>
        <span>hhhhh</span>
    </div>
    
</body>
</html>

背景图

设置背景图

设置背景图大小 100px 200px contain（保证填充） cover（保证图片完整显示）

是否重复 repeat repeat-x repeat-y no-repeat

背景图的位置（水平方向垂直方向） 50px 50px top bottom center left right

背景附着 background-attachment：scroll 背景图像随内容而动

fixed 背景图像固定

背景简写background（颜色图像平铺滚动位置）

.box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            background-image: url(../image/u=4211515912\,581064100&fm=26&fmt=auto.webp);

            /* 设置背景图大小 100px 100px contain cover*/
            background-size: 100px 100px;
            /* 是否重复 repeat  repeat-x repeat-y no-repeat*/
            background-repeat: no-repeat;
            /* 背景图的位置  50px 50px  top bottom center left right*/
            background-position: center center;
        }

溢出隐藏overflow

溢出部分处理 visible不处理 hidden隐藏溢出部分 scroll auto下拉调节

.outer {
            width: 200px;
            height: 200px;
            background-color: wheat;
            /* 溢出部分处理 visible hidden scroll auto*/
            overflow: auto;
        }

2d转换

平移 transform: translate(10px,10px);

旋转 transform: rotate(45deg);

倾斜 transform: skew(30deg);

缩放 transform: scale(1.5);

<!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: 100px;
            height: 100px;
            margin: 10px auto;
            transition: all 3s;
        }

        .box1 {
            background-color: violet;
        }

        .box1:hover {
            /* 平移 */
            transform: translate(-10px,10px);
        }


        .box2 {
            background-color: lightgreen;
        }

        .box2:hover {
            /* 旋转 */
            transform: rotate(-180deg);
        }

        .box3 {
            background-color: lightblue;
        }

        .box3:hover {
            /* 旋转 */
            transform: skewY(45deg);
        }

        .box4 {
            /* 倾斜 */
            background-color: lightsalmon;
        }

        .box4:hover {
            /* 缩放 */
            transform: scale(1.5);
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

定位：可以将任意指定的元素放置页面的任意位置

相对定位

绝对定位

固定定位

开启相对定位

开启了相对定位但是没有给偏移量的元素位置不会改变

开启了相对定位的元素是相对于原来所在的位置作为原点进行定位

开启了相对定位的元素会提高层级

提高层级层级数越高，在越上面只有有定位的元素才能提高层级

.box2 {
            background-color: lightcoral;
            position: relative;
            top: 100px;
            left: 100px;
            z-index: 2;
        }

开启了绝对定位

开启绝对定位的元素没有设置偏移量之前不会移动

会脱离文档流

当元素脱离文档流之后

块级元素的宽度由文档流撑开

行内元素可以设置宽高

相对于离它最近的有定位的祖先元素的左上角定位

如果都没有就相对于屏幕的左上角

 .box2 {
            background-color: lightcoral;
            position: absolute;
            top: 0;
            left: 0;
        }

父相子绝

.outer {
            width: 400px;
            height: 400px;
            border: 1px solid blue;
            position: relative;
        }
.inner {
            position: absolute;
            top: -2px;
            left: -5px;
        }
/* 利用相对定位进行完美居中 */
.pic {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 垂直方向的居中 */
            top: 50%;
            margin-top: -100px;
            /* 水平居中 */
            left: 50%;
            margin-left: -100px;
        }

开启了固定定位

开启了固定定位的元素会脱离文档流

相对于屏幕左上角进行定位

会固定在屏幕上，不会随滚动条的滚动而滚动

 .box2 {
            background-color: lightcoral;
            position: fixed;
            top: 0;
            left: 0;
        }

动画

定义动画

<style>
@keyframes mybox

        {from

            {

                margin-left: 0;

                background-color: hotpink;

            }

            to

            {

                margin-left: 200px;

                background-color: darkturquoise;

                transform: rotate(90deg);

            }

}
</style>

引用的动画持续的时间重复次数是否倒放

 .box2 {
            width: 132px;
            height: 271px;
            animation: walk 1s infinite step-end;
        }

弹性布局

开启弹性布局 display: flex;

规定了主轴方向（弹性项目的排列方向）flex-direction

row水平朝右

row-reverse水平朝左

column垂直朝下

column-reverse垂直朝上

是否提行 flex-wrap

nowrap不提行

wrap提行

wrap-reverse与wrap相反的排列方式

弹性项目在主轴上的排列方式 justify-content

flex-start 从行首起始位置开始排列

flex-end 从行尾位置开始排列

center 居中排列

space-around 均匀排列每个元素，每个元素周围分配相同的空间

space-between 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点

space-evenly 均匀排列每个元素，每个元素之间的间隔相等

stretch 均匀排列每个元素，'auto'-sized 的元素会被拉伸以适应容器的大小

弹性项目在交叉轴上的排列方式 align-items

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 600px;
            height: 600px;
            border: 1px solid green;
            /* 开启弹性布局 */
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            align-items: center;
        }

        .outer div {
            width: 98px;
            height: 98px;
            background-color: yellow;
            border: 1px solid black;
            display: inline-block;
        }
    </style>
</head>

<body>
    <!-- 弹性容器 -->
    <div class="outer">
        <!-- 弹性项目 -->
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
</body>

</html>

染星_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
css基础学习笔记

Css入门css的书写规则选择器 { 样式属性1：样式属性值1 样式属性3：样式属性值3 }css（层叠样式表）的三种引入方式优先级：行内样式>内部样式>外部样式内部样式与外部样式冲突就近原则行内样式采用style属性引入样式范围：仅仅是对当前style...
复制链接

扫一扫