CSS基础和行块标签

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

一、块标签:h1是标题标签,一个页面最多出现一次。h2副标签,一个页面不超过八个。

h1~h3都具备seo功能 seo网络引擎搜索优化 p段落标签  ul无序列表  ol有序列表   list-style:none样式列表(去除小黑点)  特点:独占一行,默认宽度占满父级,高度为0,子集内容撑开高度

二、行标签:<i>倾斜<i>,<b>加粗<b>,<em>加强倾斜<em>,<string>加强加粗<string> <sub>下角标<sub> <sup>上角标<sup> <span>无语意<span>  <br>换行   <a href=""  target="_blank在新的标签页打开(self默认值  在本页打开)">

特点:同排列跟显示,遇到父级边界换行 不支持宽高,内容撑开宽高 不正常显示上下内边距 换行被解析

三、行块标签:内容:img:<img src=" "资源路径 title=" "鼠标悬停时的提示文本 alt=" "图片不能正常显示的提示文本 特点:只给宽度或高度,会等比例变化

特点:1.同排序跟显示,遇到父级边界换行 2.没有宽高的时候内容撑开宽高 3.换行被解析

四、CSS:标签权重1,class权重10 id权重100 内联权重1000 权重大的生效 权重相同后来者居上

 五、背景:背景颜色:background-color 背景图片:background-image 背景图位置:background-position 背景图大小:background-size:contain(长边占满父级)cover(短边占满父级) margin:auot居中

六、文本:字体颜色:color  字体大小:font-size 字体样式:font-family  对齐方式:text-alige 行高:height  首行缩进两个字符:text-indent:2em 

CSS:块级,级,块标签 无论内容多少,都会独占一(可以设置宽高)若未设置宽高,宽将与<body>(或者与父级标签一致,[父级标签就是比该标签高一级的标签])标签一致,高将与内容相同(若没有内容,则高度将为0)如:<p> <h1> <ul> <ol> <hr/>只占自身大小的标签,不占一(不可设置宽高,或者说设置宽高无效)如<font> <b> <i> <a> 阅读详情

相关推荐

CSS标签显示模式 ① ( 标签显示模式 | 块级元素 )

一、标签显示模式 ( 块级元素 | 内元素 ) 二、块级元素 1、块级元素简介 2、块级元素特点 3、文字块级元素 4、代码示例

让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 1672

css基础——常见样式以及标签块标签块标签的特点

目录 1.css的常见样式 (1). 背景样式 (2). 文本的有关样式内容: (2). 常用选择器: 2.块标签的特点: 3. 块标签特点: 4. 标签/内联标签: 1.css的常见样式 (1). 背景样式 1).背景的颜色:background-color; 2).背景图的设置:background-image;...

qq_52908359的博客 931

标签显示模式(display)

什么是标签显示模式 标签以什么样方式进显示,比如div 自己占一, 比如span 一可以放很多个 标签的类型(分类) HTML标签一般分为块标签标签两种类型,它们也称块元素内元素。 块级元素(block-level) 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li&...

里昂的博客 327

css标签

<head> <title>标签</title> <style type="text/css"> #xiyouji{ width: 500px; height: 200px; margin: 100px; padding: 40px; border: 1px solid red; text-align: center; } #xiyouji span{ width: 60px

m0_52346373的博客 375

前端基础入门(html+css+详)

<!DOCTYPE html> <!--使用HTML5的标准进文档解析 --> <html lang="en"><!--跟标签,平时不做修改--> <head><!--引入与网页相关的描述及配置信息--> <meta charset="UTF-8"> <title>Title</title> <style> div{ wi.

weixin_54107527的博客 1727

第二天_常见标签CSS基础

常见标签 一、块标签 1)内容 div 无语义,一个盒子 h1-h6 h1-h3有检索功能 p ul ol li article section aside nav header footer 2)特点:独占一,默认宽度占满父级,高度为0,子级内容撑开高度 二、标签 1)内容 span a herf:链接地址 target:打开方式 _self当前页面打开 _blank在新的页面打开 i 斜体 b 加粗 sub下角标 sup上角标 e...

ww_Filling_it的博客 250

JavaWeb-CSS(选择器,页面定位,元素块元素内块元素之间的转换,层的浮动,表格布局页面,divcss布局页面)

1.标签块标签 标签:默认不会占据一整标签,内容有多宽,就占据多宽 b font s u 块标签:就是该标签默认会占据一标签 h1 hr ul li 块标签:具有一些标签块标签的特点 button <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> &...

weixin_62520626的博客 448

CSS 基础入门

CSS css是什么 css 联级样式表 级联:关联 两个内容之间的关系 样式表 : css修饰网页的语法集 优点: 将页面的内容与表现形式(css)分离 可达到重复利用 css与html之间的关系 html 是网页的内容 css 是网页样式 外观 css能做什么 作用:为html控制外观 css基本语法 三种样式表 1.级样式表 <p style="color:red;font-size:20px;"></p> 2.内嵌样式表 写在head中 将样式与网页内容分离 &lt

qq_44742674的博客 311

CSS使用指南

书写方式 /* 我是注释 */ 内嵌式:在head里面写style用选择器书写属性 内式:在任意标签里面直接写style 外链式:额外写一个css代码,用link在HTML文件里面使用 指定方式 独立ip选择 字体标签里面设置一个ip(id=p1),然后选择器打#p1做出独立设置(可设置多个标签同id) 多个class选择 字体标签里面设置一个class值(class=ooo),然后选择器打.ooo做出独立设置 可设置多种类(如颜色类,字体类),然后用于同一个标签<span class=

m0_63042689的博客 185

全栈:前端第一天

作为互联网开发的两个重要分支之一,前端与后端的开发一直都是缺一不可 相较于后端的数据开发数据网络,前端设计的主要项目在于页面开发,UI交互界面的设计开发等,简单直白的就是人与界面的交互设计。

全栈学习ing 973

CSS学习

CSS全称Cascading Style Sheets一种样式表语言,为html标签修饰定义外观,分工不同CSS与HTML关系html是网页的内容css是网页的样式(结构)

2301_77205900的博客 991

CSS-级联样式表

一、CSS概述CSS(Cascading Style Sheets)级联样式表CSS是一种样式表语言,用于为HTML文档控制外观,定义布局。可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。CSS与HTML的关系。

weixin_56846554的博客 1250

前端---css

css概述,css常用语法

qq_56797899的博客 682

Web基础

HTML前端基础块标签标签的互换、表单格式、背景色、背景图、文本常用格式、常用选择器、选择器优先级

学习笔记记录,欢迎批评指正!2023年4月1日起,将不在继续更新,后续笔记将同步至语雀笔记(https://www.yuque.com/javazhangjinhe) 281

前端学习笔记

1.块属性标签a.独自占据一空间,支持宽高的设置,设置完宽高以后,仍然独占一b.支持上下 padding 上下 margin2.属性标签a.不会独自占据一空间,从左至右横向排列b.无法设置宽高,他的宽高由内容撑开c.不支持上下 padding上下 marginwidth:200px">白了少年头width:200px">空悲切```

weixin_68489142的博客 208

HTML入门 前端入门

前端----->入门 基础

sunfengyu_的博客 681

CSS(简)

简述以前学过的CSS

qq_52750266的博客 2200

HTML表单------CSS

html部分表单css

zheming567的博客 715

C1见习工程师学习笔记

C1认证学习笔记

键盘里的咬肌的博客 191
上一篇: 前端浮动重点知识总结
下一篇: CSDN居中的基本方法
码农小能手
博客等级 码龄4年 39粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值