css 知识笔记

最新推荐文章于 2024-07-10 16:12:49 发布
最新推荐文章于 2024-07-10 16:12:49 发布
阅读量465 收藏
点赞数
分类专栏： 教学笔记 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q2060951710/article/details/121254917
版权

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
<!--写css的代码 style-->
<!--语法
        选择器{
        声明1：
        声明1：
        }
每一个语言最好于分号结尾
-->
    <style>
    h1{
        color: crimson;
    }

    </style>

</head>
<body>
<h1>我是标签</h1>

</body>
</html>

link:css引入css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
    <!--写css的代码 style-->
    <!--语法
            选择器{
            声明1：
            声明1：
            }
    每一个语言最好于分号结尾
    -->
    <link rel="stylesheet" href="css第一个程序/css01.css">
</head>
<body>
<h1>我是标签</h1>

</body>
</html>

css的优势

内容和表现分离

网页结构表现统一 可以重复使用

样式丰富

容易被搜索引擎收录

div 标签

块标签

用于html的容器

和css一起使用 继续文档布局

css的n中导入方式

行内

<body>
<h1>我是标签</h1>
<!--行内样式在标签元素中编写一个 style 属性 编写样式-->
<h1 style="color: crimson">
    奥特曼
    </h1>
</body>

外部

链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
    <!--写css的代码 style-->
    <!--语法
            选择器{
            声明1：
            声明1：
            }
    每一个语言最好于分号结尾
    -->
    <link rel="stylesheet" href="css第一个程序/css01.css">
</head>
<body>
<h1>我是标签</h1>

</body>
</html>

导入式

css2.1

<style>@import url("文件")</style>

内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
<!--写css的代码 style-->
<!--语法
        选择器{
        声明1：
        声明1：
        }
每一个语言最好于分号结尾
-->
    <style>
    h1{
        color: crimson;
    }

    </style>

</head>
<body>
<h1>我是标签</h1>

</body>
</html>

优先级

就近原则 谁离的作用代码越近

选择器

作用：选择页面上的某一个汉族某一类元素

基本选择器

标签选择器 选择一类标签 标签{}

类选择器 class 选择所有class属性一致的 .类{}

id选择器 全局唯一 .id名{}

id选择器 >类选择器> 标签选择器

标签选择器

    <style>
<!--标签选择器 会选择到页面上使用的标签的元素-->
        h1{
            color: #a048a7;
            background: #24b386;
            border-radius: 23px;
        }
        p{
            font-size: 99px;
            color: green;
            color: #a048a7;
            background: #24b386;
            border-radius: 23px;
        }
    </style>

类选择器class

好处可以多个标签归类是同一个class可以复用

<标签名 class=“类1 类2” ></标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--   类选择器的格式.class的名称{}
        好处可以多个标签归类是同一个class可以复用-->
        .sy{
            color: #24b386;
        }
        .yy{
            color: #2343;
        }
    </style>
</head>
<body>
<h1 class="sy">淑钰</h1>
<h1 class="yy">钰钰</h1>
<h1 class="sy">钰钰很帅</h1>
<p class="yy">我是个内容</p>


</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
        color: #a048a7;
    }.SS{
        color: green;
            }


    </style>
</head>
<body>
<h1 id="钰钰">标签1</h1>
<h1 CLASS="SS">标签2</h1>
<h1 class="SS">卍卐</h1>
<h1>标签4</h1>

</body>
</html>

id选择器 >类选择器> 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
        color: #a048a7;
    }.SS{
        color: green;
            }

    h1{
        color: aqua;
    }
    </style>
</head>
<body>
<h1 id="钰钰">标签1</h1>
<h1 CLASS="SS">标签2</h1>
<h1 class="SS">卍卐</h1>
<h1>标签4</h1>

</body>
</html>

并集选择器

选择器1 选择器2 选择器3{

}

全局选择器

一般用于清空边距和间距

*{

}

层次选择器

后代选择器

   body p{
            background: #24b386;
        }

子选择器

body>p{
            color: crimson;
        }

相邻选择器（对下 下一个 同类型）

.a1+p{
            background: #a048a7;
        }

通用选择器(对下 所有同类型）

        .a1~p{
            background: #a048a7;
        }

结构伪类选择器

伪类：条件（或者特效）

特效

a:hover{
            background: crimson;
        }

条件`

选择器功能描述
E:first-child作为父元素的第一个子元素的元素 E
E:last-child作为父元素的最后一个子元素的元素 E
E F:nth-child(n)选择父级元素 E 的第 n 个子元素 F ，（ n 可以是 1 、 2 、 3 ），关键字为 even 、 odd
E:first-of-type选择父元素内具有指定类型的第一个 E 元素
E:last-of-type选择父元素内具有指定类型的最后一个 E 元素
E F:nth-of-type(n )选择父元素内具有指定类型的第 n 个 F 元素
    <style>
        /*避免使用class id*/
        /*ul  第一个*/
        ul li:first-of-type{
            background:darkblue;
        }
        /*最后一个*/
        ul li:last-child{
            background: 2px,darkgoldenrod;
        }
    /*选择p1：定位父元素（body） 选择第一个元素（p）*/
        p:nth-child(1){
            /*选择p元素的父元素 选择第一个：并且是第一个元素才生效*/
            background: #a048a7;
        }
        p:nth-child(2){
            /*选择父元素 下p元素的第二个 类型*/
            background: crimson;
        }
    </style>

属性选择器

相当于id+class

属性名：属性名=属性值（正则）
=为绝对等于
*=为包含这个元素
^=以这个开头
$=以这个结尾

选择器类 型功能描述
E F后代选择器选择 E 后面的所有 F 后代
E>F子选择器选择 E 后面的儿子
E+F相邻兄弟选择器选择 E 相邻 F 兄弟（相邻的下一个兄弟）
E~F通用兄弟选择器选择 E 相邻 所有 F 兄弟（ 所有兄弟姐妹）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .bar a{

    }
        /*属性名：属性名=属性值（正则）*/
        /* =为绝对等于*/
        /* *=为包含这个元素*/
        /* ^=以这个开头*/
        /* $=以这个结尾*/

        /* 存在id的 */
        a[id]{
            background: #5151ad;

        }
        /*id为4的*/
        a[id="4"]{
            background: green;
    }
        /*capss为4的*/
        a[class*="23"]{
            background: crimson;
        }
        /*选择href 3开头的元素*/
        a[href^="3"]{
            background: #a048a7;
        }
        a[class$="x"]{
            background: aqua;
        }
    </style>
</head>

<body>

<p class="bar">
    <a href="23.com"class="d1"id="1">1</a>
    <a href="34.com" class="_b1" title="ws">2</a>
    <a href="2334.com"id="2">3</a>
    <a href="4.com"id="4">4</a>
    <a href="233.com" class="23">5</a>
    <a href="2333.com" class="23">6</a>
    <a href="2333.com" class="7x">6</a>
</p>
</body>
</html>

美化网页

有效的传递页面信息

美化网页 页面漂亮 才能吸引用户

凸显网页的主题

提高用户体验

span 标签

行内标签 没有特定含义 改变局部样式 设置文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            font-size: 20px;
            dominant-baseline: alphabetic;
            background: #24b386;
        }
    </style>
</head>
<body>
    学习<span id="d1">java</span>

</body>
</html>

字体样式font

字体 font-family: 楷体;
字体大小 font-size: 50px;
字体粗 font-weight: bold; 也可以用px
字体颜色 color: #24b386;
边距 margin:0px;
字体细 font-weight: lighter;

属性名含义举例
font-family设置字体类型font-family:" 隶书 ";
font-size设置字体大小font-size:12px;
font-style设置字体风格font- style:italic ;
font-weight设置字体的粗细font- weight:bold ;
font在一个声明中设置所有字体属性font:italic bold 36px " 宋体 ";

weight 属性

值说明
normal默认值，定义标准的字体
bold粗体字体
bolder更粗的字体
lighter更细的字体
100 、 200 、 300 、 400 、 500 、 600 、 700 、 800 、 900定义由细到粗的字体 400 等同于 normal ， 700 等同于 bold

背景background

背景颜色 background-color: #24b386;

背景图像 background-image:url(路径)

repeat 水平和垂直平铺

no-repeat 不平铺

repeat-x只水平平铺

repeat-y只垂直平铺

背景大小控制

background-size

属性值描述
auto默认值，使用背景图片保持原样
percentage当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover整个背景图片放大填充了整个元素
contain让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
定位

background-positon属性

值含义
Xpos Ypos单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y%使用百分比表示背景的位置
X、Y方向关键词水平方向的关键词： *left、center、right 垂直方向的关键词： top、center、bottom **
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*<!--
 字体 font-family: 楷体;
 字体大小 font-size: 50px;
 字体粗 font-weight: bold; 也可以用px
 字体颜色  color: #24b386;
 边距  margin:0px;

 字体细  font-weight: lighter;
 */     h1{
    font-size: 50px;
}
        body{
            font-family: "BERNIER Regular",楷体;

            color: #24b386;
        }
        .p1{
            font-weight: bold;
        }
        .p2{
            font-weight: lighter;
        }
    </style>
</head>
<body>
<h1>作文</h1>
<p class="p1">第一作文网提供：高中作文大全，高中作文800字范文，
</p><p class="p2">高中优秀作文800字，高中高考作文题目，高中作文素材大全等。
</p>
<p>Hello Everyone, My name is Xiao Ling from class four Grade eight, I'm 14 ye</p>
</body>
</html>

font:字体粗细 大小 行高 字体;

​ font: oblique 10px/12px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        P{
             /* 字体粗细 大小 行高 字体*/
            font: oblique 10px/12px "楷体";
        }
    </style>
</head>
<body>
<p>测试</p>
</body>
</html>

vertocal-alihn属性：muddle top

文本样式text

居中 text-align: center;
右靠 text-align: right;
左靠 text-align: left;
首行缩进 text-indent: 2em;或者是px

值说明
left把文本排列到左边。默认值：由浏览器决定
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果

阴影 text-shadow:(颜色 x y 阴影半径)

行高 line-height: 20px; 单行上下居中 line-height=height

文本装饰

text-decoration属性

值说明
none默认值，定义的标准文本
underline设置文本的下划线
overline设置文本的上划线
line-through设置文本的删除线

文体图片水平对齐 vertical-align:middle;

去除项目符号 list-style:none；

属性含义举例
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text- align:right ;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text- decoration:underline ;

列表样式*list-style

值说明语法示例
none无标记符号list-style-type:none;
disc实心圆，默认类型list-style-type:disc;
circle空心圆list-style-type:circle;
square实心正方形list-style-type:square;
decimal数字list-style-type:decimal
伪类

**a:hover {color:#FF00FF;} 鼠标悬浮颜色 **

伪类名称含义示例
a:link未单击访问时超链接样式a:link{color:#9ef5f9;}
a:visited单击访问后超链接样式a:visited {color:#333;}
a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}
a:active鼠标单击未释放的超链接样式a:active {color:#999;}
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */


        /*默认*/
     a{
         text-decoration: aqua;
         color: #5151ad;
     }
        /*鼠标悬浮颜色*/
        a:hover{
            color: #ff00f0;
            font-size: 50px;
        }
        /*鼠标点击颜色*/
        a:active{
            color: green;
        }

渐变linear

属 性 名IEFirefoxChromeOperaSafari
Gradient10+19.0+26.0+12.1+5.1+

linear-gradient ( position, color1, color2,…)

linear-gradient ( 方向, 颜色1, 颜色2,…)

列表

值说明语法示例
none无标记符号list-style-type:none;
disc实心圆，默认类型list-style-type:disc;
circle空心圆list-style-type:circle;
square实心正方形list-style-type:square;
decimal数字list-style-type:decimal

盒子模型

盒子模型 网页上的元素 是从上到下 从左到右排序的 每个元素都是个盒子有宽度width和高度 height

borde边框
margin外边框(两个元素"标签"的距离 上右下左)
padding内边距(内容和边框的距离 上右下左)
height高
width宽

外边距 居中

margin:0px auto

块元素 而且块元素有固定的宽度

        img{
       
            margin:0px auto;
        }
    </style>
</head>
<body>
<div >

    <img src="3.jpg" alt="" style="display: block">

边框

border:5px dotted red;

边距 粗细 样式 颜色

body 总有一个默认的内外边距margin:0

  • | 属性 | 说明 | 示例 |
    | ----------------------: | ------------------------------------------------------------ | -------------------------------------- |
    | border-top-color | 上边框颜色 | border-top-color:#369; |
    | border-right-color | 右边框颜色 | border-right-color:#369; |
    | border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
    | border-left-color | 左边框颜色 | border-left-color:#efcd56; |
    | border-color | 四个边框为同一颜色 | border-color:#eeff34; |
    | border-color | 上、下边框颜色 ： #369 左、右边框颜色 ： #000 | border-color:#369 #000; |
    | border-color | 上边框颜色 ： #369 左、右边框颜色 ： #000 下边框颜色 ： #f00 | border-color:#369 #000 #f00; |
    | border-color | 上、右、下、左边框颜色 ： #369 、 #000 、 #f00 、 #00f | border-color:#369 #000 #f00 #00f; |
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 300px;
            border: 5px solid red;
        }
        form{
            background: #ff00f0;
        }
        body{
            margin: 0px;
        }
        div:nth-of-type(1) input{
            border: 3px solid #24b386;
            /*边距样式 实线*/

        }
        div:nth-of-type(2) input {
            border: 3px dashed #000000;
            /*边距样式 虚线*/
        }
        h2{
            font-size: 17px;
            background-color: #224c22;
            line-height: 30px;
            margin: 0px;
            color: aliceblue;
        }


    </style>
</head>
<body>
<div id="i1">
    <h2>登录</h2>
    <form action="#">
        <div>
            <span>姓名</span>
            <input type="text">
        </div>
        <div>
            <span>密码</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

盒子计算方式

元素多大 margin+border+padding+内容宽度

圆角边框border-radius
园

可以用于头像

利用 border-radius 属性 制作圆 形 的 两 个 要点

元素的宽度和高度必须 相同

圆角 的半径为元素宽度的一半，或者直接设置圆角半径值为 50%

 div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }
半圆形

利用 border-radius 属性 制作 半 圆 形 的 两 个 要点

制作上半圆或下半圆时，元素的宽度是高度的 2 倍，而且圆角半径为元素的高度 值

制作 左半圆或右半圆时，元素的高度是宽度的 2 倍， 而且圆角 半径为元素的宽度值

div{
    width: 90px;
    height: 45px;
    border: 10px solid crimson;
    border-radius:60px 60px 0px 0px;
}
扇形

利用 border-radius 属性 制作 扇形 遵循 “三同，一不同” 原则

“三同”是元素宽度、高度、圆角半径 相同

“一不同”是圆角取值位置不同

        div{
            width: 90px;
            height: 90px;
            border: 10px solid crimson;
            border-radius:90px 0px 0px 0px;
        }

盒子阴影

**box-shadow:**inset x-offset y-offset blur-radius color;

(inset 阴影 类型内 阴影 x-offsetX 轴位移 ，指定 阴影水平位移量

y-offset Y 轴位移，用来指定阴影垂直位移量 blur-radius 阴影模糊 半径阴影 向外模糊的模糊范围

color 阴影颜色，定义绘制阴影时所使用的颜色)

浮动

display 修改块或行元素属性

这个也是实现行内元素排列的方式但是很多情况都是用float

div{
    width: 90px;
    height: 90px;
    border:1px solid #ff00f0;
    /*inline 行内元素*/
    display: inline;
    /*inline-block 保持块元素的特性但是能写一行*/
}
span{

    width: 90px;
    height: 90px;
    border:1px solid #ff00f0;
    display: block;
    /*block 块元素*/

float浮动元素

左float: left;
右float: right;

img{
    width: 90px;
    height: 90px;
    display: block;
    /*左float: left;*/
    /*右float: right;*/
    float: left;
 }

clear塌陷问题

clear:right;右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动
clear:none可以浮动

1.增加父级高度

div {
    border: 1px solid salmon;
    height: 500px;
}

2.增加一个空的div清除浮动

<div class="a12"></div>

   .a12{
            clear: both;
            margin: 0;
            padding: 0;
        }

3.在父级加一个overflow:scroll;元素

属性值说明
visible默认值。内容不会被修剪，会呈现在盒子之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto**如果内容被修剪，则浏览器会显示滚
    #div1 {
            border: 1px solid #fa8072;
            overflow:scroll;
        }

4.父级添加伪类:after

div :after{
content:'';
disply:block;
clear:both;
}

1.空div 是不好的

2.设置父元素的高度 有了固定的高度就和被限制

3.overflow 简单 下拉的场景使用

4.父级添加伪类:after （推荐） 无副作用

display 位置不可控

float 位置可控 但是有塌陷问题

定位

position属性

static：默认值，没有定位

relative：相对定位

relative属性值

相对自身原来位置进行偏移

偏移设置：top（上为负 y轴）、left（左为负 x轴）、right、bottom

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B4sWKM73-1636543635290)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211103163036714.png)]

设置right为正值，元素往左移动，bottom设置正值，元素往上移动。负值则往与正值相反的方向移动

#third {
	background-color:#C5DECC;
	border:1px #395E4F dashed;
	position:relative;
	right:20px;
	bottom:30px;
}

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响

设置相对定位的盒子原来的位置会被保留下来

相对定位的使用场景

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

absolute：绝对定位

绝对定位的元素以它最近的一个“已经定位”的**“祖先元素”** 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的使用场景

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

fixed：固定定位

fixed属性值

偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

固定定位的使用场景

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
<!--写css的代码 style-->
<!--语法
        选择器{
        声明1：
        声明1：
        }
每一个语言最好于分号结尾
-->
    <style>
    h1{
        color: crimson;
    }

    </style>

</head>
<body>
<h1>我是标签</h1>

</body>
</html>

link:css引入css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
    <!--写css的代码 style-->
    <!--语法
            选择器{
            声明1：
            声明1：
            }
    每一个语言最好于分号结尾
    -->
    <link rel="stylesheet" href="css第一个程序/css01.css">
</head>
<body>
<h1>我是标签</h1>

</body>
</html>

css的优势

内容和表现分离

网页结构表现统一 可以重复使用

样式丰富

容易被搜索引擎收录

div 标签

块标签

用于html的容器

和css一起使用 继续文档布局

css的n中导入方式

行内

<body>
<h1>我是标签</h1>
<!--行内样式在标签元素中编写一个 style 属性 编写样式-->
<h1 style="color: crimson">
    奥特曼
    </h1>
</body>

外部

链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
    <!--写css的代码 style-->
    <!--语法
            选择器{
            声明1：
            声明1：
            }
    每一个语言最好于分号结尾
    -->
    <link rel="stylesheet" href="css第一个程序/css01.css">
</head>
<body>
<h1>我是标签</h1>

</body>
</html>

导入式

css2.1

<style>@import url("文件")</style>

内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>233</title>
<!--写css的代码 style-->
<!--语法
        选择器{
        声明1：
        声明1：
        }
每一个语言最好于分号结尾
-->
    <style>
    h1{
        color: crimson;
    }

    </style>

</head>
<body>
<h1>我是标签</h1>

</body>
</html>

优先级

就近原则 谁离的作用代码越近

选择器

作用：选择页面上的某一个汉族某一类元素

基本选择器

标签选择器 选择一类标签 标签{}

类选择器 class 选择所有class属性一致的 .类{}

id选择器 全局唯一 .id名{}

id选择器 >类选择器> 标签选择器

标签选择器

    <style>
<!--标签选择器 会选择到页面上使用的标签的元素-->
        h1{
            color: #a048a7;
            background: #24b386;
            border-radius: 23px;
        }
        p{
            font-size: 99px;
            color: green;
            color: #a048a7;
            background: #24b386;
            border-radius: 23px;
        }
    </style>

类选择器class

好处可以多个标签归类是同一个class可以复用

<标签名 class=“类1 类2” ></标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--   类选择器的格式.class的名称{}
        好处可以多个标签归类是同一个class可以复用-->
        .sy{
            color: #24b386;
        }
        .yy{
            color: #2343;
        }
    </style>
</head>
<body>
<h1 class="sy">淑钰</h1>
<h1 class="yy">钰钰</h1>
<h1 class="sy">钰钰很帅</h1>
<p class="yy">我是个内容</p>


</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
        color: #a048a7;
    }.SS{
        color: green;
            }


    </style>
</head>
<body>
<h1 id="钰钰">标签1</h1>
<h1 CLASS="SS">标签2</h1>
<h1 class="SS">卍卐</h1>
<h1>标签4</h1>

</body>
</html>

id选择器 >类选择器> 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*
id 选择器 #id名称{}id 必须保证 全局唯一
*/ #钰钰{
        color: #a048a7;
    }.SS{
        color: green;
            }

    h1{
        color: aqua;
    }
    </style>
</head>
<body>
<h1 id="钰钰">标签1</h1>
<h1 CLASS="SS">标签2</h1>
<h1 class="SS">卍卐</h1>
<h1>标签4</h1>

</body>
</html>

并集选择器

选择器1 选择器2 选择器3{

}

全局选择器

一般用于清空边距和间距

*{

}

层次选择器

后代选择器

   body p{
            background: #24b386;
        }

子选择器

body>p{
            color: crimson;
        }

相邻选择器（对下 下一个 同类型）

.a1+p{
            background: #a048a7;
        }

通用选择器(对下 所有同类型）

        .a1~p{
            background: #a048a7;
        }

结构伪类选择器

伪类：条件（或者特效）

特效

a:hover{
            background: crimson;
        }

条件`

选择器功能描述
E:first-child作为父元素的第一个子元素的元素 E
E:last-child作为父元素的最后一个子元素的元素 E
E F:nth-child(n)选择父级元素 E 的第 n 个子元素 F ，（ n 可以是 1 、 2 、 3 ），关键字为 even 、 odd
E:first-of-type选择父元素内具有指定类型的第一个 E 元素
E:last-of-type选择父元素内具有指定类型的最后一个 E 元素
E F:nth-of-type(n )选择父元素内具有指定类型的第 n 个 F 元素
    <style>
        /*避免使用class id*/
        /*ul  第一个*/
        ul li:first-of-type{
            background:darkblue;
        }
        /*最后一个*/
        ul li:last-child{
            background: 2px,darkgoldenrod;
        }
    /*选择p1：定位父元素（body） 选择第一个元素（p）*/
        p:nth-child(1){
            /*选择p元素的父元素 选择第一个：并且是第一个元素才生效*/
            background: #a048a7;
        }
        p:nth-child(2){
            /*选择父元素 下p元素的第二个 类型*/
            background: crimson;
        }
    </style>

属性选择器

相当于id+class

属性名：属性名=属性值（正则）
=为绝对等于
*=为包含这个元素
^=以这个开头
$=以这个结尾

选择器类 型功能描述
E F后代选择器选择 E 后面的所有 F 后代
E>F子选择器选择 E 后面的儿子
E+F相邻兄弟选择器选择 E 相邻 F 兄弟（相邻的下一个兄弟）
E~F通用兄弟选择器选择 E 相邻 所有 F 兄弟（ 所有兄弟姐妹）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .bar a{

    }
        /*属性名：属性名=属性值（正则）*/
        /* =为绝对等于*/
        /* *=为包含这个元素*/
        /* ^=以这个开头*/
        /* $=以这个结尾*/

        /* 存在id的 */
        a[id]{
            background: #5151ad;

        }
        /*id为4的*/
        a[id="4"]{
            background: green;
    }
        /*capss为4的*/
        a[class*="23"]{
            background: crimson;
        }
        /*选择href 3开头的元素*/
        a[href^="3"]{
            background: #a048a7;
        }
        a[class$="x"]{
            background: aqua;
        }
    </style>
</head>

<body>

<p class="bar">
    <a href="23.com"class="d1"id="1">1</a>
    <a href="34.com" class="_b1" title="ws">2</a>
    <a href="2334.com"id="2">3</a>
    <a href="4.com"id="4">4</a>
    <a href="233.com" class="23">5</a>
    <a href="2333.com" class="23">6</a>
    <a href="2333.com" class="7x">6</a>
</p>
</body>
</html>

美化网页

有效的传递页面信息

美化网页 页面漂亮 才能吸引用户

凸显网页的主题

提高用户体验

span 标签

行内标签 没有特定含义 改变局部样式 设置文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            font-size: 20px;
            dominant-baseline: alphabetic;
            background: #24b386;
        }
    </style>
</head>
<body>
    学习<span id="d1">java</span>

</body>
</html>

字体样式font

字体 font-family: 楷体;
字体大小 font-size: 50px;
字体粗 font-weight: bold; 也可以用px
字体颜色 color: #24b386;
边距 margin:0px;
字体细 font-weight: lighter;

属性名含义举例
font-family设置字体类型font-family:" 隶书 ";
font-size设置字体大小font-size:12px;
font-style设置字体风格font- style:italic ;
font-weight设置字体的粗细font- weight:bold ;
font在一个声明中设置所有字体属性font:italic bold 36px " 宋体 ";

weight 属性

值说明
normal默认值，定义标准的字体
bold粗体字体
bolder更粗的字体
lighter更细的字体
100 、 200 、 300 、 400 、 500 、 600 、 700 、 800 、 900定义由细到粗的字体 400 等同于 normal ， 700 等同于 bold

背景background

背景颜色 background-color: #24b386;

背景图像 background-image:url(路径)

repeat 水平和垂直平铺

no-repeat 不平铺

repeat-x只水平平铺

repeat-y只垂直平铺

背景大小控制

background-size

属性值描述
auto默认值，使用背景图片保持原样
percentage当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover整个背景图片放大填充了整个元素
contain让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
定位

background-positon属性

值含义
Xpos Ypos单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y%使用百分比表示背景的位置
X、Y方向关键词水平方向的关键词： *left、center、right 垂直方向的关键词： top、center、bottom **
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*<!--
 字体 font-family: 楷体;
 字体大小 font-size: 50px;
 字体粗 font-weight: bold; 也可以用px
 字体颜色  color: #24b386;
 边距  margin:0px;

 字体细  font-weight: lighter;
 */     h1{
    font-size: 50px;
}
        body{
            font-family: "BERNIER Regular",楷体;

            color: #24b386;
        }
        .p1{
            font-weight: bold;
        }
        .p2{
            font-weight: lighter;
        }
    </style>
</head>
<body>
<h1>作文</h1>
<p class="p1">第一作文网提供：高中作文大全，高中作文800字范文，
</p><p class="p2">高中优秀作文800字，高中高考作文题目，高中作文素材大全等。
</p>
<p>Hello Everyone, My name is Xiao Ling from class four Grade eight, I'm 14 ye</p>
</body>
</html>

font:字体粗细 大小 行高 字体;

​ font: oblique 10px/12px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        P{
             /* 字体粗细 大小 行高 字体*/
            font: oblique 10px/12px "楷体";
        }
    </style>
</head>
<body>
<p>测试</p>
</body>
</html>

vertocal-alihn属性：muddle top

文本样式text

居中 text-align: center;
右靠 text-align: right;
左靠 text-align: left;
首行缩进 text-indent: 2em;或者是px

值说明
left把文本排列到左边。默认值：由浏览器决定
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果

阴影 text-shadow:(颜色 x y 阴影半径)

行高 line-height: 20px; 单行上下居中 line-height=height

文本装饰

text-decoration属性

值说明
none默认值，定义的标准文本
underline设置文本的下划线
overline设置文本的上划线
line-through设置文本的删除线

文体图片水平对齐 vertical-align:middle;

去除项目符号 list-style:none；

属性含义举例
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text- align:right ;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text- decoration:underline ;

列表样式*list-style

值说明语法示例
none无标记符号list-style-type:none;
disc实心圆，默认类型list-style-type:disc;
circle空心圆list-style-type:circle;
square实心正方形list-style-type:square;
decimal数字list-style-type:decimal
伪类

**a:hover {color:#FF00FF;} 鼠标悬浮颜色 **

伪类名称含义示例
a:link未单击访问时超链接样式a:link{color:#9ef5f9;}
a:visited单击访问后超链接样式a:visited {color:#333;}
a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}
a:active鼠标单击未释放的超链接样式a:active {color:#999;}
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */


        /*默认*/
     a{
         text-decoration: aqua;
         color: #5151ad;
     }
        /*鼠标悬浮颜色*/
        a:hover{
            color: #ff00f0;
            font-size: 50px;
        }
        /*鼠标点击颜色*/
        a:active{
            color: green;
        }

渐变linear

属 性 名IEFirefoxChromeOperaSafari
Gradient10+19.0+26.0+12.1+5.1+

linear-gradient ( position, color1, color2,…)

linear-gradient ( 方向, 颜色1, 颜色2,…)

列表

值说明语法示例
none无标记符号list-style-type:none;
disc实心圆，默认类型list-style-type:disc;
circle空心圆list-style-type:circle;
square实心正方形list-style-type:square;
decimal数字list-style-type:decimal

盒子模型

盒子模型 网页上的元素 是从上到下 从左到右排序的 每个元素都是个盒子有宽度width和高度 height

borde边框
margin外边框(两个元素"标签"的距离 上右下左)
padding内边距(内容和边框的距离 上右下左)
height高
width宽

外边距 居中

margin:0px auto

块元素 而且块元素有固定的宽度

        img{
       
            margin:0px auto;
        }
    </style>
</head>
<body>
<div >

    <img src="3.jpg" alt="" style="display: block">

边框

border:5px dotted red;

边距 粗细 样式 颜色

body 总有一个默认的内外边距margin:0

  • | 属性 | 说明 | 示例 |
    | ----------------------: | ------------------------------------------------------------ | -------------------------------------- |
    | border-top-color | 上边框颜色 | border-top-color:#369; |
    | border-right-color | 右边框颜色 | border-right-color:#369; |
    | border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
    | border-left-color | 左边框颜色 | border-left-color:#efcd56; |
    | border-color | 四个边框为同一颜色 | border-color:#eeff34; |
    | border-color | 上、下边框颜色 ： #369 左、右边框颜色 ： #000 | border-color:#369 #000; |
    | border-color | 上边框颜色 ： #369 左、右边框颜色 ： #000 下边框颜色 ： #f00 | border-color:#369 #000 #f00; |
    | border-color | 上、右、下、左边框颜色 ： #369 、 #000 、 #f00 、 #00f | border-color:#369 #000 #f00 #00f; |
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 300px;
            border: 5px solid red;
        }
        form{
            background: #ff00f0;
        }
        body{
            margin: 0px;
        }
        div:nth-of-type(1) input{
            border: 3px solid #24b386;
            /*边距样式 实线*/

        }
        div:nth-of-type(2) input {
            border: 3px dashed #000000;
            /*边距样式 虚线*/
        }
        h2{
            font-size: 17px;
            background-color: #224c22;
            line-height: 30px;
            margin: 0px;
            color: aliceblue;
        }


    </style>
</head>
<body>
<div id="i1">
    <h2>登录</h2>
    <form action="#">
        <div>
            <span>姓名</span>
            <input type="text">
        </div>
        <div>
            <span>密码</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

盒子计算方式

元素多大 margin+border+padding+内容宽度

圆角边框border-radius
园

可以用于头像

利用 border-radius 属性 制作圆 形 的 两 个 要点

元素的宽度和高度必须 相同

圆角 的半径为元素宽度的一半，或者直接设置圆角半径值为 50%

 div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }
半圆形

利用 border-radius 属性 制作 半 圆 形 的 两 个 要点

制作上半圆或下半圆时，元素的宽度是高度的 2 倍，而且圆角半径为元素的高度 值

制作 左半圆或右半圆时，元素的高度是宽度的 2 倍， 而且圆角 半径为元素的宽度值

div{
    width: 90px;
    height: 45px;
    border: 10px solid crimson;
    border-radius:60px 60px 0px 0px;
}
扇形

利用 border-radius 属性 制作 扇形 遵循 “三同，一不同” 原则

“三同”是元素宽度、高度、圆角半径 相同

“一不同”是圆角取值位置不同

        div{
            width: 90px;
            height: 90px;
            border: 10px solid crimson;
            border-radius:90px 0px 0px 0px;
        }

盒子阴影

**box-shadow:**inset x-offset y-offset blur-radius color;

(inset 阴影 类型内 阴影 x-offsetX 轴位移 ，指定 阴影水平位移量

y-offset Y 轴位移，用来指定阴影垂直位移量 blur-radius 阴影模糊 半径阴影 向外模糊的模糊范围

color 阴影颜色，定义绘制阴影时所使用的颜色)

浮动

display 修改块或行元素属性

这个也是实现行内元素排列的方式但是很多情况都是用float

div{
    width: 90px;
    height: 90px;
    border:1px solid #ff00f0;
    /*inline 行内元素*/
    display: inline;
    /*inline-block 保持块元素的特性但是能写一行*/
}
span{

    width: 90px;
    height: 90px;
    border:1px solid #ff00f0;
    display: block;
    /*block 块元素*/

float浮动元素

左float: left;
右float: right;

img{
    width: 90px;
    height: 90px;
    display: block;
    /*左float: left;*/
    /*右float: right;*/
    float: left;
 }

clear塌陷问题

clear:right;右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动
clear:none可以浮动

1.增加父级高度

div {
    border: 1px solid salmon;
    height: 500px;
}

2.增加一个空的div清除浮动

<div class="a12"></div>

   .a12{
            clear: both;
            margin: 0;
            padding: 0;
        }

3.在父级加一个overflow:scroll;元素

属性值说明
visible默认值。内容不会被修剪，会呈现在盒子之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto**如果内容被修剪，则浏览器会显示滚
    #div1 {
            border: 1px solid #fa8072;
            overflow:scroll;
        }

4.父级添加伪类:after

div :after{
content:'';
disply:block;
clear:both;
}

1.空div 是不好的

2.设置父元素的高度 有了固定的高度就和被限制

3.overflow 简单 下拉的场景使用

4.父级添加伪类:after （推荐） 无副作用

display 位置不可控

float 位置可控 但是有塌陷问题

定位

position属性

static：默认值，没有定位

relative：相对定位

relative属性值

相对自身原来位置进行偏移

偏移设置：top（上为负 y轴）、left（左为负 x轴）、right、bottom

设置right为正值，元素往左移动，bottom设置正值，元素往上移动。负值则往与正值相反的方向移动
在这里插入图片描述

#third {
	background-color:#C5DECC;
	border:1px #395E4F dashed;
	position:relative;
	right:20px;
	bottom:30px;
}

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响

设置相对定位的盒子原来的位置会被保留下来

相对定位的使用场景

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

absolute：绝对定位

绝对定位的元素以它最近的一个“已经定位”的**“祖先元素”** 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的使用场景

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

fixed：固定定位

fixed属性值

偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

固定定位的使用场景

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sDxzmaSN-1636543703630)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211104172146827.png)]

网页元素透明度

说明属性举例
x值为0~1，值越小越透明opacity:xopacity:0.4;
x值为0~100，值越小越透明filter:alpha(opacity=x)filter:alpha(opacity=40);

网页中的元素都含有两个堆叠层级

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

t

网页元素透明度

说明属性举例
x值为0~1，值越小越透明opacity:xopacity:0.4;
x值为0~100，值越小越透明filter:alpha(opacity=x)filter:alpha(opacity=40);

网页中的元素都含有两个堆叠层级

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

t
子原来的位置会被保留下来

相对定位的使用场景

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

absolute：绝对定位

绝对定位的元素以它最近的一个“已经定位”的**“祖先元素”** 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的使用场景

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

fixed：固定定位

fixed属性值

偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

固定定位的使用场景

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

[外链图片转存中…(img-RaqAjIlu-1636543635292)]

网页元素透明度

说明属性举例
x值为0~1，值越小越透明opacity:xopacity:0.4;
x值为0~100，值越小越透明filter:alpha(opacity=x)filter:alpha(opacity=40);

网页中的元素都含有两个堆叠层级

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

t

q2060951710
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 学习笔记
糯米鸡的博客
03-05 152
行内元素；块元素 行内元素只能容纳文本和其他行内元素
css学习笔记
weixin_39884521的博客
05-18 323
https://www.imooc.com/learn/9 学习的是这个课程，很基础适合初学者 概念 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 优势 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 span{ color:b...
html乱码问题
Gehang的博客
05-07 1329
<!DOCTYPE html> <html lang="en"> <head> <!-- 作用:告诉浏览器所采用的编码字符集是什么，然后浏览器就会根据此字符集来解码,只是一个告诉浏览器的作用， 具体的内容字符集格式是根据当前编辑器来决定的 --> <meta charset="UTF-8"> ...
linux常见命令
chaoge321的博客
02-05 3112
1．echo命令 echo命令用于在终端输出字符串或变量提取后的值，格式为“echo [字符串 | $变量]”。 例如，把指定字符串“Linuxprobe.com”输出到终端屏幕的命令为： [root@linuxprobe ~]# echo Linuxprobe.Com 该命令会在终端屏幕上显示如下信息： Linuxprobe.Com 下面，我们使用$变量的方式提取变
EF-CodeFirst-自动迁移和手动迁移
plx的IT路
09-04 3700
前提：创建的是控制台应用程序 自动迁移： （1）在创建的实体类中添加一个字段 （2）打开程序包管理器控制台 （3）在程序包管理器控制台输入enable-Migrations，在该项目下会自动生成Migrations文件夹 （4）打开Migrations文件夹下的Configuration.cs，并设置AutomaticMigrationsEnabled = true; （5）在程序包管...
EF框架之——Code First以及踩过的这些“坑”
weixin_30748995的博客
09-06 325
传送门 　　Code First使用步骤 　　Code First报错和解决办法 以前在上海做了一段时间的Asp.net，基本用的都是.net自带的EF框架连接数据库，不过都是用的Model First,最近开了个项目，我就先把数据层，搭建了下，用的Code First,用起来要比Model First繁琐一点。今天来一起走一遍这个让我踩了几个雷的Code ...
webapi框架搭建-数据访问ef code first
diaopan1618的博客
01-13 240
webapi框架搭建系列博客 为什么用ef？ 　　我相信很多博友和我一样都有这种“选择困难症”，我曾经有，现在也有，这是技术人的一个通病——总想用“更完美”的方式去实现，导致在技术选择上犹豫不决，或总是推翻别人的技术路线，甚至屡屡推翻自己从前的想法，这种专研的精神固然不错，但随着年龄的增大，会发现这种习惯已将自己弄得很累，其实真没有必要。我觉得技术上永远没有“完美”的解决方案，如果揪...
HTML+CSS知识笔记、分析案例
05-14
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选； CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查...
css3笔记知识点总结
06-24
css3笔记知识点总结
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS基础知识。 一、CSS概念 CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。...
CSS 学习笔记
09-25
总的来说，理解并熟练运用ID与Class，以及正确处理Padding和Margin，掌握min-height和height的使用，都是提升CSS技能的必备知识。在实际开发中，应根据需求和兼容性需求灵活运用这些概念，以实现优雅且功能强大的...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
第五章列表与超链接
weixin_45728247的博客
12-22 1080
一列表标记 1.无序列表ul 是网页中最常用的列表，之所以称“无序列表”，是因为其他各个列表项之间没有顺序级别之分，通常是并列的。 基本语法格式如下： < ul> < li>列表项1< /li> < li>列表项2< /li> < li>列表项3< /li> ... < /ul> 其中< ul&...
练习题
dengpici6039的博客
09-24 215
事件总结 通用：onclick 鼠标单击ondblclick 鼠标双击onmouseover 鼠标放上onmouseout 鼠标离开onmousemove 鼠标移动表单：onchang 表单的值改变onblur 失去焦点onfocus 获得焦点onselect 选中 1.单选按钮确定提交是否可用 　　<div style="width:500px; height:500px;...
scss概念及使用
m0_74293254的博客
07-10 844
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS 【实用教程】（2024最新版）
最新发布
朝阳39的博客
07-10 1551
CSS 是层叠样式表( Cascading Style Sheets ) 的简写，用于精确控制 HTML 页面的样式，以便更好地展示图文信息或产生炫酷/友好的交互体验。 CSS 文件的后缀名为 1. style 内嵌样式 https://blog.csdn.net/weixin_41192489/article/details/140226382容器内的元素，会获得容器上添加的样式 文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 盒子
深入理解CSS中的块格式化上下文（BFC）
jingsi1991的博客
07-08 421
块格式化上下文（BFC）是Web页面的可视CSS渲染的一部分，它决定了元素如何对其内容进行布局，以及与其他元素之间的关系和互动。简单来说，BFC是一个独立的布局环境，其中的元素布局不受外部影响，并且BFC内部的元素也不会影响到外部。
CSS--表格自适应宽度并设置最小宽度
IT利刃出鞘的博客
07-08 269
本文介绍怎样让HTML的表格自适应宽度。way2j.com。
Sass 和 SCSS
ZTBztb123456的博客
07-07 334
Sass 和 SCSS 是 Sass (Syntactically Awesome Stylesheets) 的两种语法。它们都被用于编写更加结构化和易于维护的 CSS。
移动端CSS的学习笔记。
01-19
移动端CSS的学习笔记 移动端的CSS学习是移动端开发中非常重要的一部分，因为移动端设备的屏幕尺寸各异，需要对不同尺寸的设备做出相应的适配和响应式布局。在学习移动端CSS的过程中，有一些基础知识和技巧是需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值