Html，Css基础

最新推荐文章于 2022-06-05 18:44:56 发布

风中小白

最新推荐文章于 2022-06-05 18:44:56 发布

阅读量204

点赞数 1

文章标签： css html java javascript

本文链接：https://blog.csdn.net/qq_45595142/article/details/114014566

版权

一.Html基础标签

段落标签：
在这里插入图片描述
文本格式化标签：

div和span标签：

图像标签：

一般图片只设置宽或者只设置高，以免图片被压缩。

超链接标签：

可以设置target对目标窗口的弹出方式进行设置
在这里插入图片描述
如果href里面指定的是一个压缩文件，那么会下载文件

锚点连接：
锚点连接是在一个页面设置可以跳转到
表格标签:

table是表格标签，其中tr是每行，td是每一列，

在这里插入图片描述

表头可以使用th标签进行修饰，会被加粗和居中显示。

表格的属性：
在这里插入图片描述
合并单元格：

设置完了以后删除多余的单元格即可。

无序列表：
在这里插入图片描述
有序列表：

自定义列表：
在这里插入图片描述

Label标签：
在这里插入图片描述

二.Css样式表

选择器：

1.标签选择器：选择对应的标签进行修改。
2.类选择器：选择class=" ", 使用 . 什么
3.id选择器：使用#
4.通配符选择器：选择所有元素：*
5.后代选择器：会选择一个元素下的所有子元素：
在这里插入图片描述
6.子元素选择器：
只会选择子元素

7.并集选择器

8.伪类选择器

选择器权重：

字体设置：

font-family：设置字体
在这里插入图片描述
font-size：设置字体大小
font-weight：设置字体粗细，通常设置700为粗体，设置400为变细。
font-style:

文本颜色设置：color
文本对齐：text-align
文本装饰：text-decoration
行间距：line-height
会减去文字像素后平分分成三个部分，所以文字水平居中一般要设置行间距。
在这里插入图片描述
文本缩进：text-indent：2em ，文字开头缩进两个字符长度。

元素显示模式：

html元素一般分为行内元素和块元素。
块元素：
在这里插入图片描述
行内元素：

行内块元素：

元素之间可以转换：
转换成行内元素设置display：inline
转换成块元素设置display：block
转换成行内块元素设置display：inline-block
这样行内元素就可以设置宽高。

背景设置

背景颜色：background-color:
背景图片: background-image:url(图片路径)
在这里插入图片描述
一般设置背景时，默认是背景平铺的，可以通过
background-repeat：no-repeat设置不平铺，或者设置repeat-x，repeat-y设置沿着x轴或者y轴平铺。

背景图片的位置

可以通过background-position设置，
在这里插入图片描述
可以设置上下左右，例如：

图片在最中间先往右移动，然后往下移动。

位置的单位还可以通过精确单位确定：

混合使用：

背景图像固定：
在这里插入图片描述

背景图片的复合写法：
在这里插入图片描述
背景半透明：

Css的三大特性

层叠性：即相同样式设置出现时，会采用离代码近的样式使用。
继承性：即父元素拥有的样式，子元素也拥有。
优先性：权重越高的就会执行。

盒子模型

1.边框
在这里插入图片描述
边框设置时，会影响盒子的实际大小，所以在设置盒子的宽高时，要减去边框的大小才是原来盒子的大小。
例如：

所以在设置边框时，要注意边框大小带来的影响。

2.内边距
在这里插入图片描述
复合写法：

内边距也会影响盒子大小，解决方法和边框影响一样，删除对应宽高多出的像素。但是在盒子没有指定宽高的时候，padding的设置不会影响盒子的大小。

3.外边距
在这里插入图片描述
外边距让盒子居中：

行内元素和行内块元素水平居中：
text-align：center

外边距塌陷问题：
子元素的外边距大于父元素的外边距会覆盖父元素的外边距。
在这里插入图片描述

圆角边框

border-radius: px ,表示以px为半径的圆在边框的四个角，以这样显现出圆角的样子。

其实他是四个圆形的半径，分别是左上角，右上角，右下角，左下角。

盒子阴影

box-shadow:10px,10px,10px,10px,black；第一个参数是阴影在x轴的移动，第二个参数是阴影在y轴的移动，第三个参数是阴影的虚实程度，第四个参数是阴影的大小，最后一个是阴影的颜色。

浮动

浮动可以让元素水平排列一行。
在这里插入图片描述

清除浮动：
有时候父元素的高度并不确定，是随着内部的内容的多少来确定高度的，这个时候，如果内部的元素是浮动的，那么会导致父元素的高度为零，所以需要清除浮动。如果父盒子本身具有高度，那么就不需要清除浮动。

清除浮动的方法一：
额外标签法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*当某些特殊情况,父级元素无法确定高度有多少,例如很多页面都是有多少元素
        就显示多高,而且子元素都是浮动显示的,但是一旦浮动显示就不占空间
        此时父级元素的高度就会变为0，这个时候就需要取消浮动，就会影响父元素以外的元素*/
        .box {
            width: 900px;
            background-color: pink;
            margin: 10px auto;
            border: 1px solid black;
        }
        .son {
            float: left;
            width: 120px;
            height: 120px;
            background-color: blue;
        }
        .son1 {
            float: left;
            width: 120px;
            height: 120px;
            background-color: orange;
        }
        .footer {
            height: 120px;
            background-color: black;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="son"></div>
    <div class="son1"></div>
    <!--额外标签法,就是在浮动标签的最后一个位置加一个块级元素标签，然后设置clear: both
    就可以取消浮动所带来的影响-->
    <div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>

清除浮动的方法二：给父级元素添加overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*当我们要取消浮动的时候,
        对浮动元素的父级元素中添加overflow,
        他的值有hidden,scroll,auto*/
        .box {
            overflow: auto;/*给父级元素添加overflow*/
            width: 900px;
            background-color: pink;
            margin: 10px auto;
            border: 1px solid black;
        }
        .son {
            float: left;
            width: 120px;
            height: 120px;
            background-color: blue;
        }
        .son1 {
            float: left;
            width: 120px;
            height: 120px;
            background-color: orange;
        }
        .footer {
            height: 120px;
            background-color: black;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="son"></div>
    <div class="son1"></div>
</div>
<div class="footer"></div>
</body>
</html>

方法三，添加伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*在父级元素设置一个伪元素after ,就是创造一个虚拟行内标签(所以要转化为块级元素),
        跟额外标签法类似,
        只不过不用添加额外标签*/
        .clearfix:after {
            content: "";
            display: block;/*将伪元素转化为块级元素*/
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .box {
            width: 900px;
            background-color: pink;
            margin: 10px auto;
            border: 1px solid black;
        }
        .son {
            float: left;
            width: 120px;
            height: 120px;
            background-color: blue;
        }
        .son1 {
            float: left;
            width: 120px;
            height: 120px;
            background-color: orange;
        }
        .footer {
            height: 120px;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="box clearfix">
    <div class="son"></div>
    <div class="son1"></div>
</div>
<div class="footer"></div>
</body>
</html>

方法四，双伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*双伪元素比单个的after伪元素更强,他会在浮动元素的前后都生成一个伪元素
        以达到闭合浮动的效果*/
        .clearfix:before,.clearfix:after {
            content: "";
            display: table;/*将伪元素转化为表格*/
        }
        .clearfix:after {
            clear: both; /*取消浮动*/
        }
        .clearfix {
            *zoom: 1; /*为了适配ie 6和7*/
        }
        .box {
            width: 900px;
            background-color: pink;
            margin: 10px auto;
            border: 1px solid black;
        }
        .son {
            float: left;
            width: 120px;
            height: 120px;
            background-color: blue;
        }
        .son1 {
            float: left;
            width: 120px;
            height: 120px;
            background-color: orange;
        }
        .footer {
            height: 120px;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="box clearfix">
    <div class="son"></div>
    <div class="son1"></div>
</div>
<div class="footer"></div>
</body>
</html>

定位

在这里插入图片描述

相对定位：

绝对定位：
元素具有绝对定位的属性后，如果父元素没有定位，那么元素会以浏览器为参照进行移动。

在这里插入图片描述
子绝父相：一个元素想要在父元素中任意的移动，那么子元素需要设置定位就设置为绝对定位，父元素就设置成相对定位，因为相对定位不脱标。

固定定位:
在这里插入图片描述

风中小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Html，Css基础

一.Html基础标签段落标签：文本格式化标签：div和span标签：图像标签：一般图片只设置宽或者只设置高，以免图片被压缩。超链接标签：可以设置target对目标窗口的弹出方式进行设置如果href里面指定的是一个压缩文件，那么会下载文件锚点连接：表格标签:table是表格标签，其中tr是每行，td是每一列，表头可以使用th标签进行修饰，会被加粗和居中显示。表格的属性：合并单元格：设置完了以后删除多余的单元格即可。无序列表：有序列表：自定义列表：
复制链接

扫一扫