当前位置：首页 > news >正文

HTML—css

news 文章来源：https://blog.csdn.net/2302_78076476/article/details/141280977 2024/9/21 12:37:13

css概述

C S S 是 C a s c a d i n g S t y l e S h e e t s （级联样式表）。
C S S 是一种样式表语言，用于为 H T M L 文档控制外观，定义布局。例如，
C S S 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在 H T M L 文档中，而用
于定义表现形式的 C S S 在一个 . c s s 文件中或 H T M L 文档的某一部分。

基本语法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>/* 外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通
过link标签将外部样式表文件链接到HTML文档中.  */<link href="css/index.css" rel="stylesheet" /><style>/* css注释 *//* 内嵌样式表，也可以叫类选择器 */.p1{color: black;}/* 标签选择器，这个html文件里面所有的a标签，优先级小于前面三种 */a{color: bisque;size: 800px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}/* 统配选择器 给所有标签修饰 优先级最低*/*{color: brown;}/* id选择器  唯一的*/#pp{color: crimson;}</style></head><body><!--选择器优先级相同属性共同修饰一个标签，优先级高的修饰，如果属性不重复，优先级低的可以和优先级高的共同修饰标签优先级由高到低行内样式表-->id选择器-->类选择器-->标签选择器-->统配选择器--><!-- 行内样式表，只能对所在标签进行修饰，优先级最高 ，p1不能对其修饰--><a href="" class="p1" style="color: aqua;size: 70px;font-family: 楷体;">元神</a><a href="" class="p1">元神</a><!-- 使用外部样式表修饰标签，首先在头标签里面书写link标签 <link href="css文件地址" rel="stylesheet风格表格" />--><a href="" class="p2">元神</a><a>123</a><br /><a id="pp">元神</a></body>
</html>

伪类

C S S 伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>a{color: aqua;}/* 鼠标移入切换样式 */a:hover{color: purple;}/* 鼠标点击标签时自动切换样式 */a:active{color: black;}/* :focus鼠标聚集到这个标签，标签的样式切换到这个样式 */input:focus{background-color: purple;}img:hover{/* opacity透明度，1不透明，0.5半透明，0透明 */opacity: 0.5;}img:active{opacity: 0;}</style></head><body><a href="">百度</a><input type="button" class="p" value="保存"/><br /><input type="text" /><br /><input type="text" /><br /><img src="img/1.png" alt="" /></body>
</html>

块级，行级，行级块标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签 无论内容多少都独占一行 可以设置宽高 主要用来网页布局div块级标签，没有任何附加样式--><!-- 行级标签 只占内容的大小，由内容撑开，设置宽高没有用span行级标签，没有任何附加内容--><!-- 常用标签div span 表格 表单 a--><!-- 行级块标签不占一行又可以设置宽高 例如：img input-->aaa<img src="img/1.png" width="100" height="100" alt="" />aaa <br /><!-- display 可以修改标签样式 inline可以改变为行级标签 block 可以变为块级标签 none 可以取消标签 inline——block变为行级快标签 --><!-- 块级标签变行级标签 --><div style="width: 100px; height: 100px; background-color: purple;display: inline;">aaa</div><!-- 行级标签变块级标签 --><span style="width: 100px;height: 100px;background-color: purple;display: block;">aaa</span></body>
</html>

盒子模型

C S S 处理网页时，它认为每个标签都包含在一个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆
放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

盒子模型我们分为四个区域，内容区，内边距，边框，外边距。

盒子模型-内边距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p{width: 100px;height: 100px;background-color: purple;/* 设置内边距 */padding: 10px;}</style></head><body><!-- 盒子模型 网页布局就是摆放一个个盒子 --><!-- 每一个盒子分为四个区域内容区内边距边框外边距    每一个盒子大小=内容区+内边距+边框--><div class="p">盒子模型</div></body>
</html>

盒子模型-边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{background-color: purple;height: 100px;padding: 20px 304px;border: 1px gray solid;/* 盒子模型边框设计 */border-radius: 50px;/* 边框原型 */}input{width: 600px;height: 30px;}</style></head><body><!-- 边框 border：像素 颜色 样式 --><div><input type="text" class="p" /></div></body>
</html>

盒子模型-外边距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 100px;height: 100px;background-color: purple;margin-left: auto;margin-right: auto;/* 设置div居中 ，注意高度不可以这样设置，会默认为0*/}.p{width: 100px;height: 100px;background-color: gray;margin: 10px;}</style></head><body><!-- 外边距不影响大小，影响位置 --><div class="p"></div><div></div></body>
</html>

浮动

文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分
成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不
足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行
布局就会变得比较麻烦。

给标签添加浮动便可以摆脱文档流。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p{padding: 10px 30px;background-color: purple;float: left;}.p:hover{background-color: aliceblue;}.p1{width: 368px;margin:  auto;}.main{width: 300px;margin: auto;}.main-box{float: left;width: 100px;background-color: papayawhip;}</style></head><body><!-- 浮动： 浮动使原来的标签脱离文档流（二维平面），漂浮起来了float：left漂浮后会产生一个问题，浮动后的标签不会占用原来文档流的位置，下面的标签就会上移，影响布局可以在浮动后的标签后面添加div设置风格为clear对应左浮动还是右浮动--><div class="p1"><div class="p">新闻</div><div class="p">体育</div><div class="p">娱乐</div><div class="p">游戏</div><!-- 清除浮动 --><div style="clear: left;"></div>  </div><div>www</div><div class="main"><div class="main-box">left</div><div class="main-box">center</div><div class="main-box">right</div><div style="clear: left;"></div><div style="width: 300px; background-color: azure;">bottom</div></div></body>
</html>

定位

相对定位

相对定位是一个非常容易掌握的概念. 相对于它
的起点进行移动，移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位，
left right top bottom四个属性来设置标签的偏移量。

相对定位的特点
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.div1{background-color: aliceblue;width: 100px;height: 100px;position: relative;/* 相对定位 */left: 100px;/* 相对定位以自身位置为定位参照，不会让标签脱离文档流（二维平面） */}.div2{background-color: gray;width: 100px;height: 100px;position: relative;/* 相对定位 */top: 50px;/* 相对定位以自身位置为定位参照，不会让标签脱离文档流（二维平面） */}</style></head><body><div class="div1">div1</div><div class="div2">div2</div>		</body>
</html>

绝对定位

绝对定位是不占空间的，运用了
绝对定位的标签会脱离原来的文档
流，浮动起来，因此视觉上会其他
的标签重叠。
可以通过position: absolute; 开启
绝对定位，
left right top bottom四个属性来
设置标签的偏移量

绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.div1{background-color: aliceblue;width: 100px;height: 100px;position: absolute;/* 开启绝对定位标签立即脱离文档流 */left: 50px;/* 绝对定位的参照物，离他最近的开启了定位的父级标签，一般父级开相对定位 */}.div2{background-color: gray;width: 100px;height: 100px;position: relative;/* 相对定位 */top: 50px;/* 相对定位以自身位置为定位参照，不会让标签脱离文档流（二维平面） */}.div3{background-color: aqua;width: 300px;height: 300px;position: relative;}</style></head><body><div class="div3">div3<div class="div1">div1</div></div><div class="div2">div2</div>		</body>
</html>