HTML+CSS

我是鸹貔

已于 2024-03-27 15:50:02 修改

阅读量716

点赞数 10

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

于 2024-03-27 11:13:34 首次发布

本文链接：https://blog.csdn.net/m0_62740234/article/details/137071593

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
</head>
<body>
</body>
	<script>
	</script>
</html>

选择器

这里主要是外部选择器，外部选择器也就是在css文件中。html文件通过代码<link rel="stylesheet" href="index.css">来使用index.css文件中的样式

基本选择器

元素选择器E{}

/* 元素选择器E{} 用元素名称做选择器 *{}代表所有元素 */
div{
	background-color:purple; 
	color:pink;
}
/* div,span{}表示所有div和span */
div,span{background-color: #2ac; color:beige; font-size: 20px;}

属性选择器

div[id] /*有id属性的div*/ 
div[id^=xx] /*id属性为xx开头的div*/ 
div[id$=xx] /*id属性为xx结尾的div*/ 
div[id*=xx] /*id属性包含xx的div*/

id选择器

#yy { background: red;color: #aaa;font-size:20px } 
/* div#yy表示即是div又得是id="yy"*/
div#yy{ background: red;color: #aaa; font-size:20px }

class选择器

.zz { background: red;color: #aaa;font-size:20px } 
/*表示即是div又得是class="zz"*/ 
div.zz { background: red;color: #aaa;font-size:20px }

关系选择器

父子，包含，兄弟等关系。

/* A B:表示在A下的B 不一定是父子关系，但是包含关系*/ 
body span { background: red;color: #aaa;font-size:20px }
/* A>B:表示B必须是A的儿子 */ 
body>div>span { background: red;color: #aaa;font-size:20px }

/* selector1~selector2 selector1的弟弟(selector2)*/ 
/* class是php的标签的弟弟的class是java的 **/
.php~.java { background-color: #2ac; color:beige; font-size: 20px; }
/*selector1,selector2{} 对selector1和selector2的所有 */

伪元素选择器

也可以与属性选择器组合，例如div[id]::first-letter就表示具有id属性的div标签的首字母

/* 以下两个都是对于块级标签的。常见的块级标签：div、p（段落文本）、 h1-h6（标题）、ul（无序列表）、li、dl（自定义列表）、dt、dd*/
/* 首字母 */ 
div::first-letter { color:red; font-size:40px; }
/* 首行 */ 
div::first-line { color:red; font-size:40px; }

首行：对于中文来说无论浏览器大小是什么都是是第一行文本，而对于一串没有空格的英文字母浏览器不会自动分行，当在css中加入使用属性word-break: break-all;就会变得和中文一样。具体可见。

/* before：前置添加，after：后置添加  添加的是content*/
div::before{
    content:"你好";
    color:#2ac;
    font-size:20px;
}

伪类选择器

结构性伪类选择器

 first-child 第一个孩子
 last-child 最后一个孩子
 nth-child(n) n从1开始
 nth-child(2n+1) n从0开始
 nth-child(odd) 奇数
 nth-child(even) 偶数
 nth-last-child() 倒着数

UI状态伪类选择器

/* :hover 悬停状态 */
div:hover{
	background-color:pink;
}
/* :focus 焦点状态 */
input:focus{
	background-color:pink;
}
/* :checked 选中状态 */
/* valid 验证通过状态  配合input标签的required*/

常见标签

<input type="">其中type的值不同，所表达的标签类型也不相同，不同的标签也有其特有的属性，但是公共的都有id，calss等等。

type的取值	所表达的标签	具体说明
text	单行文本框
password	密码框
radio	单选框	name属性值相同时是一组选择，只能选择一个
chekbox	多选框
file	文件选择器
color	颜色拾取器
date	日期	年月日
datetime-local	日期时间	年月日+时间
week	周	选择周
number	数字文本框	[min，max]以step增加或减少，初始显示value
range	滑块	最左端是min，最右端是max，初始位置在value
button	普通按钮	显示为value
submit	提交按钮	显示为value，可以配合from标签
reset	重置按钮	显示为value，可以配合from标签

<!-- 下拉框 -->
<select>
     <option value="语文"></option>
     <option value="数学"></option>
     <option value="英语"></option>
</select>
<!-- 多行文本域 
	初始显示n行m列，可以由鼠标调整文本框大小
-->
<textarea rows="n" cols="m"></textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a name="aa"></a>
    <!-- span 文本标签 -->
    <span style="color:red;font-size:50px">h</span><span>ello</span>

    <!-- div 竖着布局的标签 -->
    <a name="div"></a>
    <div>1</div>
    <div>1</div>

    <!-- h1-h6标题 -->
    <a name="h"></a>
    <h1>2</h1>
    <h2>2</h2>
    <h3>2</h3>
    <h4>2</h4>
    <h5>2</h5>
    <h6>2</h6>
    <!-- 段落标签 -->
    <a name="p"></a>
    <p>3</p>
    <p>3</p>

    <!-- 超链接标签 
        href:设置资源的路径
        target:打开窗口的方式
            _self：前者是默认值，在当前窗口打开
            _blank：后者是在新窗口打开
            
    -->
    <a href="https://www.bilibili.com/" target="_blank">点击跳转</a><br>
    <!-- 锚点标签
        <a name="aa"></a> 定义锚点
        href:使用#，例如:href="#aa",会跳转到<a name="aa"></a>
        position:fixed;固定位置，不会随着滚轮而滚动
    -->
    <div style="position:fixed;right:100px;bottom:20px;font-size:30px;">
        <a href="#aa">跳转到页面顶部</a><br>
        <a href="#div">跳转div</a><br>
        <a href="#h">跳转h</a><br>
        <a href="#p">跳转p</a><br>
    </div>

    <!-- 图片标签
        src引用图片资源，alt当图片加载失败时显示的内容
        绝对路径：图片在磁盘中的位置
        相对路径：图片与html文件的关系
            在同一目录下：src="***.png"
            图片在与html文件同一目录的img目录中：src="img/***.png"
            img与html文件的上一级在同一目录中：src="../img/***.png"
        也可以直接加载网址
        设置图片格式：使用style或者直接width=10px;height=10px;等等。
    -->
    <img src="index.jpg">

    <!-- 列表标签 
        无序；ul
        有序：ol。type="A":以ABC...顺序，strat="3"从C开始，默认是123...。
    -->
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
    </ul>

    <ol>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
    </ol>

    <!-- 表格标签 
        table：border：设置表格边框的像素；格式：使用style或者直接width=10px;height=10px;等等
                cellspacing：单元格之间的距离；cellpadding：单元格的填充度
                头：<thead></thead>；身体：<tbody></tbody>；尾：<tfoot></tfoot>
                tr：一行空间。
                td：td是tr里的单个单元格。rowspan：合并列，colspan：合并行
    -->
    
    <table border="1" >
        <thead>
            <tr>
                <td colspan="2">上午</td>
                <td colspan="2">下午</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>8:00-10:00</td>
                <td>10:10-12:00</td>
                <td>14:00-16:00</td>
                <td>16:10-18:00</td>
            </tr>
            <tr>
                <td rowspan="2">领导讲话</td>
                <td>大会主题报告</td>
                <td>分会专题报告</td>
                <td rowspan="2">总结报告</td>
            </tr>
            <tr>
                <td>专家报告</td>
                <td>分组讨论</td>
            </tr>
            <tr>
                <td colspan="4">全天参观考察无锡国家物联网中心</td>
            </tr>
        </tbody>
    </table>

        <!-- 框架标签（窗口标签）
        嵌套其他页面
     -->
    <iframe src="https://www.bilibili.com" framenorder="0" width="800px" height="400px" name="cc"></iframe>
    
    <!-- 在"cc"窗口打开 -->
    <a href="https://www.huya.com/" target="cc">点击跳转</a><br>

    <!-- 音频资源
        controls：手动播放并让播放器显示
        autoplay：自动播放
        loop：循环播放 
    -->
    <audio src="URL" controls></audio>

    <!-- 视频播放
        controls：手动播放并让播放器显示
        autoplay：自动播放
        loop：循环播放 
        有控制宽高的属性style或者直接使用属性 
    -->
    <video src="URL" autoplay loop></video>
</body>
</html>

盒子

通过设置display可以改变盒子的级别

块级盒子(dispaly:blok)

也叫块级元素，标签，独占一行，支持设置宽高，例如div，p，ul，li

内联级盒子(dispaly:inline)

也叫内联级元素，标签，不独占一行，不支持设置宽高（由内容决定），例如span，a

内联块级盒子(dispaly:inline-blok)

也叫内联级元素，标签，不独占一行，支持设置宽高，例如img，input

弹性盒子(dispaly:flex)

一个父级元素设置成为弹性盒子，其子元素默认横向布局，子元素永远不会超出父元素

盒子的样式

在这里插入图片描述

![[Pasted image 20230730211541.png]]

属性设置：

width和height默认对内容区进行设置（内容区box-sizing: content-box;，以边框为标准box-sizing: border-box;）。
填充区。padding取值可以有1，2，3，4个，也可以通过paadding-x（其中x=top,left,buttom,right）设置特定方向的填充大小。
边框区。通过border-width，border-style，border-color分别设置边框宽度和边框样式以及边框颜色，也可以直接通过border来设置，例如border:5px soild red边框宽度为5像素，样式为实线，颜色为红色。结合top,left,buttom,right对各方向设置，例如border-top-width，border-left-color。
外边距。margin的取值也是可以有1，2，3，4个，也可以通过margin-x（其中x=top,left,buttom,right）设置特定方向的边距大小。

布局

<div class="s1">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
</div>

.s1{
    width:800px;
    background-color:red;
}

.left{
    width:200px;
    height:100px;
    background-color:#2ac;
}

.middle{
    width:200px;
    height:150px;
    background-color:yellow;
}

.right{
    width:200px;
    height:300px;
    background-color:blueviolet;
}

浏览器展示：

![[Pasted image 20230731194633.png]]

如果要让left，middle，right这三个块级元素横向排列可以有以下几种方法

使用float:left，它的作用是让标签浮起来，不去占一个地方，而是漂浮在上方，但是如果没有设置父级元素的高度，那么父级元素会消失，需要手动设置宽度，使用overflow:hidden那么父级元素的高度会与子级元素最大的高度相同，子级宽度<父级宽度，则宽度会剩余。
使用内联机元素实现横向布局。将子元素设置为diaplay:inline-block，但是每一个子元素之间会有空字符，解决方法有两种。
弹性盒子模型。给父级加上属性display:flex，子级会默认横向从左向右布局（flex-direction:row），row-reverse是从右往左横向布局，column从上往下从小布局，column-reverse是从下往上纵向布局。横向排列默认不会换行，也就是说不管子元素的宽度之和有多大都会被压缩在父级元素之内（flex-wrap:nowrap）,设置换行则将取值改为wrap。order作用在子元素上，order取值越小那么这个子元素越靠前。

弹性盒子模型的布局

justify-content

用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值
flex-start	默认值。从行首起始位置开始排列。
flex-end	从行尾位置开始排列。
center	居中排列。
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-evenly	均匀排列每个元素，每个元素之间的间隔相等。
space-around	均匀排列每个元素，每个元素周围分配相同的空间。

align-item

align-item 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。元素被拉伸以适应容器
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。

align-content

多行布局，使用flex-warp控制换行之后就可以使用多行布局。

值
flex-start	所有行都在顶端
flex-end	底部
center	居中排列
space-between	空白放中间
space-evenly	空白放周围
space-around	空白均匀分布

background符合属性

background-color颜色
background-image背景图片或者渐变颜色，linear-gradient线性渐变，linear-gradient(dirction,color1,color2,color3...)
background-repeat背景是否重复，repeat重复，no-repeat不重复，repeat-x横向复，repeat-y纵向重复，round:保障图片完整为前提，放不下的时候对放下的部分做大小调整 space：个体完整，调整空隙
background-size:宽度，高度(单位像素，百分数) 设置背景大小。cover(覆盖)
background-position:横向偏移量，纵向偏移量。设置背景位置
background-attachment: 设置背景图片是否滚动，scroll(默认滚动)， fixed背景图片固定窗口不固定

css长度单位

绝对单位

px(像素)，pt(点)，in(英寸)，cm(厘米)，mm(毫米)

相对单位

%(以父级元素的宽度为参考维度)
em(以父级元素的字体大小为参考维度)
rem(以根元素的字体大小为参考维度)
vw(以浏览器视图窗口的宽为参考维度)
vh(以浏览器视图窗口的高为参考维度)
vmin,vmax(以浏览器视图窗口最小值或者最大值参考维度)

响应式布局

.parent {
}
.parent .nums1{
}
.parent .nums2{
}
.parent .nums3{
}
@media screen and (min-width:1000px) {
    .parent {
    }
    .parent .nums1{
    }
    .parent .nums2{
    }
    .parent .nums3{
    }
}
@media screen and (max-width:400px) {
    .parent {
    }
    .parent .nums1{
    }
    .parent .nums2{
    }
    .parent .nums3{
    }
}

以上代码就体现了响应式布局，页面宽度大于等于1000px，就会使用第二个样式，小于等于400px，使用第三个样式，其他情况使用第一个样式。

position

static:代表静态模式
fixed:代表固定模式，不随浏览器的滚动而滚动 ,样放自己原来的空间,参考物是浏览器
relative:代表相对模式随浏览器的滚动而滚动，保留自己原来的空间,参考物是自己原来的位置
absolute代表绝对模式随浏览器的滚动而滚动，释放自己原来的空间,参考物是浏览器
结合模式,父级使用相对模式,子集使用绝对模式,随浏览器的滚动而滚动,释放自己原来的空间,参考物是父级元素
两个relative的元素可以使用z-index可以设置定位层级，值越大，越在上层。

服务器字体

定义方式：

@font-face{
	font-family:name;
	src:url("1.tff")
}

使用时通过font-family:name来访问。

过渡动画 transition

transition-property设置指定属性进行过渡动画
transition-duration设器动画的持续时间
transition-timing-function设置动画的渐变速度，其值有linear(匀速)，ease(由慢到快，由快到慢) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快，由快到慢)
transition-delay设置动画延迟时间
可以直接transition：border 2s linear 2s,2s width ease 5s，对属性border以及width分别进行过渡动画的设置

帧动画 animation

帧动画的定义

@keyframes 动画的名称{
	百分数 | to |from {
		...
	}
}

帧动画的使用

animation-name 设置动画名称
animation-duration 设置动画的持续时间
animation-timing-function 设置动画的渐变速度，其值有linear(匀速)，ease(由慢到快，由快到慢)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(由慢到快，由快到慢)
animation-delay 设置动画的延时时间
animation-iteration-count 设置动画执行次数，无穷次（infinite）
animation-direction 设置动画的方向， (交替)
animation-play-sate 设置动画的播放状态，paused(暂停)