html和css的基本语法

阅读：评论：0

html和css的基本语法

本文本适用于复习

html的基础语法

1.<h1>-<h6>是标题的由大到小

2.<p>这是段落

3.<a>是可以加超文本链接的其中加 href 在输入网络地址就可以实现页面的跳转也可以引用另一个HTML文件

<a href="网络地址或者另一个文件地址">文本信息</a>

4.<br>表示换行,单元素

5.<img>他是图片导入

6.<ol>和<li>是有序列表<ul>和<li>是无序列表

7.<table>是表格<tr>和<td>是表格的单border这个是表格的线（以左上为目标）

<table border="1" width="宽度" height="高度"><tr><td colspan="左右合并 保留左边删除右边">单元格</td><td rowspan="上下合并 保留上边删除下边">单元格</td></tr>
</table>

8.<form>表单，给用户输入一个可以提供数据的方式跟后端有关

<foem action="服务器地址" method="get少量提交数据 post大量提交数据" name="表单名称" ></foem>

<foem>
文本<input type="submit"按钮用于提交 value="更改按钮文本"><input type="password"输入的数用点号或星号显示用于隐藏输入的内容>
</foem>

9.<span>内容

10.<em>注重语气

11.块元素是上下摆放独占一行，行内元素是左右摆放自身大小，行内块元素是不换行能够识别宽高

12.<div>他就是一个容器标签

<header></header>头部

<nav></nav>导航

<section></section>定义文档中的节,比如章节、页眉、页脚

<aside></aside>侧边栏
<footer></footer>脚部
<article></article>代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

14.可以在别的文件夹下创一个.css文件然后用link来获取文件改变全局

15.style是内部样式 * 星号是全局选择同样优先级最低一般只做初始化用

. 英文的点是类选择器通过定义一个名字来给单个元素上样式

<head>.输入你定义的词{color:red}
</head>
<body><p class="随便定义一个英文词">hhhh</p>
</body>

类选择器用途最广泛，id选择器通过给元素定义一个id来更改他的样式用#来区分只能用一次

<head><style>#haha你定义的词{color:red}</style>    
</head>
<body><p id="haha 定义一个词">hhhhh
</p>
</body>

合并标签可以用逗号来合并

p,h3,.haha,{}

内联样式选择器直接在元素名类定义用style来定义优先级最高

<p style="red">

选择器的优先级CSS中,权重用数字衡量

元素选择器的权重为:1

class选择器的权重为：10

id选择器的权重为: 100

内联样式的权重为：1000

优先级从高到低：行内样式 > ID选择器> 类选择器> 元素选择器

css字体

font-size：00px 设置大小

font-weight：100-900字体由细到粗，这个是最常用的 /bold定义粗体/bolder定义更粗/lighter定义更细/

2.<i>i标签是斜体/font-style:normal；这个是恢复默认字体/font-family：字体样式

css背景

1.先在boby里面定义一个div然后再head里面定义div的大小和颜色

<head>.class定义的名字{width:宽度height：高度backgound-color:颜色backgound-image:url（图片）backgound-repat:repeat—x水平重复y垂直重复on-repeat都不重复，默认平铺backgound-size：宽度和高度可以100px也可以100%，cover铺满最大的比例这个是最常见的，contain把图片铺大尽可能的铺满但是不变形backgound-positon：（left左 right右 centr中）（top上 center中 bottom下）还可以用百分比来也可以用像素单位}
</head>
<div class="定义名字"></div>

文本属性

设置文本的位置大小等属性

<head>h3{font-size：50px设置文本字体大小text-align: left居左right居右center居中text-decorayion:underline定义下划线ovreline定义上划线line-through定义删除线text-transform:captialize定义首字母大写uppercase定义全部大写lowercase定义全部小写text-indent:30px首行文本缩进30是两个字的位置}
</head>
<body><h3>文本内容</h3>
</body>

表格

<head>table{border—collapse：collapse折叠效果变成单边框}table,td{border:1px像素 solid实线 red颜色 width：400px宽度height：400px高度}td{text-align:left居左right居右center居中vertical-align:top居上center居中bottom居下padding: 20px 上下左右撑开background-color: aqua表格背景颜色color: aliceblue字体颜色}
</head>
<table><tr><td>单元格</td></tr>
</table>

选择器

后代选择器

<h>
ul li{ui里面所有li标签中间用空格隔开}
</h><ul>
<li>aaa</li></ul>

子代选择器

<h>div>p{只会运用于下一级标签更深层的不生效div里面的div不生效}
</h>
<div><p>hhh</p><ul><li><p>hhh</p></li></ul>
</div>

相邻兄弟选择器

<h>h1+p{只有h1里面的第一个p生效h1也不会生效因为第二个p跟h1隔开了相邻只能往下相邻}
</h>
<h1>HHH</h1>
<P>hhh</P>
<p>hhh</p>

通用兄弟选择器

h1~p{h1下面的所有p标签都生效隔开也生效只能往下选择}
<h1>hhh</h1>
<P></P>
<div></div>
<P></P>

盒子

让显示出来的效果更好看

<style>div{width:宽度 height:高度padding:50px 10px  （加个-可以设置上下左右left左，right右，top上，bottom下）这个是内边距上下都填充50px左右都填充10px或者只填一个数值那就是上下左右都是这个值border: 3px solid aqua   3px是边框的像素大小solid是这个边框是实线aqua是边框的颜色margin：50px 20px  这个是外边距当前内容的的上下撑开50px左右也撑开20px}
</style>
<div>hhh
</div>

弹性盒子

.A{
display: flex设置为弹性盒子默认为从左往右
flex-direction：row,row-reverse,column,column-reverse,,,row横向从左往右对齐row-reverse反转横向对齐从右往左对齐column纵向对齐column-reverse反转纵向对齐从下往上
justify-content: flex-start,flex-end,center,,,start居左上摆放end居左下摆放，center居左中摆放
align-items：flex-start，flex-end，center，，，start居左end居右center居中
}
.a1{
flex:2    flex为权重把他们分为5个单位a1占2 a2占2 a3占1只会左右生效 一旦设置了这个flex宽度不生效
}
.a2{
flex:2
}
flex:1<div class="A">在一个大盒子里定义许多个小盒子<div class="a1"></div><div class="a2"></div><div class="a3"></div>
</div>

文档流

浮动

浮动就相当于在原有的界面加一层界面他是可以左右浮动的不能上下浮动用float来表示left是向左right是向右当你横向摆放空间不够时他会摆到下一行

 .box{width: 200px;height: 200px;background-color: #555;float: left;这个fioat就是浮动left是向左right是向右}.dade{width: 400px;height: 400px;background-color: red;}
</div><div class="box"></div><div class="dade"></div>

还可以全选浮动

 div{width: 400px;height: 400px;float: left;}.box1{background-color: red;}.box2{background-color: lawngreen;}.box3{background-color: blue;}<div class="box1"></div><div class="box2"></div><div class="box3"></div>

清除浮动

由于浮动一副作用所以有时候要清除

.dade{width: 500px;height: 500px; background-color: #555;}.box{width: 100px;height: 100px;background-color: aqua;margin: 5px;float: left;}.text{width: 100px;height: 100px;background-color: red;clear: both;这个clear；both就是不管你左还是右都清除left是清除左浮动right是清除右浮动}
<div class="dade"><div class="box"></div><div class="box"></div><div class="box"></div><div class="text"></div>
</div>

.dade{width: 500px;/* height: 500px; */background-color: #555;overflow: hidden;   overflow清除浮动如果有父级塌陷,并且同级元素也收到了影响,可以使用overfiow清除浮动这种情况下,父布局不能设置高度
父级标签的样式里面加: overfiow:hlddenclear: both;}.box{width: 100px;height: 100px;background-color: aqua;margin: 5px;float: left;}.text{width: 100px;height: 100px;background-color: red;clear: both;}
<div class="dade"><div class="box"></div><div class="box"></div><div class="box"></div><div class="text"></div>
</div>
<div class="text"></div>

 .dade{width: 500px;background-color: #555;}.box{width: 100px;height: 100px;background-color: aqua;margin: 5px;float: left;}.dade::after{这个是伪对象方式content:"";display: block;clear: both;}.text{width: 100px;height: 100px;background-color: red;}
<div class="dade"><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="text"></div>

定位

定位可以随心所欲的调整位置定位有3个相对定位（relative），固定定位（absolute），绝对定位其中固定定位和绝对定位都是脱离文档流

当设置定位之后可以使用这四个方向值来进行调整位置：left右，top下，right左，bottom上

相对定位relative

他还是在文档流中

div{width: 200px;height: 200px;background-color: red;position: relative;这个就是设置相对定位left: 200px;左top: 100px;下}
<div></div>

绝对定位absolute

他是在脱离文档流的情况下来进行上下左右的调整可以覆盖在别的上面

每次设置一个绝对定位都是一层

 .box1{width: 200px;height: 200px;background-color: red;position: absolute;绝对定位top:300px;上left: 200px;下}.box2{width: 300px;height: 300px;background-color: aqua;}
<div class="box1"></div>
<div class="box2"></div>

固定定位fixed

他是固定的不会跟着页面滚动

.box1{width: 100px;height: 100px;background-color: brown;position: fixed;left: 100px;top: 100px;}.box2{width: 150px;height: 150px;background-color: aqua;}
<div class="box1"></div>
<div class="box2"></div>

相对定位和绝对定位如果父级也有定位那么他就会跟随父级一起移动如果父级没有那么逐级往上找直到底层文档

堆叠循序z-index

设置完定位后如果要决定堆叠的循序可以用这个z-index

 .box1{width: 100px;height: 100px;background-color: brown;position: absolute;left: 100px;top: 100px;z-index: 50;}.box2{width: 150px;height: 150px;background-color: aqua;position: absolute;left: 150px;z-index: 100;这两个z-index那个大 那个就在上面所以box2在box1上面

css新特性

圆角border-radius: 可以加数字或者百分号100%就会变成圆形，

一个值就是统一

两个值就就是第一个值左上和右下第二个是右上和左下

三个值就是第一个是左上第二个是右上和左下第三个值就是右下

四个值就是第一左上第二右下第三右下第四左下

.box1{width: 56px;height: 56px;background-color: rgb(255, 136, 0);border-radius: 25px;}<div class="box1"></div>

阴影

他也有四个值第一个是水平阴影位置第二个是垂直阴影位置第三个是模糊距离第四个是阴影颜色

.box1{width: 300px;height: 300px;background-color: rgb(255, 136, 0);border-radius: 60px;box-shadow: 5px 5px 10px rgba(0,0, 0, 0.5);<div class="box1"></div>

动画

动画他是从0%是开始100%是结束中间可以加许多的%节点

@keyframes这个是创建动画

animation这个是执行动画第一个值是你创建的动画名称第二个值是动画的持续时间

第三个是动画执行的速度由快到慢由慢到快都是可以控制的第四个是延时执行动画开始的时间第五个是动画执行的次数infinite是无限循环第六个是动画执行的方向

animation-play-state:paused和running表示的是动画的暂停和播放

div{background-color: red;       animation: dhua 5s linear 0s infinite;第一个是动画的名称第二个是动画的持续时间第三个是动画的速度第四个是延时时间可以不用第五个是循环次数这里是无限}div:hover{这个是鼠标到这个div时所触发的结果animation-play-state:paused ;鼠标到了这个div就暂停动画}.box{position: absolute;left: 200px;top: 100px;box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.5);}@keyframes dhua{ @keyframes这个是创建动画的意思后面带上自己定义的名字
里面全是样式0%{width: 200px;height: 200px;border-radius: 0px;background-color:black;}25%{width: 250px;height: 250px;border-radius: 25%;background-color: aqua;}50%{width: 300px;height: 300px;border-radius: 50%;background-color: blue;}75%{width: 250px;height: 250px;border-radius: 25%;background-color: aqua;}100%{width: 200px;height: 200px;border-radius: 0%;background-color:black;}}<div class="box"></div>

自适应

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">这一行是自适应手机或者电脑<title>练习页面</title><link rel="stylesheet" href="./css/Yan.css"><style>.box{width: 300px;height: 300px;background-color: red;}</style>
</head>
<body>
<a href="xuexi.html">我的学习</a>
<div class="box"></div>
</html>

另外一种方法

.box{width: 300px;height: 300px;}@media screen and (max-width:768px) {当屏幕的值小于这个值时就显示这个里面的内容.box{background-color: aqua;}.p1{display: none;不显示改内容}.p2{display: none;}}@media screen and (min-width:768px) and (max-width:996px) {当屏幕的值大于768小于996时显示这个里面的值.box{background-color: chartreuse;}.p1{display: none;}.p2{display: block;显示改内容}}@media screen and (min-width:996px) {.box{当屏幕大于这个996时就显示这里面的内容background-color: red;}.p1{display: block;}.p2{display: block;}}<div class="box"></div>
<p class="p1">来来来</p>
<p class="p2">哈哈哈</p>

精灵图

精灵图就是把许多张图片合成一张这样可以减少代码量和减少网络请求次数

  .ipon1{display: block;把行元素改为块元素width: 112px;height: 116px;background-image: url(gpj/1.png);把图片导入进来border:1px solid red ;设置一个边框更好的查看该图片background-position: 1px 0;移动里面的图像位置还可以到浏览器里面去调整位置然后再去code里面改}.ipon2{display: block;width: 112px;height: 116px;background-image: url(gpj/1.png);border:1px solid red ;background-position: 1px 0;}<span class="ipon1"></span><span class="ipon2"></span>

字体图标

 <link rel="stylesheet" href="./font/iconfont.css">这里是引用你下载好的代码源文件
<style>.tubiao1{font-size: 40px;调整图标的大小color: pink;换图标颜色}.tubiao2{font-size: 40px;color: pink;          }<span class="iconfont icon-shouye tubiao1"></span>这里需要你点开你下载好的图标文件里的html文件把下面的复制到这里来前面加一个iconfont<span class="iconfont icon-qiche tubiao2"></span>

解压文件然后打开（解压放在你代码的文件夹里）找到.html文件打开他（这里以阿里字体图标为例）

点开font class

把这个复制下来

本文发布于:2024-02-01 01:59:28，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170672397033033.html

上一篇：STM32寄存器和标准库点流水灯

下一篇：1Python基础

标签：语法 html css

留言与评论（共有 0 条评论）