html、css 教程

又逢乱世

已于 2022-09-17 16:38:50 修改

阅读量379

点赞数

分类专栏：前端文章标签： css css3

于 2022-09-14 01:52:03 首次发布

本文链接：https://blog.csdn.net/a1053765496/article/details/126843702

版权

前端专栏收录该内容

13 篇文章 3 订阅

订阅专栏

html

meta标签
自结束标签
可以提供该网页相关信息,元数据
charset="utf-8"：中文的网页需要用到的声明编码，否则会出现乱码
name="keywords" content="静夜思,诗词"：提供搜索网页的关键字，关键字用,隔开
name="Description"：描述网页的信息
name="viewport"：网页开发移动端页面适配

加粗：strong

斜体：em

表格：table

table：HTML 表格

tr：元素定义表格行
th：数据中的表头单元格
td：表示单元格

table元素里常用的属性

border(边框)
cellspacing(规定单元格之间的空白)
cellpadding(规定单元边沿与其内容之间的空白)
colspan(用于合并列)
rowspan(用于合并行)

块级标签

<h1>, <p>, <ul>, <table>,<div>

行内标签

<b>, <td>, <a>, <img>,<span>

CSS

css写在哪里？

方式一：内部样式表
写在元素的style标签里面的

示例：

<style>
    /* 这里写css样式 */
</style>

方式二：内联样式表
写在styles属性里面的

示例：

<div style="width: 100px;"></div>

方式三：外部样式表

link标签将css资源引⼊

示例：

<link rel="stylesheet" href="./index.css">

css的选择器

元素（标签）选择器

<style>
    /* 直接使用 标签 编写 css 样式 */
    div {
        color: red;
    }
    /* 元素选择器的组合使用，多个标签使用相同的样式，用英式逗号分隔 */
    div, p {
        color: blue;
    }
</style>
<body>
    <div>Hello</div>
    <p>world</p>
</body>

类选择器

<style>
    /* 样式中通过 英式 .类名 的方式获取到指定的标签 */
    .test {
        color: red;
    }
</style>
<body>
    <!-- 标签中使用属性 class 给标签定义一个类选择器名称 -->
    <div class="test">Hello</div>
</body>

<style>
    /* 2：样式如果想指定只有特定的标签使用此样式，可以选择组合的方式 */
    div.test {
        color: red;
    }
</style>

<body>
    <!-- 1：当标签中有多个相同名称的类选择器名称 -->
    <div class="test">Hello</div>
    <p class="test">world</p>
</body>

<style>
    /* 2： 可以使用一个类名设置样式，也可以使用链接多个类名的方式设置样式
            链接多个类名的时候，必须保证这些类名在同一个标签中都存在样式才生效
    */
    .test1.test2 {
        color: red;
    }
</style>
<body>
    <!-- 1：定义一个多个类名的选择器 -->
    <div class="test1 test2">Hello</div>
</body>

id选择器

注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆

<style>
    /* 样式中通过 #名称 的方式获取到指定的标签 */
    #test {
        color: red;
    }
</style>
<body>
    <!-- 标签中使用属性 id 给标签定义一个id选择器名称 -->
    <div id="test">Hello</div>
</body>

通配符选择器*

<style>
    /* 使用 星号，设置全局样式，但是优先级低 */
    * {
        color: red;
    }
</style>
<body>
    <div>Hello</div>
</body>

派生选择器

后代选择器

<style>
    /* 标签里面包裹的标签，通过 标签拿到指定的后代(儿子、孙子)标签 */
    div i {
        color: red;
    }
</style>
<body>
    <div>
        <p>
            <i>hello</i>
        </p>
    </div>
</body>

子元素选择器

<style>
    /* 标签里面包裹的标签，通过 标签顺序拿到指定的儿子标签， 注意要按照标签顺序，且只能是下一级儿子级别的标签*/
    div>p>i {
        color: red;
    }
</style>
<body>
    <div>
        <p>
            <i>hello</i>
        </p>
    </div>
</body>

相邻兄弟选择器

<style>
    /* 先找到第一个p兄弟，是第二个p，那么第二个p就生效了。+p 继续找第二个p的兄弟，就找到了第三个p,那么第三个也生效了
        注意，相同的元素(哥哥是p，弟弟也是p) 一个+号的时候是循环，例如 p+p。超过一个+号的时候，是指定位置的地方开始找下面的兄弟
    */
    p+p {
        color: red;
    }
</style>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>

伪类选择器

:first-child {} //第一项
:last-child {} //最后一项
:nth-child(n) {} //第n项
:nth-child(2n+1) {} //奇数项
:nth-child(2n) {} //偶数项
:not(:nth-child(n)) //否定伪类除了第n项

a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*鼠标移动到链接上*/
a:active {color:#0000FF;} /*点击时链接*/

伪元素选择器

::first-letter //第⼀个
::first-line //第⼀⾏只能⽤于块级元素
::selection //选中
::before //在开始位置新增
::after //在结束位置新增

选择器的优先级

1：!important // 最高

2：⾏内样式

3：id选择器

4：类选择器

5：标签选择器

6：通配符选择器 // 最低

margin的外边框折叠问题

上下两个兄弟盒子的margin都为正取大，都为负取小，一正一负相加
父子元素盒子的margin（假设没有内边距或边框把外边距分隔开），也会合并（意思是修改父的盒子属性子的也会生效，修改子的盒子属性父的也会生效）；只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
// 解决父子边距合并：
父元素{
 overflow:auto;
}
父元素::before{
 display: table;
 content: "";
}

css背景的相关属性

background-image         // 设置背景图片，取值 url("")
background-repeat        // 设置背景图片的平铺方案
                               * repeat	背景图像将向垂直和水平方向重复。这是默认
                               * repeat-x	只有水平位置会重复背景图像
                               * repeat-y	只有垂直位置会重复背景图像
                               * no-repeat	background-image 不会重复
background-size          // 设置背景图片的大小
background-position      // 设置背景图片的起始位置
background-color         // 设置背景颜色，取值 #fff

css文字的相关属性

font-size	// 字体大小，最小12px
font-weight	// 是否加粗，取值
                    * normal	默认值。定义标准的字符。
                    * bold	    定义粗体字符。
                    * bolder	定义更粗的字符。
                    * lighter	定义更细的字符。
                    * 100-900   越小越细，越大越粗
font-style	// 是否斜体，取值
                    * normal	默认值。浏览器显示一个标准的字体样式。
                    * italic	浏览器会显示一个斜体的字体样式。
                    * oblique	浏览器会显示一个倾斜的字体样式。
font-family	// 字体
text-indent	// 文本缩进
text-align	// 文本水平(左右)对齐，取值
                    * left	把文本排列到左边。默认值：由浏览器决定。
                    * right	把文本排列到右边。
                    * center	把文本排列到中间。
                    * justify	实现两端对齐文本效果
text-height // 字体行高

css布局定位

简介

正常元素怎么布局？

默认，一个块级元素的内容宽度就是其父元素的100%，他的高度和其内容高度一致
行内元素它的宽度和高度度都是根据内容决定的(无法设置行内元素的宽高)

可设置display属性，定义元素的类型(css3定义布局)，给行内元素设置宽高
    span {
        /* 行内元素，设置成行内块级元素，不独占一行，这样就可以设置宽高了 */
        display: inline-block;  
        /* 行内元素，设置成块级元素，独占一行，这样就可以设置宽高了 */
        display: block;
    }

float 浮动布局

使用

float: none;   //默认值，元素不浮动
float: left;   //元素向左浮动
float: right;   //元素向右浮动

特点

浮动元素会脱离文档流，不再占据文档流空间
浮动元素彼此之间是从左往右排列，宽度超过一行自动换行
在浮动元素前面元素不浮动时，浮动元素无法上移
块级元素和行内元素浮动之后都变成行内块级元素
浮动元素不会盖住文字，可以设置文字环绕效果 // 浮动设计之初的目的

清除浮动

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

flex 弹性布局

使用

父元素属性

/* 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
display: flex;

/* 决定主轴的方向（即子元素的排列方向）row：横向排版，row-reverse：横向排版颠倒

column：纵向排版，column-reverse：纵向排版颠倒 */
flex-direction: row | row-reverse | column | column-reverse

/* 是否换⾏，父元素宽度固定的话，多个子元素超出父元素宽度那么子元素会等分父元素的宽度，子元素的宽度将失效，如果想让子元素的宽度生效，就要指定换行， */

flex-wrap: nowrap | wrap | wrap-reverse;

/* 定义⽔平⽅向对⻬⽅式(父元素要有宽度才生效) flex-start：默认从左向右排版， flex-end：正序从右向左排版，center：正序居中排版，space-between：间隔均分父元素宽度排版，两侧紧挨父元素左右两侧，space-around：间隔均分父元素宽度排版，中间的间距是两侧的间距的两倍*/

justify-content: flex-start | flex-end | center | space-between | space-around;

/* 定义垂直方向对齐方式 flex-start：默认原效果，flex-end：放在下面，center：放在中间，baseline：以子元素中的内容的基线水平对齐的方式排版，stretch：子元素没有设置高度的话，使用父元素的高度*/
align-items: flex-start | flex-end | center | baseline | stretch;

/* 定义多个轴线（多行/多列）对齐方式，flex-start：父元素设置高度的话，第二行紧挨第一行排着，没有此参数的话，会均分父元素高度排，flex-end：从底部排，center：排在中间，space-between：垂直均分间隔，上下紧贴父元素， space-around：垂直均分间隔，上下距离父元素的高度是中间间距的一半*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子元素属性

/* 定义子元素的排列顺序，默认为0，数字越小排列越前，数字越大排列越后 */
order: -10 | -1 | 0 | 1 | 10;

/* 定义子元素的放大比例，默认为0，1：默认占据剩余的空间，2：是其他元素少的总和的2倍 */
flex-grow: 0 | 1 | 2 | 3;

/* 定义子元素是否可以缩小，默认为1可以缩小，0不可以 */
flex-shrink: 0 | 1;

/* 定义了在分配多余空间之前，子元素占据的主轴空间 */
flex-basis: <length> | auto;

/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;

position 定位布局

使用

父元素属性

/* 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素 */

position: relative (相对绝对)

/* 当页面滚动时，设置此属性的元素不跟着滚动，始终显示在固定的页面位置，"left", "top", "right"，"bottom"指定位置*/
position: fixed (固定定位)

/* 当页面滚动时，设置此属性的元素滚动到指定的位置时，不再滚动，"left", "top", "right"，"bottom"指定位置 */
position: sticky (粘性定位)

子元素属性

/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right"，"bottom"属性进行移动 */

position: absolute (绝对定位)

相关属性

/* 当定位的盒子重叠在一起，有遮挡住的时候可以使用，值越大图层放在越上面 */
z-index

grid 网格布局

使用

/* 网格布局 */
display: grid;
/* 显示几列，几个值就是几列，数字是列宽 */
grid-template-columns: 10px 10px 10px;
/* 显示几行，几个值就是几行，数字是行高 */
grid-template-rows: 10px 10px 10px;

/* 百分比的方式 */
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;

/* repeat()函数简化 */
display: grid;
grid-template-columns: repeat(3, 33.33%); // 第一个参数显示几列，第二个列宽
grid-template-rows: repeat(3, 33.33%); // 第一个参数显示几行，第二个行高

水平垂直居中

行内块元素

1.

line-height：取height相同的值
text-align: center
2.

display: flex;
justify-content: center;
align-items: center;

块级元素

1. position + margin 清楚子元素的宽高
父元素 {
   position: relative;
}
子元素{
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -50px;
}
2. position + transform 不清楚子元素的宽高
父元素 {
   position: relative;
}
子元素{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
3. flex
父元素{
   display: flex;
   justify-content: center;
   align-items: center;
}

css 常用属性

VH单位

/* css中高度不好获取，使用vh单位表示可以看到的页面的高度 */

height: 100vh; // 表示可看到的页面的百分百高度

圆角

/* 四个值的顺序是：左上角，右上角，右下角，左下角 */

border-radius: 10px 10px 10px 10px; border-radius: 50% // 圆形

阴影

/*

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

*/

box-shadow: h-shadow v-shadow blur spread color

渐变

/* 从上到下，颜色可以写多个（默认情况下）*/
background-image: linear-gradient(#e66465, #9198e5);
/* 从左到右 */
background-image: linear-gradient(to right, red , yellow);
/* 对角 */
background-image: linear-gradient(to bottom right, red, yellow);

/* 透明度 rgb是颜色，a 是是否透明，1不透明，0透明*/

background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))

文本阴影

/*

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

*/

text-shadow: 5px 5px 5px #FF0000

文本溢出

显示一行，超出部分显示省略号

{

/* 不让换行 */

white-space: nowrap;

/* 溢出的部分隐藏 */

overflow: hidden;

/* 溢出的部分显示... */

text-overflow: ellipsis;

}

显示指定几行，超出的部分显示省略号

{

/* 溢出的部分隐藏 */

overflow: hidden;

/* 溢出的部分显示... */

text-overflow: ellipsis;

/* 指定显示行数 */

-webkit-line-clamp: 3;

display: -webkit-box;

-webkit-box-orient: vertical;

}

文本换行

/* 长文本换行 */
word-wrap:break-word;
/* 单词拆分换行 */
word-break: break-all;

鼠标移动到图片上放大

img:hover {
transform: scale(1.1); // 放大1.1倍
transition: 0.5s ease; // 0.5秒动画
}

// 如果不想超出父元素 overflow: hidden 设置溢出的图片隐藏

设置盒子宽度	width	参数取值：长度、百分比、auto(默认父级的宽度)
设置盒子高度	height	参数取值：长度
设置文本颜色	color: #000	参数表示：指定字体颜色
设置背景颜色	background-color: #aaa	参数表示：指定背景颜色
盒子设置边框	border: 5px solid red	参数分别表示：边框宽度、边框的样式、边框的颜色样式的选择分别有：solid 实线、dotted 点、dashed 虚线 outset 立体
盒子设置填充大小	padding	padding:10px 5px 15px 20px; 上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px padding:10px 5px 15px; 上填充是 10px 右填充和左填充是 5px 下填充是 15px padding:10px 5px; 上填充和下填充是 10px 右填充和左填充是 5px padding:10px; 所有四个填充都是 10px
盒子设置外边距大小	margin	margin:10px 5px 15px 20px; 上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px margin:10px 5px 15px; 上边距是 10px 右边距和左边距是 5px 下边距是 15px margin:10px 5px; 上边距和下边距是 10px 右边距和左边距是 5px margin:10px; 所有四个边距都是 10px
怪异盒子模型	box-sizing:border-box	标准盒子模型，设置后会增加原有标签的大小，如果不想改变大小，就要指定成怪异盒子模型
设置盒子的排版
方式一：兄弟div之间		float	浮动布局取值： left：浮动在左侧 right：浮动在右侧 inherit：继承父级的浮动方式
方式二：兄弟div之间，需要有父级div		position	定位布局父元素取值： relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。子元素取值： absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right"，"bottom"属性进行移动。
方式三：兄弟div之间，需要有父级div		display:flex	弹性布局指定弹性布局后，默认横向从左到右排列指定为弹性布局后，取值can：cnblogs.com/wywblogs/p/15403479.html

盒子中的内容过多超出盒子外		overflow	取值： hidden：超出的部分隐藏，不带滚动， scroll：超出的部分隐藏，滚动， auto：默认值scroll