HTML5-VScode-常用标签的样式以及复合写法

文章目录

1.CSS属性书写顺序
2.块元素 : h1~h6 / p / div / ul / ol / li / form / table
- ul>li 无序列表
- ol>li 有序列表
- li
- - li里面的内容上下左右居中对齐
  - 一行多个li的宽度(width/margin-left)设置
  - 清除浮动(看文章最后面的"浮动(清除浮动的4种方式)")
- input 文本输入框(小框)/搜索框
- textarea 文本输入框(大框)
2.行元素 : a / strong / b / em / i / del / s / ins / u / span
- a 超链接（一般配合h1~6/span/img）==换行与否==
3.行内块元素 : img / input / td / select / textarea / button / label
- img
- input
4.元素模式转换
5.样式
- 矩形的圆角/盒子阴影/文字阴影
- 样式居中
6.复合写法 border / font / background(css的background路径注意看要不要加"../")
7.背景(不是"插入图片",css的background路径别忘了加"../")
8.显示与隐藏
- display显示 / 隐藏
- visibility显示 / 隐藏
- overflow溢出的内容: 显示/隐藏
浮动(清除浮动的4种方式)

HTML5的元素和标签都是一个东西 : 带尖括号的 <div>  </div>  </br> 放在<body>里</body>
HTML5的属性指的是css样式里的"样式属性"(例如下面的章节一) 放在<head><style>里</style></head>

1.CSS属性书写顺序

布局定位: display / position / float / clear / visibility / overflow
自身属性: width / height / margin / padding / border / background
文本属性: color / font / text-decoration / text-align / vertical=align / whit-space / break-word
其他属性CSS3: content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

2.块元素 : h1~h6 / p / div / ul / ol / li / form / table

加粗样式块元素可以设置宽高,内外边距,宽度默认父级宽度100%.
里面可以放行内元素 / 块元素 .
注意 : 文字类的块级元素 p 和 h1~h6 不能放其他块级元素

ul>li 无序列表

ol>li 有序列表

li

li里面的内容上下左右居中对齐

css添加:
height: 50px;
line-height: 50px;    /* 上下居中对齐  , 行高 等于 ul / ol / li 的高度 */
text-align: center; /* 左右居中对齐 */
list-style: none;   /* 去掉前面的小圆点 */

一行多个li的宽度(width/margin-left)设置

方法一: 对 该行最后一个li标签 进行 单独的样式修改 margin-left: 0;
方法二: 将li的父标签(ul/ol)设置一个具体的宽度(让其包含 该行中所有li标签 的 width/margin-left 的值)
例如: 主体宽度是1000px, 一行三个li标签(width: 300px;margin-left: 50px), 总长度:1050px,
那么第三个li标签就会被"挤"到第二行, 此时只要将li标签的父元素的width设置为1050px,就刚好放下三个li

清除浮动(看文章最后面的"浮动(清除浮动的4种方式)")

当父盒子ul/ol里有N个浮动的子盒子li , 此时父盒子ul/ol的高度将无法确定,从而导致父盒子ul/ol下面的div元素无法准确排布
解决方法:给li的父元素ul/ol添加双伪元素样式:

<head><style>.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;/* IE6,7专用 */}</style>
</head>
<body><ul class="clearfix"><li></li><li></li><li></li></ul>
</body>

input 文本输入框(小框)/搜索框

textarea 文本输入框(大框)

2.行元素 : a / strong / b / em / i / del / s / ins / u / span

行内元素不可以设置宽高(可以设置左右内外边距 , 设置了上下内外边距也不会起作用)
默认宽度就是它本身内容的宽度 .
注意 : 行内元素只能容纳文本 / 其他的行内元素 , 不能放其他块级元素
链接a标签内不能再放链接a标签但是可以放其他的块级元素

a 超链接（一般配合h1~6/span/img）换行与否

一般是 : li>a (链接a标签 内不能再放 链接a标签 但是可以放其他的块级元素)
font: 400 15px "Microsoft YaHei";/* font的复合写法, 详情请看第6小节 */
color: black;
text-decoration: none; /* 去下划线_____ */
换行与否:
/* 对于全英文的a,用空格就能换行。中英混合自动换行。*/
display: inline-block;/* 不换行必加display 和 width 属性*/
width: 100px;
/* 不换行1 */
word-break: keep-all;
/* 不换行2 */
white-space: nowrap;
/* 内容超出宽度时隐藏超出部分的内容 */
overflow: hidden;
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
text-overflow: ellipsis;

3.行内块元素 : img / input / td / select / textarea / button / label

可以设置宽高,内外边距的行内元素

img

<head><style>div{width: 200px;height: 200px;}div>img{width: 100%;/* 使图片大小始终适合div大小, div大小发生改变也不需要改图片大小 */height: 100%;}</style>
</head>
<body><div><img src="图片地址" alt="图片无法正常显示,就显示这句话" class=""></div><div><em><!-- em标签也可以搭配img使用, 用于区分同级下的img, 同时也方便加position: relative; 绝对定位 --><img src="img/微信图片_20220524095215.png" alt=""><!-- position: absolute; 相对定位--></em></div></body>

input

input {outline:medium;/* 输入时边框不会加粗 */
}

4.元素模式转换

行内元素转成块级元素(方便设置链接宽高,增加鼠标点击面积) 在a标签样式里加 display:block;
块级元素转成行内元素(方便排列) 在div标签样式里加 display:inline;
行内块元素转换 (一行可以放多个,又可以改宽高) 在样式里加display:inline-block;

5.样式

矩形的圆角/盒子阴影/文字阴影

<head><style>border-radius: 10px;/* 矩形的圆角 , (正方形的边长/2)px=50%=圆形  ,  圆角矩形:border-radius: 高度的一半px*/border-top/buttom-left/right-radius: 值;/* 顺序不能变 */border-radius: 值;/* 下面 "值" 的个数 */一个值:(四个角) , 两个值:(↖↘,↗↙) , 三个值:(↖ , ↗↙ , ↘) , 四个值:(↖ , ↗ , ↘ , ↙)/* 盒子的阴影(配合LVHA) */.shadow:hover {/* 第一个和第二个分别是:X轴 Y轴 , 他俩是必须得有的 */box-shadow: 5px 4px 10px 0px rgba(0, 0, 0, .6);}.shadow:active {/* X轴 Y轴 虚实程度 大小 颜色(rgba里a的值0.几和.几是一样的) 内阴影/默认是外阴影(不要inset就行,别手贱自己加"outset"!!加了outset就错)*/box-shadow: 5px 4px 10px 0px rgba(0, 0, 0, .6) inset;/* 阴影不影响/不改变盒子的位置 */}/* 文字阴影(配合LVHA或者a标签) *//* 第一个和第二个分别是:X轴 Y轴 , 他俩是必须得有的 后面接虚实程度 颜色*/text-shadow: 2px 1px 3px rgba(253, 78, 107, 0.776);</style>
</head>

样式居中

margin: 0 auto;/* (界面放大缩小都不会影响div居中)div指定width后,再加上这句就行了 */
text-align: center;/* 行内/行内块元素水平居中: 只要给其 父元素 加这句就行了 */
overflow: hidden;/* 子元素的margin影响了父元素的margin: 只要给其 父元素 加这句就行了 */

6.复合写法 border / font / background(css的background路径注意看要不要加"…/")

background:pink url(../img/超大背景.png) no-repeat fixed center top;
/* no-repeat fixed同时出现将不会显示图片???只能拿一个出来 */background: rgba(0, 0, 0, 0.3);
/* IE9以上支持 背景色+alpha透明度 0~1 , 0.3可以把0省略 . 背景色不会对内容造成影响*//* transparent 透明色 dotted点虚线 dashed虚线 solid实线(默认是没有线) */
border: 5px transparent dotted; /* (盒子边框复合写发) , 无顺序要求 , 用空格隔开 */font:font-style font-weight font-size/line-height font-family; /* (字体的复合式写法) */

line-height 行高(不写单位)=当前字体大小的倍数例如 16px/2 行高就是32 (为什么这么写?行高应该随字体的大小变化而变化)。
当body样式里写了 16px/2 , 那么body的子标签的样式里只要写文字大小那么行高就会自动继承body样式里的 “2倍”

7.背景(不是"插入图片",css的background路径别忘了加"…/")

<head><style>div {width: 300px;height: 300px;background-color: pink;/* 背景颜色 *//* 小的logo,大的背景图片 , none 无背景图片, 别忘了加 "url(图片地址)" 默认平铺 */background-image: url(../img/test_img.png);/* 平铺/ no-repeat不平铺/ repeat-x/ repeat-y */background-repeat: repeat;/* x y 图片位置 x,y也可以输入:center left right top . 如果只写一个参数,另一个参数就会默认居中*/background-position: Xpx Ypx;/* 超大背景 background-position: center top; */background-attachment: fixed;/* fixed图片不随鼠标滚动 , scroll随着鼠标滚动(默认的) */
/* 复合写法:颜色 地址 不平铺 固定位置 居中 top */background:pink url(../img/超大背景.png) no-repeat fixed center top;/* no-repeat fixed同时出现将不会显示图片???只能拿一个出来 *//* IE9以上支持 背景色+alpha透明度 0~1 , 0.3可以把0省略 . 背景色不会对内容造成影响*/background: rgba(0, 0, 0, 0.3);/* 同一个盒子里,有了这个那么上面的基本不起作用 */}</style>
</head>

8.显示与隐藏

display显示 / 隐藏

display: none;/* 元素隐藏 , 隐藏后它的位置会被其他元素所侵占 */
display: block;/* 显示隐藏的元素(配合JS可以装*)/把元素转变成块元素 */

visibility显示 / 隐藏

visibility: hidden;/* inherit继承父元素的显隐属性 visible显示 hidden隐藏 ,
隐藏后它的位置不会被其他元素所侵占 */

overflow溢出的内容: 显示/隐藏

overflow: visible;/* 超出盒子的内容进行 : visible显示 hidden隐藏(该属性在有定位的盒子里慎用)
scroll以滚动条的方式显示(没超也有滚动条) auto以滚动条的方式显示(没超就没滚动条)*/

浮动(清除浮动的4种方式)

<head><style>/* 浮动: 将多个 块级元素 放在一行里显示(而且直接没有"间隙")(类似行内块元素: 可以设置宽高的行内元素) */.div-float {float: left;/* 浮动: 向左 */width: 200px;height: 200px;background: pink;}/* 清除浮动:当父盒子里有N个浮动的子盒子 , 此时父盒子的高度将无法确定*/    .father{/* 推荐第四种方法:添加双伪元素 *//* 1.额外标签法/隔墙法(好记,代码结构差) : 在最后的浮动元素后面添加一个空标签 <div style="clear: both"></div>  或者 <br/> 或者 其他空的块级元素*//* 2.给父标签添加overflow样式(代码结构好,无法显示溢出部分) */overflow: hidden/auto/scroll;}/* 3.添父标签添加after伪元素样式(代码结构好,样式不好) <div class="father clearfix"></div> */.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix:after{*zoom:1;/* IE6,7专用 */}/* 4.添加双伪元素(代码结构好,样式不好,推荐这个) <div class="father clearfix "></div> */.clearfix:before,.clearfix:after{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;/* IE6,7专用 */}</style>
</head>
<body><div class="father clearfix"><!-- 一个没有"浮动"的盒子div/ul(水平居中) , 用来装 带有"flaot" 的 小盒子div/li --><div class="div-float"><!-- 先设置盒子大小,再设置盒子的位置 --></div><div class="div-float"></div><div style="clear: both"></div><!-- 清除浮动: 1.额外标签法 --></div>
</body>

浮动元素块和元素块(非浮动) 处于同级的情况下 :
甲乙有接触 : 浮动元素块甲的右边缘的X值 = 浮动元素块乙的左边缘的X值
多个浮动一行放不下 : 浮动元素块甲的下边缘的Y值 = 浮动元素块乙的上边缘的Y值
非浮后面有浮动 : 元素块丁(非浮动) 的下边缘的Y值 = 浮动元素块丙的上边缘的Y值
浮动后面有非浮 : 元素块丁(非浮动) 的上边缘的Y值 = 浮动元素块丙的上边缘的Y值
一般来说 : 一个div里的元素要么全部浮动,要么全不浮动

HTML5-VScode-常用标签的样式以及复合写法相关推荐

HTML5 的知识分享（二）：HTML5 的常用标签
经过我的上一篇博客可以让大家简单地了解了一下 HTML5 的基础标签,现在再和大家分享一下 HTML5 的常用标签吧基础标签与常用标签的主要区别在于:要先有基础标签的基础才可以灵活的使用常用标签. ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
bootstrap的常用标签与样式
常用标签与样式 <div class="container"><h1 class="page-header">CSS<small& ...
html5的常用标签,HTML5常用标签
1 前端工程师是干什么的? pc页面移动端页面 web开发=前端开发+后台开发--->web应用(网站) 后台:数据前台:负责数据展示+交互效果 2 需要学习的内容有哪些? 工具部分: ps ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
HTML基础--标签VSCode常用快捷方式和插件
思维导图(个人制作,可能有误):https://www.mubucm.com/doc/2EghdAXgYvc 1.浏览器兼容性网站:https://caniuse.com/ 2.Web网页的组成部分 ...
04-前端技术_HTML与HTML5常用标签
目录一,HTML与HTML5常用标签学前准备 1,HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定 2,HTML基础语法 2.1 HTML基本结构: ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...

HTML5-VScode-常用标签的样式以及复合写法

文章目录

1.CSS属性书写顺序

2.块元素 : h1~h6 / p / div / ul / ol / li / form / table

ul>li 无序列表

ol>li 有序列表

li

li里面的内容上下左右居中对齐

一行多个li的宽度(width/margin-left)设置

清除浮动(看文章最后面的"浮动(清除浮动的4种方式)")

input 文本输入框(小框)/搜索框

textarea 文本输入框(大框)

2.行元素 : a / strong / b / em / i / del / s / ins / u / span

a 超链接（一般配合h1~6/span/img）换行与否

3.行内块元素 : img / input / td / select / textarea / button / label

img

input

4.元素模式转换

5.样式

矩形的圆角/盒子阴影/文字阴影

样式居中

6.复合写法 border / font / background(css的background路径注意看要不要加"…/")

7.背景(不是"插入图片",css的background路径别忘了加"…/")

8.显示与隐藏

display显示 / 隐藏

visibility显示 / 隐藏

overflow溢出的内容: 显示/隐藏

浮动(清除浮动的4种方式)

HTML5-VScode-常用标签的样式以及复合写法相关推荐

最新文章

热门文章