HTML 入门（1）

最新推荐文章于 2024-08-26 22:59:06 发布

spider00001

最新推荐文章于 2024-08-26 22:59:06 发布

阅读量604

点赞数 4

分类专栏：笔记文章标签： html web css

本文链接：https://blog.csdn.net/qq_51299174/article/details/117672541

版权

笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、文本格式化、图像、超链接、表格、列表等。接着讲解了CSS的语法规范，如选择器、字体属性、文本属性、背景设置、盒子模型等，以及如何使用CSS进行网页布局和美化。文章还涵盖了浮动、定位等布局技术，以及CSS的层叠性和优先级概念。

摘要由CSDN通过智能技术生成

web标准

1.1 web标准的构成
（1）结构：用于对网页元素进行整理和分类------>HTML
（2）用于设置网页元素的版式、颜色、大小等外观样式----->CSS
（3）指网页模型的定义及交互的编写----->Java script

一

二

三

HTML

1.HTML基本结构标签

<html> 
	<head>
		<title>显示在url栏</title>
	</head>
	<body>
	
	</body>
</html>

html : 最大的标签，即根标签
head : 文档的头部
title : 页面标题
body : 文档主体

2.常用标签

2.1

<!DOCTYPE html> 文档类型声明
<html lang="en"> 语言种类（en代表英语；zh-CN代表中文）
<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>
</head>
<body>
    
</body>
</html>

2.2 标题

一共6级。

<h1> - <h6> 1-6由大到小

2.3 段落、换行

<p>段落</p> 根据浏览器窗口自动换行
<br/> 换行

2.4 文本格式化

<body>
    <strong>加粗1</strong>推荐使用
    1111111
    <b>加粗2</b>
    <em>倾斜1</em>推荐使用
    2222222
    <i>倾斜2</i>
    <del>删除线1</del>推荐使用
    3333333
    <s>删除线2</s>
    <ins>下划线1</ins>推荐使用
    4444444
    <u>下划线2</u>
</body>
</html>

在这里插入图片描述

2.5 盒子

<body>
    <div>独占一行1（大盒子）</div>123
    <div>独占一行2（大盒子）</div>1234
    <span>用来布局1（小盒子）</span>67657
    <span>用来布局2（小盒子）</span>6769
    <span>用来布局3（小盒子）</span>3578

</body>

在这里插入图片描述

2.6 图像

注：所用图片要和html文件放在同一个文件夹

<body>
    <h3>图片标签</h3>
    <img src="bai.png" />
    <h3>图片无法显示时，显示alt后面的文字</h3>
   <img src="bai.pn" alt="无法显示"/>
   <h3>title提示标签，鼠标悬停到图片上面，可以提示文字</h3>
    <img src="bai.png" title="这是个钟"/>
</body>

在这里插入图片描述
图片标签的属性：
weight:宽
height:高
（如果只设置一个，它会自动按照原图片大小的比例设置另一个）

<h3>图片标签</h3>
    <img src="bai.png" width="50"/>
    <h3>图片无法显示时，显示alt后面的文字</h3>
   <img src="bai.pn" alt="无法显示" width="100" height="200"/>
   <h3>title提示标签，鼠标悬停到图片上面，可以提示文字</h3>
    <img src="bai.png" title="这是个钟"  height="100" width="100"/>

在这里插入图片描述
border:设置边框粗细

<h3>图片标签</h3>
    <img src="bai.png" width="50" border="15"/>

在这里插入图片描述

2.7超链接

2.7.1（外部）：
href 是超链接地址，target为打开方式

<body>
    _self为当前页面打开（默认）
    <a href="http://baidu.com" target="_self">百度</a><br />
    _blank为新页面打开
    <a href="http://baidu.com" target="_blank">百度</a>
</body>

2.7.2（内部）:
内部超链接只写目标的项目路径即可

_self为当前页面打开（默认）
    <a href="neibu.html" target="_self">百度</a><br />

在这里插入图片描述
2.7.3 空链接

    <a href="#" target="_self">百度</a><br />

2.7.4下载链接
href里面写文件名即可

<a href="gwzTest.7z" target="_self">下载文件</a><br />

2.7.5网页元素链接
各种网页元素都可以添加超链接，比如：文本，图像，音频，视频等。
例：

	点击图片即可跳转到百度
    <a href="http://baidu.com" target="_self"><img src="bai.png"/></a><br />

2.8锚点链接

跳转到页面内的某个位置
href里面要多加一个#，代表要跳转位置的id是多少
要跳转的位置要有自己的id

<body>
    <a href="#life" >点击跳转</a>
    <h5 id="life">跳到了这里</h5>
</body>

2.9注释（快捷键：Ctrl + /）

<!-- 注释 -->

2.10特殊字符

（注意别忘记加分号）
在这里插入图片描述

2.11表格

table用于定义表格
tr用于定义表格中的行，必须嵌套在table中
td用于定义表格中的单元格的内容，必须嵌套在tr标签中（每个tr中有几个td，就有几列）

<body>
    <table>
        <tr> <td>姓名</td>  <td>性别</td>  <td>年龄</td> </tr>
        <tr> <td>张三</td>  <td>男</td>  <td>30</td> </tr>
        <tr> <td>李四</td>  <td>女</td>  <td>22</td> </tr>
    </table>
</body>

在这里插入图片描述
表头单元格：th
用于突出重要性，表头单元格的文字会加粗居中显示

<body>
    <table>
        <tr> <th>姓名</th>  <th>性别</th>  <th>年龄</th> </tr>
        <tr> <td>张三</td>  <td>男</td>  <td>30</td> </tr>
        <tr> <td>李四</td>  <td>女</td>  <td>22</td> </tr>
    </table>
</body>

在这里插入图片描述

table里面的属性：

在这里插入图片描述
例子：

<body>
    <table border="1" align="center" cellpadding="10" cellspacing="1" weight="200" height="300">
        <tr> <th>姓名</th>  <th>性别</th>  <th>年龄</th> </tr>
        <tr> <td>张三</td>  <td>男</td>  <td>30</td> </tr>
        <tr> <td>李四</td>  <td>女</td>  <td>22</td> </tr>
    </table>
</body>

在这里插入图片描述

2.12表格的结构标签

1、thead用于定义表格头部，thead内部必须有tr标签，一般是位于第一行
2、tbody用于定义表格的主体，主要用于放数据本体

<body>
    <table border="1" align="center" cellpadding="10" cellspacing="1" weight="200" height="300">
        <thead>
        <tr> <th>姓名</th>  <th>性别</th>  <th>年龄</th> </tr>
        </thead>
        <tbody>
        <tr> <td>张三</td>  <td>男</td>  <td>30</td> </tr>
        <tr> <td>李四</td>  <td>女</td>  <td>22</td> </tr>
        </tbody>
    </table>
</body>

2.12合并单元格

1、先确定是跨行还是跨列
2、找到目标单元格，写上合并方式:
跨列：<td colsapn= "2"> </td>（如果是跨列，则目标单元格是最左边的）
跨行：<td rowsapn="2"> </td>（如果是跨行，则目标单元格是最上边的）
3、删除多余的单元格

<!-- 跨列 -->
<body>
    <table border="1" align="center" cellpadding="10" cellspacing="1" weight="200" height="300">
        <thead>
        <tr> <th>姓名</th>  <th>性别</th>  <th>年龄</th> </tr>
        </thead>
        <tbody>
        <tr> <td>张三</td>  <td colspan="2">男</td>   </tr>
        <tr> <td>李四</td>  <td>女</td>  <td>22</td> </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

<!-- 跨行 -->
<body>
    <table border="1" align="center" cellpadding="10" cellspacing="1" weight="200" height="300">
        <thead>
        <tr> <th>姓名</th>  <th>性别</th>  <th>年龄</th> </tr>
        </thead>
        <tbody>
        <tr> <td>张三</td>  <td>男</td>  <td>30</td> </tr>
        <tr> <td rowspan="2">李四</td>  <td>女</td>  <td>22</td> </tr>
        <tr>  <td>男</td> <td>32</td> </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

2.13列表标签

无序列表：
1、无序列表的各个列表之间没有顺序之分，是并列的
2、<ul></ul>之间只能放<li></li>,直接在<ul></ul>内写其他标签或文字是非法的
3、<li></li>之间相当于一个容器，可以容纳所有元素
4、无序列表带有自己样式属性，但在实际使用时，我们会使用CSS来设置

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li><p>Hello world</p></li>
    </ul>
</body>

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

<body>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li><p>Hello world</p></li>
    </ol>
</body>

在这里插入图片描述
自定义列表：
dl用于定义描述列表，该标签会与dt（定义项目/名字）和dd（描述每一个项目/名字）一起使用

<dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        <dd>名词1解释3</dd>
</dl>

2.14表单

表单构成：
表单域
表单控件
提示信息

1、表单域：包含表单元素的区域。会把它范围内的表单元素信息提交给服务器。
2、表单元素：
type：根据不同的type属性，输入字段有多种形式
在这里插入图片描述
例子1：

<form action="" method="POST" name="AAA">
        <input type="text" name="username" placeholder="用户名"><br />
        <input type="password" name="paasword" placeholder="密码"><br />
</form>

在这里插入图片描述
例子2：radio多选一

<body>
    <form action="" method="POST" name="AAA">
        <input type="text" name="username" placeholder="用户名"><br />
        <input type="password" name="paasword" placeholder="密码"><br />
        性别：男<input type="radio"> 女 <input type="radio"> <br />
    </form>
</body>

在这里插入图片描述
例子3：checkbox多选

<body>
    <form action="" method="POST" name="AAA">
        111 <input type="checkbox" > 222 <input type="checkbox" > 333 <input type="checkbox" > <br />
    </form>

在这里插入图片描述
例子4：
要想实现多选一，必须给每个选项相同的name
value 是name对应的默认值

<body>
    <form action="" method="POST" name="AAA">
       性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
    </form>
</body>

例子5:
如果checked属性值为"checked",则默认勾选这个选项.(主要用于单选按钮与复选框)
maxlength规定输入字段中的字符的最大长度.

<body>
    <form action="" method="POST" name="AAA">
        用户名：<input type="text" name="username" maxlength="6"><br />
        密码：<input type="password" name="pwd" ><br />
        性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"><br />
        是否同意用户协议：<input type="radio" name="agree" checked="checked" >
    </form>
</body>

在这里插入图片描述
例子6:
submit定义提交按钮,它会把表单数据发送到服务器
reset按钮可以还原表单元素的初始的默认状态
button普通按钮,结合js使用
file文件域按钮,上传文件

<body>
    <form action="http://www.baidu.com" method="POST" name="AAA">
        用户名：<input type="text" name="username" maxlength="6"><br />
        密码：<input type="password" name="pwd" ><br />
        <input type="submit" name="注册"><br />
        <input type="reset" value="重新填写"><br/>
        <input type="button" value="获取短信验证码"><br />
        <input type="file" value="上传头像">
    </form>
</body>

在这里插入图片描述
例子7：
lable标签
input：元素定义标注标签。它用于·绑定一个表单元素，当点击lable内的文本时，浏览器就会自动将焦点（鼠标）转到或者选择对应的表单元素上，增加用户体验。
注意：lable里面的for属性的值应与相关元素的id属性的值相同。

<body>
    <form action="http://www.baidu.com" method="POST" name="AAA">
        用户名：<input type="text" name="username" maxlength="6"><br />
        密码：<input type="password" name="pwd" ><br />
        性别： <label for="sex1">男</label> <input type="radio" name="sex" id="sex1">
              <label for="sex2">女</label> <input type="radio" name="sex" id="sex2"><br/>
    </form>
</body>

例子8：
select表单标签
在页面中，折叠多个选项。
注意：
select里面至少包含2个option;
在option中定义selected="selected"时，当前项即为默认选中项。

<body>
    <form action="http://www.baidu.com" method="POST" name="AAA">
        用户名：<input type="text" name="username" maxlength="6"><br />
        密码：<input type="password" name="pwd" ><br />
        性别： <label for="sex1">男</label> <input type="radio" name="sex" id="sex1">
              <label for="sex2">女</label> <input type="radio" name="sex" id="sex2"><br />
        籍贯：
            <select>
                <option>北京</option>
                <option>上海</option>
                <option selected="selected">广州</option>
                <option>内蒙古</option>
            </select>
    </form>
</body>

在这里插入图片描述
例子9：
textarea文本域
用于输入多行文本。
rows定义高度
cols定义宽度

<form action="http://www.baidu.com" method="POST" name="AAA">
            <textarea rows="4" cols="20">
12312
            </textarea>
    </form>

在这里插入图片描述

CSS（Csacading Style Sheets）

作用：主要用来美化网页

语法规范：

由两个主要部分组成：选择器及声明

·选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
·属性与属性值以“键值对”的形式出现
·属性是对指定的对象设置的样式属性，例如字体大小，文本颜色
·属性与属性值之间用 : 隔开
·多个键值对之间用 ; 区分

1.基础选择器

选择器就是根据不同需求把不同标签选出来。
在这里插入图片描述

1.标签选择器：
用HTML标签名作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式。
优点：快速地为页面中同类型的标签统一设置样式
缺点：不能差异化设置样式，只能选择全部的当前标签

<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>
        p {
            color: rgb(18, 216, 216);
            font-size: 20px;
        }
        div {
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
   <p>112223e324</p><br />
   <div> AAA </div>
   <div> BBB </div>
</body>

在这里插入图片描述
2.类选择器：
类选择器在HTML中以属性class表示，在CSS中以一个 . 号表示

<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>
      .Bob {/*  .类名   */
          color:rgb(115, 184, 38);
      }
      .K {
          color: rgb(196, 23, 124);
      }
    </style>
</head>
<body>
  <div class="Bob" >
      aaa
  </div>
  <p class="K">CCCC</p>
</body>

多类名:

标签可以分别具有这些类的样式
提高代码复用性

<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>
      .Bob {
          background-color: aqua;
      }
      .K {
          width: 200px;
          height: 200px;
      }
    </style>
</head>
<body>

  <div class="K Bob"></div>

</body>

在这里插入图片描述
id选择器
HTML元素以id属性来设置选择器，CSS中id选择器以“#”来定义

<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>
      #name {
          background-color: tan;
          width: 100px;
          height: 300px;
      }
    </style>
</head>
<body>

  <div id="name"></div>

</body>

在这里插入图片描述
注意：id 与类的区别

类选择器可以被使用多次,id只能被使用一次

通配符选择器：
会设置页面中所有的元素

<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>
      * {
          color: blueviolet;
      }
    </style>
</head>
<body>

  <p>123344</p>
  <label>
      <li>deffsrgt</li>
  </label>
  <ol>
      <li>rgtshyj</li>
  </ol>
</body>

在这里插入图片描述

2.CSS字体属性

font-family属性定义文本的字体类型(如果有多个字体，根据电脑是否装有改字体，从左向右选取)
font-size设置字体大小
font-weight设置字体粗细
font-style: italic设置字体倾斜
font-style: normal设置字体不倾斜

<style>
      * {
        font-size :18px;
        font-family: " Microsoft Yahei ",Arial, Helvetica, sans-serif;
        font-weight: 200;
        font-style: italic;
        font-style: normal;        
      }
</style>

复合属性：多行属写到一起，顺序有规定，且必须要设置font-size和font-family，其他的不写会自动设为默认值
格式：（Vscode中：鼠标停在 font 上可以查看）

font: font-style font-weight font-size/line-height font-family;

例子：

<style>
      * {
        font: italic 200 18px 'Microsoft Yahei' ;
      }
</style>

3.CSS文本属性

在这里插入图片描述

3.1文本颜色：
三种书写方式：

color: aqua;//预定义颜色值
color: #000;//十六进制
color: rgb(189, 115, 19);//RGB代码

3.2对齐文本：

<style>
      * {
        text-align: center;
        text-align: right;
        text-align: left;//默认
      }
    </style>

3.3装饰文本

<style>
      * {
        text-decoration: none;/*无*/
        text-decoration: underline;/*下划线 */
        text-decoration: overline;/*上划线*/
        text-decoration: line-through;/*删除线*/
      }
     </style>

3.4文本缩进

<style>
      * {
        /* 文本的每段的第一行缩进多少 */
        text-indent: 20px;
        /* em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前文字未设置大小，则会按照父元素的1个文字大小 */
        text-indent: 3em;
      }
    </style>

3.5行间距
控制文字与行之间的距离

<style>
      * {
        line-height: 26px;
      }
</style>

在这里插入图片描述

4.CSS引入方式

4.1CSS的三种样式表

在这里插入图片描述

内部样式表：
写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个style标签中。
理论上可以放到HTML的任何一个地方，但一般放到head标签中。
通过它方便控制整个页面中的元素样式设置。

<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>
      * {
        text-indent: 20px;
        font-style: normal;
      }
    </style>
</head>
<body >

  <p >123344</p>
  <label>
      <li>deffsrgt薛仁贵支付宝的</li>
  </label>
  <ol>
      <li>rgtshyj</li>
  </ol>
</body>

行内样式表：
直接在元素标签内部的style属性设定CSS样式，适合修改简单样式

  <p style="color: aqua;font-family: 'Courier New', Courier, monospace;">123344</p>

外部样式表：
将CSS样式放到CSS文件中，之后把CSS文件引入到HTML页面中使用
在这里插入图片描述
例子：

在这里插入图片描述

5.Emmt语法

5.1快速生成HTML语法
在这里插入图片描述

6.CSS的复合选择器

在这里插入图片描述

6.1后代选择器
可以选择父元素里面的子元素，其写法就是将外层标签写到前面，内存标签写在后面，中间用空格分割，当标签发生嵌套时，内层标签就成为了外层标签的后代。可以套好几层。

元素1 元素2 {
			样式声明
}

上述标签表示选择元素1 里面所有的元素2 。

元素1左边可以加它的类名：

.类名 元素1 元素2 {
			样式声明
}

6.2子选择器
它只能选择作为某元素的最近一级子元素。
语法：

元素1>元素2 {样式声明}

例子：

<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>a {
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="P">
        <a href="#">AAA</a>
        <ul>
            <li><a href="#">BBB</a></li>
        </ul>
    </div>
</body>

在这里插入图片描述
6.3并集选择器
多个元素同时设置

元素1,元素2,.... {样式声明}

6.4伪类选择器
6.4.1链接伪类选择器

<style>
        /* 1.未访问的链接，a:link 把没有点击过的（未访问的）链接选出来 */
       a:link {
           color: #000;
       }
       /* 2. 点击过的链接，a:visited 选择点击过的（访问过的）链接 */
       a:visited {
           color: rgb(177, 211, 26);
       }
       /* 3.选择鼠标放上去的那个链接 a:hover  */
       a:hover {
           color: rgb(96, 81, 230);
       }
       /* 4.选择的是鼠标按下去，但未弹起的那个链接 a:active */
       a:active { 
           color: rgb(189, 13, 121);
       }
    </style>

注意事项：

为确保生效，应该按照 LVHA的顺序声明 :link - :visited - :hover - :active
记忆法 love hate
因为a 链接在浏览器中具有默认样式，所以我们在开发过程中需要给链接单独设置样式

6.4.2 :focus 伪类选择器
用于选取获得光标的表单元素。
注意：input:focus 中间不能有空格！！！

<style>
        input:focus {
            background-color: rgb(211, 12, 45);
        }
    </style>

7.CSS的元素显示模式

在这里插入图片描述

元素显示模式就是元素以什么方式进行显示，
HTML元素一般分为块元素和行内元素。

7.1块元素
特点：

1.自己独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素。

包含：
h1–h6,p,div,ul,li,ol等

注意：

1.文字类的元素内不能使用块级元素
2.p标签主要用于存放文字，因此p里面不能放块级元素，特别是div
3.h1–h6等也是文字类块级标签

7.2行内元素(内联元素)
特点：

1.相邻行内元素在一行上，一行可以显示多个
2.高、宽直接设置是无效的
3.默认的宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其他行内元素

包括：
a,strong,b,em,i,del,s,ins,u,sapn等

7.3行内块元素
同时具有块元素和行内元素的特点
比如：img,input,td等

特点：

1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行显示多个
2.默认宽度就是它本身内容的宽度
3.高度，宽度，外边距以及内边距都可以控制

7.4元素显示模式转换
一个模式的元素使用另一个模式的特性。

<style>
        a {
            width: 100px;
            height: 100px;
            background-color: red;
            display: block;/*转换为块级元素*/
</style>

<style>
        div {
            width: 299px;
            height: 123px;
            background-color: aqua;
            display: inline;/*转换为行内元素*/
        }
    </style>

<style>
        span {
            width: 200px;
            height: 123px;
            background-color: brown;
            display: inline-block;/*转换为行内块元素*/
        }
    </style>

7.5小技巧：让文字垂直居中。只需要把文字的行高设置为盒子高度即可

8.CSS的背景

在这里插入图片描述

8.1背景颜色：

    background-color: 颜色值;

默认是透明的：background-color: transparent;

8.2背景图片

   background-image: url(图片路径);

默认是没有图片：background-image: none;

8.3 背景平铺
注意，如果同时设置背景颜色和背景图片，那么背景图片会覆盖背景颜色

<style>
        div {
            background-image: url();
            background-repeat: no-repeat;/*背景图片不平铺*/
            background-repeat: repeat;/*背景图片在纵向和横向平铺（默认）*/
            background-repeat: repeat-x;/*背景图片在横向平铺*/
            background-repeat: repeat-y;/*背景图片在纵向平铺*/
        }
</style>

8.4背景图片位置
语法：background-position: x y;
其中x,y是坐标，可以是方位名词也可以是精确单位。
在这里插入图片描述

    <style>
        div {
        	background-image: url();
            background-position: center right;            
            background-position: right;
            background-position: 50ch;
            background-position: 10%;
        }
    </style>

注意：

如果两个参数都是方位名词，那么参数的顺序不影响
如果只写一个方位名词或者精确数值，那么另一个默认是居中（center）
方位名词和精确数值可以混合使用，但是顺序一定是x,y

8.5背景图片固定（背景附着）

    <style>
        div {
            background-image: url();
            background-attachment: scroll;/*背景图片随着对象内容滚动而滚动（默认）*/
            background-attachment: fixed;/*背景图片固定*/
        }
    </style>

8.6背景图片混合设置

约定顺序为：background: 背景颜色背景图片地址背景图片平铺背景图像滚动背景图片位置

<style>
        div {
            background: transparent url() repeat-y fixed top;
        }
    </style>

8.7背景色半透明
最后一个参数是设置透明度（0-1）。
注意，最后一个参数的小数点左边的0可以省略，例如写 0.3 和 .3 是等价的。

    <style>
        div {
            background: rgba(0, 0, 0, .3);
        }
    </style>

9.CSS的三大特性

9.1层叠性
相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题。
原则：

样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会覆盖

例如：

    <style>
        div {
            background: rgba(0, 0, 0, .3);/*被覆盖*/
            font-size: 50px;/*不会被覆盖*/
        }
        div {
            background-color: aqua;/*背景色为aqua*/
        }
    </style>

9.2继承性
子标签继承父标签的某些样式。比如： text- , font- , line- 等，以及cokor属性。

例子：
行高的继承：
在这里插入图片描述

9.3优先级
当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，按照重叠性原则
选择器不同，按照选择器权重（如下图，由上到下权重依次增加）

在这里插入图片描述
注意：

在这里插入图片描述
复合选择器会有权重叠加：

10.盒子模型

10.1网页布局的本质

1.先准备好相关的网页元素，网页元素基本上是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应的位置
3.往盒子里面装内容

10.2盒子模型的组成
CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，和实际内容。

10.3边框（border）
例子：

    <style>
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;/*边框宽度*/
            border-style: solid;/*边框的样式*/
            border-color: pink;/*边框颜色*/
        }
    </style>

例子的简写：

    <style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid pink;/*没有顺序*/
        }
    </style>

其中 border-style 的参数如下图：
（注：默认为none）
在这里插入图片描述
也可以分别设置四条边：

    <style>
        div {
            width: 200px;
            height: 200px;
            border-top: 5px solid pink;
            border-bottom: 5px solid red;
            border-left: 8px solid yellow;
            border-right: 3px solid blue;
        }
    </style>

在这里插入图片描述
表格的细线边框

<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>
        table,
        th,
        td {
            border-collapse: collapse;/*表示把相邻的边框合并在一起*/
            border-color: aqua;
            border-width: 2px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <table>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>1111</td>
            <td>2222</td>
            <td>3333</td>
            <td>4444</td>
            <td>5555</td>
        </tr>
    </table>
    <!-- <div></div> -->
</body>

在这里插入图片描述
注意：
如果给盒子设置了边框，那么盒子的实际大小会变大，相当于在盒子上”套“了一个边框。
解决方法：

测量盒子时，不量边框
如果测量时包含了边框，则需要在weight/height里面减去边框宽度

10.4内边距
padding属性用于设置内边距，即边框与内容之间的距离。

<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;
            border-width: 3px;
            border-color: brown;
            border-style: solid;
            padding-top: 20px;/*上边距*/
            padding-bottom: 30px;/*下边距*/
            padding-left: 20px;/*左边距*/
            padding-right: 50px;/*右边距*/
        }
    </style>
</head>

<body>
    <div>adjehbckjery
        aerkcbherrtr
        wegfkwutbgiwt
        wrfnniw4g</div>
</body>

在这里插入图片描述
简写：
例子：

注意：

padding也会增加盒子的实际大小。
如果子标签不设置weight/height，则子标签的大小不会”撑开“盒子

10.5外边距（margin）
用于控制外边距，即盒子之间的距离
在这里插入图片描述
它的简写方式和padding相同

典型应用：
外边距可以让盒子水平居中，满足以下2个条件即可：

盒子必须指定宽度（width）
盒子的左右的外边距都设置为auto。

第一种
	<style>
        div {
            width: 900px;
            margin-left: auto;
            margin-right: auto;
            background-color: aqua;
        }
    </style>
第二种
	<style>
        div {
            width: 900px;
            margin: auto;
            background-color: aqua;
        }
    </style>
第三种
    <style>
        div {
            width: 900px;
            margin: 0 auto;
            background-color: aqua;
        }
    </style>

注意：

以上方法是让块级元素水平居中，
行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

10.6嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素上有外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法：

可以为父元素定义上边框(border: 1px solid transparent;)
可以为父元素定义上内边距(padding: 1px;)
为父元素添加 overflow:hidden

10.7清除内外边距

<style>
/*以下代码写到CSS第一行*/
        * {
            padding: 0;
            margin: 0;
        }
</style>

注：

行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级和行内块级元素就可以。

10.8 小知识点：
去掉ul中li的小圆点list-style: none;

10.9圆角边框

	<style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            height: 400px;
            width: 400px;
            border-radius: 30px;/*设置圆角边框的圆的半径*/
            background-color: aqua;
        }
    </style>

如何做一个圆形的盒子：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            height: 400px;
            width: 400px;
            border-radius: 50%;/* 50%代表宽度和高度的一半 */
            background-color: aqua;
        }
    </style>

如何做一个圆角矩形：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            height: 400px;
            width: 400px;
            border-radius: 200px;/* 半径设置为高度的一半即可 */
            background-color: aqua;
        }
    </style>

圆角的简写：

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            height: 400px;
            width: 400px;
            background-color: aqua;
            border-radius: 10px 20px 30px 40px;/* 左上角 右上角 右下角 左下角*/
            
            border-radius: 40px 10px;/*左上角 右下角*/
            
            border-radius: 40px; /*四个角*/
            
            border-radius: 10px 40px 80px;/*左上角 右上角和左下角 右下角*/
            
            /* 也可以分别设置 */
            border-top-left-radius: 20px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;

        }
    </style>

10.10盒子阴影
在这里插入图片描述

box-shadow 值的顺序：水平阴影垂直阴影模糊距离阴影尺寸阴影颜色外部或者内部;
注意：默认是外部，且不可以写outset

	<style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            height: 200px;
            width: 200px;
            background-color: aqua;
        }

        .B:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3) intset;
        }
    </style>

10.11文字阴影
在这里插入图片描述

	<style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            height: 200px;
            width: 200px;

        }

        .B p {
            color: rgb(31, 22, 37);
            text-shadow: 10px 10px 10px rgba(0, 0, 0, .3); /*文字阴影*/
        }
    </style>

11.CSS浮动

11.1传统网页布局的三种方式

普通流（标准流）
浮动
定位

11.2标准流（文档流）
即标签按照规定好的默认方式排列
例如：

块级元素会独占一行，从上到下顺序排列
常用元素：div , hr , h1 ~ h6 , ul , ol , dl , form , table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
常用元素：sapn , a , i , em 等

11.3浮动（float）

概念：
float 属性可以创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘。

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .B {
            float: left;
            height: 200px;
            width: 200px;
            background-color: blueviolet;
        }

        .A {
            float: right;
            height: 200px;
            width: 200px;
            background-color: blueviolet;
        }
    </style>

<body>
    <div class="B">
        <p>13e43KHBSDEB</p>
    </div>
    <div class="A">
        <p>jwrvhev</p>
    </div>
</body>

在这里插入图片描述
浮动的特性：

脱离标准流的控制，移动到指定位置（俗称脱标）
浮动的盒子不再保留原先的位置，即该位置可以被其他盒子占用。但是浮动的盒子会覆盖在不浮动的盒子上面

在这里插入图片描述

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级元素宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐
浮动元素会具有行内块元素特性
任何元素都可以浮动，不管原先是上面模式的元素，添加浮动后都具有行内块元素相似的特性。
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

11.4浮动布局的注意点

浮动和标准的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余兄弟元素也要浮动（一动全动）
浮动的盒子只会影响浮动盒子后面的标准流。

11.5清除浮动
本质：

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有浮动，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

语法：选择器 { clear: 属性值;}
在这里插入图片描述
方法：

额外标签法
父级添加 overflow 属性
父级添加after元素
父级添加双伪元素

额外标签法：
在这里插入图片描述

父级添加 overflow 属性：
在这里插入图片描述

父级添加after元素：
在这里插入图片描述

父级添加双伪元素：
在这里插入图片描述

12.定位

12.1定位组成
定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
边偏移就是定位的盒子移动到最终位置，有top , botton , left , right 四个属性。
在这里插入图片描述
12.1静态定位

12.2相对定位

特点：

1.它是相对于原来的位置来移动的（即参照物为旧位置）
2.原来在标准流的位置将继续占有，后面的盒子任然以标准流的方式对待他，（不脱标，继续保留原有位置）

语法 : 选择器 { position: relative; }

12.3绝对定位

特点：

元素移动位置时，是相对于它的祖先元素来说的
如果祖先元素有定位（绝对，相对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
如果没有祖先元素，或者祖先元素没有相对定位，则以浏览器为准定位（Document文档）
绝对定位不再占有原先的位置。（脱标）

语法：选择器 { position: absolute; }

12.4子绝父相
在这里插入图片描述

12.5固定定位
它是指元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：选择器 { position: fixed; }

特点：

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动
固定定位不再占有原先的位置。（脱标）

小技巧：固定在版心的右侧位置

让固定定位的盒子left: 50% ；.走到浏览器可视区（也可以看作版心）的一半位置。
让固定定位的盒子margin-left: 版心距离一半的距离；，多走版心宽度的一半位置。

10.6粘性定位
可以认为是相对和

spider00001

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
HTML 入门（1）

web标准1.1 web标准的构成（1）结构：用于对网页元素进行整理和分类------>HTML（2）用于设置网页元素的版式、颜色、大小等外观样式----->CSS（3）指网页模型的定义及交互的编写----->Java scriptHTML1.HTML基本结构标签<html> <head> <title>显示在url栏</title> </head> <body> </body&g
复制链接

扫一扫