HTML+CSS入门总结

hl_5400

已于 2023-02-05 13:32:42 修改

阅读量278

点赞数

文章标签： html css Powered by 金山文档

于 2023-01-03 00:31:16 首次发布

本文链接：https://blog.csdn.net/m0_47385454/article/details/128522333

版权

常用标签

h1-h6 标题标签

p 段落标签

hr 水平线标签

i（iconfont字体图标的容器来使用）斜体标签

b、strong 粗体

sub 文本下角标

sup 文本上角标

del 删除线

ins 插入线

元素分类

行内元素

例子：a、b、strong、br、span等

特点：①不会独占一行，会在一行上集中排列，知道该行无法排列为止②通常是包裹其他的行内元素以及文本信息③不允许设置元素的宽、高，行内元素的宽高由其内容决定

块元素

例子：h1、hr、p、div、ul、ol等

特点：①会独占页面的一行排列显示②可以嵌套任何的块元素、行内元素或文本信息（特例p元素不能嵌套其他的块元素）③可以设置宽高，默认的宽度是父元素的宽度

行内块元素

例子：img、input、td、select、label、textarea等

特点：①可以设置宽高②不会独占一行

列表标签

列表标签：HTML中将列表分为3类：有序列表（ol）、无序列表（ul）、定义列表（dl）

有序列表

<ol>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期日</li>
  </ol>

结果：

无序列表

<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期日</li>
  </ul>

结果：

定义列表（类似于解释型列表）

<dl>
    <dt>苹果</dt>
    <dd>多为扁球型、以红色与青色为外皮常见</dd>

    <dt>香蕉</dt>
    <dd>果身弯曲、成熟后表现为外皮偏黄</dd>

    <dt>梨</dt>
    <dd>近圆形或比较扁、果皮多为黄绿色</dd>
 </dl>

结果：

超链接

a标签的三种跳转方式：①跳转到其他网页（外部或者本地）②跳转到当前页面的任意位置（锚点）③暂时禁用跳转（#javaScript:;）

跳转到其他网页

<a href="http://www.baidu.com" target="_blank">百度一下</a>

跳转到当前页面的任意位置

<a href="#需要跳转到的id">锚点跳转到，xxx段落</a>

3.暂时禁用跳转

抖动跳转：href属性为空，就会导致页面的抖动跳转！

预防抖动跳转：href属性值设置为 #JavaScript:;

<a href="#javaScript:;">抖动跳转</a>

路径

路径分为2类，绝对路径与相对路径

绝对路径：任何文件和资源都存在一个绝对路径，通过绝对路径可以让其他任何位置的文件准备的找到！

<img src="E:\CourseProjects\projects\html+css\day20221221\task\image\0752fa2f22e479e0.png" alt="">

2.相对路径：以当前文件为中心，进行寻找对应的其他资源和文件！

相对路径的书写方式： / (当前文件所在的根目录) ./(当前文件所在目录路径) ../(当前文件所在的上一级目录路径)

<img src="html+css\day20221221\task\image\0752fa2f22e479e0.png" alt="">

注意：在项目的实际开发中，以相对路径为主！尽可能的不要使用绝对路径访问资源！

HTML文档中如何使用CSS

1.行内样式（内联样式）

在HTML中每一个元素都存在一个全局属性style，通过它来设置元素样式

问题：①只能对一个标签元素生效②如果需要大量整改页面样式时，修改很麻烦③内敛样式的优先级特别高，不利于后续选择器进行修改

<div style="color: red;">hello world</div>

2.内部样式表

在HTML文档中，通过style标签来设置文档相关的CSS样式属性

问题：样式的复用率不高

<style>
    div {
      color: red;
    }
  </style>

3.外联样式文件（最佳方式）

新建一个.css的样式文件，然后HTML文档中通过link标签引入CSS文件，link标签位置写于head标签中。

优点：①文件复用性强②方便统一更改③利于浏览器的缓存机制，加快网页的加载

<link rel="stylesheet" href="demo.css">

CSS基础选择器

元素选择器：通过元素的标签名进行选择，该方式会选择页面中所以同名的元素

2.id选择器：通过标签元素的id属性值，来选择对应的元素，注意id属性是唯一的

格式：#id值

3.类选择器：通过标签元素的class属性值，来选择同类别的元素

格式： .class值

4.通配符选择器：选择页面中所以的元素

格式：*

/* 元素选择器  格式:  标签名 */
div {
  color: red;
}       

span {
  color:pink;
}

p {
  color: yellow;
}

h1 {
  color: blue;
}


/* id选择器  格式： #id值 */
#box1 {
  color: red;
}


/* 类选择器 格式： .class值 */
.mydemo {
  color: red;
}


/* 通配符选择器  格式： * */
* {
  color: red;
}

CSS复合选择器

复合选择器分为：交集选择器与并集选择器

1.交集选择器：同时满足多个选择器的元素才能被选中

注意：各选择器之间没有任何的符合包括空格

div.test {
  color: red;
}

2.并集选择器：被选择的元素只需要满足其中一种选择器即可被选中

注意：各选择器之间是用逗号进行分隔

div,
span,
p {
  color: red;
}

CSS关系选择器

关系选择器：由两个或多个其他选择器组合构成

html中各元素，如果通过关系来区分的话，可以大致分为以下几种：

父元素：该元素直接去包含了子元素的元素称为父元素

子元素：被父元素直接包裹的元素，叫做子元素

兄弟元素：拥有共同的父元素的元素称为兄弟元素

祖先元素：包裹着其他元素的元素就是祖先元素，父元素其实也是特殊的祖先元素！二级嵌套或多级嵌套的元素！

后代元素：被祖先元素的嵌套包裹的元素都可以称为是后代元素，子元素是特殊的后代元素

1.子代选择器

格式：选择器1>选择器2>选择器3...

2.后代选择器

格式：选择器1 选择器2 选择器3...

.father p {
  color: red;
}

<body>
  <div class="father">
    <p>苹果</p>
    <div>
      <p>香蕉</p>
    </div>
  </div>
</body>

结果：

注意：后代选择器所包含的范围更广！因为子元素也是特殊的后代元素！

子代选择器它只会去看父元素下的子元素！它不会管元素下的其他后代元素！

3.兄弟选择器

格式：

1. 选择器1+选择器2 选中指定元素后面的第一个兄弟元素

2. 选择器1~选择器2 选中指定元素后面的所以兄弟元素

CSS属性选择器

属性选择器: 通过标签元素自身的某个属性来选择元素

[属性名] 选择所有含有该属性的元素

[属性名=’属性值‘] 选择所有含有该属性并且值是指定数据的元素

[属性名^=‘属性值’] 选择所有含有该属性并且也指定字符开头的元素

[属性名$=’属性值‘] 选择所有含有该属性并且也指定字符结尾的元素

[属性名*=‘属性值’] 选择所有含有该属性并且属性值中拥有指定的字符的元素

CSS伪类

伪类：不存在的类，是一些特殊的类！代表的是元素的某种状态

在css中可以将伪类进行分类，分成两大类：

结构型伪类：与html结构相关的类

动态伪类：与用户的交互相互的类

伪类的语法一般是： :伪类名

注意：伪类选择器大多数情况下不会单独进行使用，通常和其他选择器配合使用

CSS结构伪类选择器

:first-child 父元素下的第一个子元素

li:first-child{
  color: red;
}

  <ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期日</li>
  </ul>

结果：

:last-child 父元素下的最后一个子元素

:nth-child() 父元素下的第n各子元素

注意：以上这些伪类都是将父元素下的所有子元素进行排序的，包括不同类型的节点！

:first-of-type 父元素下同类型的子元素进行排序中的第一个子元素

:last-of-type 父元素下同类型的子元素进行排序中的最后一个子元素

p:first-of-type{
  color: red;
}
span:last-of-type{
  color: blue;
}

<div>
  <p>星期一</p>
  <p>星期二</p>
  <span>星期三</span><br>
  <span>星期四</span><br>
</div>

结果：

:nth-of-type() 父元素下同类型的子元素进行排序中的任意的子元素

注意：以上的三个伪类的功能和之前的三个伪类是类似的，不同点是他们只在同类型元素中进行排序

CSS动态伪类选择器

:link 用来表示没有被访问过的超链接(只能用于a标签)

:visited 用来表示已经被访问过的超链接(只能用于a标签)

:hover 表示鼠标移入到某元素内（用于任何元素）

:active 表示点击某元素 (用于任何元素)

CSS伪元素选择器

伪元素选择器：伪元素，是一种假的页面元素！会动态的进行改变！更多是表示页面中一些特殊的位置

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

注意：以下两个伪元素必须搭配css中的content属性进行使用！

::before 元素的最开始的位置

::after 元素的末尾位置

div::before {
  content: 'he';
  color: red;
}

div::after {
  content: 'ld';
  color: blue;
}

<div class="div01">llo wor</div>

结果：

CSS层叠性

一个元素被多个相同的选择器选中时，选择最后一个（最靠近元素的一个选择器）属性作为该元素的css属性值。

CSS选择器优先级

优先级：在css的各个基础选择器中，选择器的权重不同

权重从低到高

继承的样式：无限低

通配符选择器： 0，0，0，0

元素选择器： 0，0，0，1

类/属性/伪类选择器: 0，0，1，0

id选择器： 0，1，0，0

行内样式(标签的style属性)： 1，0，0，0

!important 无穷大(注意该方式慎用！)

注意：如果有多个选择器组合，那么会自动将各基础选择器的权重值相加得到最终的权重值；但是不管选择器如何组合，它权重的最高位是由其最高的选择器来决定的。

CSS继承性

子类继承父类一些样式，不是所有的样式属性都允许被继承，只是特定的一些属性才能够被继承。

可继承的属性：字体相关的（font-）文本相关的(text-) 列表相关的(list-) 字体颜色(color) 等

盒模型

盒模型（盒子模块、框模型）：

css将网页中的所有元素都可看作成一个矩形盒子

每一矩形盒子都是由以下几个部分组成：

1.内容区（content）

2.内边距 (padding)

3.边框（border）

4.外边距 (margin)

css中设置盒子的边框，由以下三个属性决定：

边框的宽度： border-width

边框的颜色： border-color

边框的样式： border-style

利用css提供的简写属性： border：1px solid red

border-style 边框的样式：

solid 实线

dotted 点状虚线

dashed 虚线

double 双实线

none 无边框（默认值）

内边距：内边距是指内容区与边框之间的距离

可以分别通过css属性设置：

padding-top 上内边距

padding-right 右内边距

padding-left 左内边距

padding-bottom 下内边距

外边距：围绕元素的空白区域

可以分别通过css属性设置：

margin-top 上外边距设置正值或者负值

margin-right 右外边距

margin-left 左外边距

margin-bottom 下外边距

注意：内边距的大小设置会影响盒子可见框的大小，外边距不会。

行内元素的盒模型

①行内元素不支持设置宽度和高度！

②行内元素可以设置padding，但是垂直方向的padding不会影响页面，不起作用

③行内元素可以设置border，但是垂直方向的border不会影响页面的布局

④行内元素可以设置margin，但是垂直方向的margin不会影响布局

元素的溢出

子元素的大小超过了父元素，则子元素就会从父元素中溢出。

处理溢出通过css的overflow属性处理溢出的子元素部分

可选值：

visible 默认值子元素从父元素中溢出，在父元素外部的位置显示

hidden 溢出的内容将会被裁剪，不会进行显示

auto 根据溢出的方向生成滚动条，通过滚动条的方式查看子元素所有的内容

元素类型转换

display实现转换：

inline：设置为行内元素

block：设置为块元素

inline-block：设置为行内块元素

table（作为了解）: 设置为表格元素

none：将元素设置为不显示(是完全不存在于页面，不是简单的隐藏)

元素的隐藏：

1.display:none; 完全不存在于页面

2.visibility:hidden; 不显示，但占据位置

盒子尺寸

通过css的box-sizing属性可以改变盒模型的类型：

content-box 默认值，标准盒模型内容区 + 边框 + 内边距共同决定的

border-box width + height决定可见框大小（相当于固定一下盒子的尺寸）

CSS一些其它常用属性

opacity 透明度：0-1范围值

outline 轮廓属性（设置方式与border相似，与border不同的是outline不占位置）

border-radius 元素圆角（值为50%可以设置成圆）

div{
  width: 30px;
  height: 30px;
  background-color: red;
  /* 设置透明度 */
  opacity: 0.5;
  /* 设置轮廓 */
  outline: 4px solid #ccc;
  /* 设置圆角 */
  border-radius: 50%;
}

<div></div>

结果：

CSS一些其它常用属性

opacity 透明度：0-1范围值

outline 轮廓属性（设置方式与border相似，与border不同的是outline不占位置）

border-radius 元素圆角（值为50%可以设置成圆）

清除列表的序号样式：

list-style: none;

清除超链接的下划线：

text-decoration: none;

居中小技巧

文本居中（父元素中设置）

text-align: center;

line-height: 设置与父元素的高度;

将盒子居中（子元素中设置）

margin: 0 auto;

浮动属性

float 属性设置元素的浮动：

none 默认值元素不浮动

left 元素向左浮动

right 元素向右浮动

注意：元素一旦设置了浮动以后，水平布局是非常方便的！但是元素会完全从文档流中脱离！不再占用文档流中的位置！

.father{
  width: 500px;
  height: 200px;
  background-color: #ccc;
}
.father>div:first-child{
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}
.father>div:last-child{
  width: 200px;
  height: 200px;
  background-color: blue;
  float: right;
}

  <div class="father">
    <div>left</div>
    <div>right</div>
  </div>

结果：

浮动后父元素高度塌陷

解决高度塌陷问题：

1.给父元素设置固定的高度，防止子元素浮动引起的塌陷

2.给父元素开启BFC模块

BFC就是一个特殊的领域！该领域不会受到其他元素的布局影响！

overflow：hidden；目前来说最优解，影响是最小的对整个文档！

给父元素设置浮动：

float：left；该方式不建议使用！

高度塌陷最好方式

利用伪类元素选择器::after与::before

.clearfix::after,
.clearfix::before {
  content: '';
  display: table;
  clear: both;
}
.father {
  width: 150px;
  background-color: #ccc;
}
.son1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

  <div class="father clearfix">
    <div class="son1"></div>
  </div>

结果：

清除浮动

当一个盒子设置浮动（层级升高），另一个盒子未设置浮动（被浮动盒子遮盖）

.father{
  width: 200px;
  height: 400px;
  background-color: #ccc;
}
.father>div:first-child{
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}
.father>div:last-child{
  width: 200px;
  height: 200px;
  background-color: blue;
}

  <div class="father">
    <div>box1</div>
    <div>box2</div>
  </div>

解决方案：在未设置浮动的盒子中设置清除浮动

clear: both;

clear属性值：

none : 允许两边都可以有浮动对象

both : 不允许有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

定位

css中的position属性来设置定位：

static 默认值元素是静止的没有开启定位的模式

relative 开启元素的相对定位（参照自身原本的位置，不会脱离文档流）

absolute 开启元素的绝对定位（如果父元素开启了定位，则相对与父元素；如果没有，则最终找到html。会脱离文档流）

fixed 开启元素的固定定位（参照于浏览器的视口进行定位，不常用）

sticky 开启元素的粘滞定位（可以在元素到达某个位置时将其固定，不常用）

注意：相对定位是对页面布局影响最小的定位方式。

设置元素的偏移量（开启定位后根据需要设置偏移量）：

top 定位元素和基准点上方向的距离

left 定位元素和基准点左方向的距离

right 定位元素和基准点右方向的距离

bottom 定位元素和基准点下方向的距离

注意：一般情况下（上与下设置一个）（左与右设置一个），加起来设置两个即可。

定位开启后层级会发生变化：

可以自行更改层级：

z-index: 数值;

元素背景

background-image: url('');

①图片的背景重复方式的设置 background-repeat：

repeat 默认值，背景会沿着元素x轴y轴双方向重复

repeat-x x轴方向重复

repeat-y y轴方向重复

no-repeat 背景图片不重复

②位置设置 background-positon：

1.具体的坐标值

2.方位词 top left right bottom

③背景展示的范围 background-clip：

border-box 默认值背景在边框的下方

padding-box 背景不会在边框，只出现在内容区和内边距

content-box 仅在内容区域显示

④背景图片的大小设置 background-size：

1.cover 将元素铺满，图片宽高最短那边，比例不变

2.contain 将元素铺满，图片宽高最长那边，比例不变

3.px

4.半分比

HTML表单标签

input:

常见的type属性(常用的):

text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

button 普通按钮控件

submit 提交按钮控件

reset 重置按钮控件

select 下拉列表（下拉项 option）

label 可通过其for属性绑定控件的id值

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #8A6765;
}
.box_form{
  width: 430px;
  height: 430px;
  background-color: #D7CFCA;
  margin: 50px auto;
  border-radius: 5px;
}
/* 靠左文字 */
.title_left{
  display: inline-block;
  width: 90px;
  height: 30px;
  text-align: center;
}
.input1{
  width: 280px;
  height: 30px;
  font-size: 12px;
  padding-left: 10px;
  border-radius: 8px;
  border: 1px solid #ACA3A6;
}
.title-box{
  width: 100%;
  height: 30px;
  margin: 20px 0;
}
form{
  width: 100%;
  padding-top: 30px;
}

.title-box2{
  width: 430px;
  height: 30px;
  margin: 20px 0;
}
.zuce{
  width: 100px;
  height: 36px;
  font-size: 18px;
  border-radius: 10px;
  color: white;
  background-color: #796A6D;
  display: block;
  margin: 0 auto;
}

<div class="box_form">
<form action="">
  <div class="title-box">
    <label class="title_left" for="user">用户名</label>
    <input class="input1" id="user" type="text" name="user" placeholder="请输入用户名">
  </div>
  <div class="title-box">
    <label class="title_left" for="pwd">密码</label>
    <input class="input1" id="pwd" type="password" name="pwd" placeholder="请输入密码">
  </div>
  <div class="title-box">
    <label class="title_left" for="repwd">确认密码</label>
    <input class="input1" id="repwd" type="password" name="repwd" placeholder="请再次输入密码">
  </div>
  <div class="title-box">
    <label class="title_left" for="email">邮箱</label>
    <input class="input1" id="email" type="text" name="email" placeholder="请输入邮箱">
  </div>
  <div class="title-box">
    <label class="title_left">性别</label>
    男
    <input type="radio" name="sex" value="男" checked>
    女
    <input type="radio" name="sex" value="女">
  </div>
  <div class="title-box">
    <label class="title_left">年龄</label>
    <select name="year" id="">
      <option value="">19~25岁</option>
      <option value="19">19岁</option>
      <option value="20">20岁</option>
      <option value="21">21岁</option>
      <option value="22">22岁</option>
      <option value="23">23岁</option>
      <option value="24">24岁</option>
      <option value="25">25岁</option>
    </select>
  </div>
  <div class="title-box2">
    <input class="zuce" type="submit" value="注册">
  </div>
</form>
</div>

结果：

还有个上传文件的：

<input type="file">

动画帧

    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      /* 为该元素设置动画帧 */
      /* 动画帧的名字  move */
      /* 动画整体持续的事件  5s */
      /* 动画整体播放的速度是匀速播放 linear */
      /* 动画重复播放  infinite*/
      animation: move 5s linear infinite;
    }

    /* 创建了一段动画帧 */
    @keyframes move {
      from {
        margin-left: 0px;
      }


      to {
        margin-left: 500px;
      }
    }

CSS动画帧实现轮播图例子

*{
  margin: 0;
  padding: 0;
}
.box1{
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  overflow: hidden;
}
ul{
  width: calc(5 * 100%);
  height: 400px;
  list-style: none;
  margin-left: 0px;
  animation: lunbo linear 10s infinite;
}
ul>li{
  width: 400px;
  height: 400px;
  float: left;
}
li:nth-child(1){
  background-color: rgb(102, 255, 0);
}
li:nth-child(2){
  background-color: rgb(187, 252, 23);
}
li:nth-child(3){
  background-color: rgb(255, 242, 0);
}
li:nth-child(4){
  background-color: rgb(255, 0, 242);
}
li:nth-child(5){
  background-color: rgb(0, 247, 255);
}

@keyframes lunbo{
  0%,10%{
    margin-left: 0px;
  }
  25%,35%{
    margin-left: -100%;
  }
  50%,60%{
    margin-left: -200%;
  }
  75%,85%{
    margin-left: -300%;
  }
  100%{
    margin-left: -400%;
  }
}

  <div class="box1">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>