WEB HTML知识整理 css

最新推荐文章于 2022-09-12 15:09:25 发布
最新推荐文章于 2022-09-12 15:09:25 发布
阅读量489 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46207738/article/details/105097080
版权

学习网址推荐：https://www.w3school.com.cn/jquery/ajax_ajax.asp
颜色表及html代码：http://xh.5156edu.com/page/z1015m9220j18754.html

CSS 颜色表：https://www.w3school.com.cn/tags/html_ref_colornames.asp

Web安全色： https://www.bootcss.com/p/websafecolors/

css简绍：

  • css(Cascading Style Sheets,层叠样式表，也称作级联样式表)
    用网页样式并允许将样式信息与网页内容分离的一种标记语言。
  • 1996年通过W3C 审核认证，并推荐使用
  • CSS解决网页界面排版布局的难题。HTML 的标签主要定义网页的内容（Content）,而CSS 决定这样网页内容如何显示（Layout）
  • CSS1 主要定义具体颜色、字体、文本样式、外边距、边框、背景等基础样式。
  • CSS2定义许多高级特性如浮动和定位以及一些高级选择器（如,子选择器，相邻同胞选择器，通用选择器）
  • CSS样式由一条或多条以分割的样式声组成。每条声明的样式包含着一个CSS属性和属性值。
	// style 是行内样式属性。color是颜色属性，red 是颜色属性值：font-size是字体大小属性值，50px 是字体大小属性值
	<p style="color:red;font-siza:50px">这是一段文本</p>

创建CSS样式表
1.元素内嵌样式；
2.文档内嵌样式；
3.外部引入样式；
1.元素内嵌样式——内联样式

// 使用style属性的声明方式
<p style=“color：red;font-size:50px”>这是一段文本</p>

2.文档内嵌样式——内部样式表

	// 在<head>元素之间创建<style>元素，通过选择器方式调用指定置相关css
	<style type="text/css">
	p{
		color:bule;
		font-size:40px;
	}
	<p>这是一段文本</p>

3.外部引用样式——外部样式表

// href 表示.css文本路径：type表示文件类型是样式表文件：rel是指页面中使用外部的样式
<link rel="stylesheet" type="text/css" href="style.css">
// style.css文件
@charset"utf-8";
p{
	color:green;
	font-size:30px;
} 
// 说明：很多的时候，大量HTML 页面使用同一个组css ,那么就可以将这些css样式保存在一个单独的.css文件中，然后通过<link>元素去引用它即可。@charset"utf-8"表名设置css字符编码，如果不写默认就是utf-8。如果多个.css文件，可以使用@import导入方式引入.css文件(@import url("css/stvle.css"):)。只不过，性能不如多个<link>链接。
  • 样式表层叠：指的是同一个元素通过不同方式设置样式产生的样式重叠。
  • 表示继承：指的是某一个嵌套的元素的到他父元素样式。
  • 浏览器样式：是这个元素在这个浏览器运行时默认附近的样式。

1.浏览器样式

	// <b> 元素就是鞠永加粗的隐藏样式，而<span>元素没有任何隐含样式，通过style属性设置样式
	<b>这个元素隐含加粗样式</b>
	<span style="font-weight:bold;">这是元素通过style加粗</span>

2.优先级顺序
样式表层叠样式表层叠通过四种方式进行，如果样式相同，那么就会产生冲突替换。这时，它的优先级显得比较重要。以下优先级从低到高
（1）. 浏览器样式（元素自身携带的样式）；
(2) . 外部引入样式（使用引入的样式）；
(3) . 文档内联样式（使用

3.样式继承
如果某一个元素并没有设置父元素相关的样式，那么就会使用继承将父元素的样式继承下来。

CSS中的选择器

一、基本选择器： 使用简单且频率高的一些选择器归为基本选择器

1.通用选择器

	
	*{
		borde:1px soild red;
	}
	// “*” 号选择器通用选择器，功能是匹配所有html元素的选择器包括<html>和<body>标签。可以使用如下元素测试效果
	<p>段落</p>
	<b>加粗</b>
	<span>无<span>

2.元素选择器

	p{
		color:red;
	}
	// 直接使用元素名称作为选择器即可
	<p>段落</p>

3.ID选择器

	#abd{
		font-size:20px;
	}
	// 通过对元素设置全局属性id,然后使用id值选择页面唯一元素。
	<p id="abc">段落</p>

4.类选择器

	.abc{
		border:1px solid red;
	}
	// 通过对元素设置全局属性class，然后使用.class值选择页面一个或多个元素
	<b class="abc">加粗</b>
	<span class="abc">无</span>
	// 使用“元素 .class 值”的形式，限定某种类型的元素
	b.abc{
		border:1px soild red;
	}
	// 类选择器可以调用多种样式，中间用空格进行层叠
	<span class="abc edf">无</span>

CSS文本样式——字体样式

tr> tr>
值说明
xx-small设置字体大小，每个值从小到大的固定值
x-small
medium
large
x-large
xx-lagre
smaller设置css 像素长度设置字体大小
lagrger
数字 + px使用cs像素设置字体大小
数字+ %使用相对于父元素的百分比大小
// 先设置父元素字体的大小
bady{
font-size：500px:
}
// 在设置相对小一些
p{
	font-size: smaller;
}
// 设置字体是否以小型大写字母显示。
2.font - varint
p{
font-variant:samll-cops;
}
值说明
normal表示如果易小星大写状态，让他恢复小写状态。
small-cops让小写字母以小型个字母显示
// 想让元素设置小型大写
bady{
	font-variant:small-caps;
}
// 让子元素使之恢复小写
p{
font - size : 50px;
font- variant: normal;
}
// 是指字体是否倾斜
p{
	font - style:italic;
}
值说明
normal表示让倾斜恢复到正常状态
italic表示使用倾斜
oblique表示让文字倾斜。写别在没有倾斜使用
// 设置字体是否加粗
p{
	font - weight:bold;
}
值说明
normal表示让加粗的字体恢复正常
bold粗体
bolder更粗的字体
lighter轻细的字体
100~900600及之后是加粗，之前不是加粗
// 指定字体名称。浏览器系统的字体，有兼容多浏览器的字体，可以做几个后备字体
p{
	font-family: 微软雅黑,宋体,'New York';
}
// 字体组合方式： 是否倾斜 是否加粗，是否转化大写，
p{
	font - size: 50px; 
	font-	family:abc;
}

二、复合选择器： 将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器
1.分组选择器

	// 将不同的选择器通过逗分割，同时设置一组样式。当然，不但可以分组元素选择 器，还可以使用ID选择器、类选择器、属性选择混合使用。
	p.b.i.span{
		color:red;
		}

2.后代选择器

	// 选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可混合使用ID选择器类选择器、属性选择混合使用。
	p b{
		color : red;
	}

3.子选择器

// 子选择器类似与后选择器，最大的区别就是直选中晚期只能选择福选择向下一级的元素，不可再往下选择。
	ul > li{
		border:1px solid red;
	}
	
	<ul>
		<li>我是儿子
			<ol><li>我是孙子</li>
			<li>我是孙子</li>
			</ol>
		</li>
		<li><我是儿子/li>
		<li><我是儿子/li>
	</ul>

4.相邻兄弟选择器

	// 相邻兄弟选择匹配和第一个元素相邻的第二个元素
	p + b{
	color ： red;
}
  1. 普通兄弟选择器
	// 普通兄弟选择匹配和第一个元素的所有元素
	p ~ b{
		color:red;
	}

三、 伪元素选择器 伪选择器分为伪元素选择器 和 伪类选择器。伪元素前置两个冒号（：：），伪类前置一个冒号（：）。
常见的伪类选择器元素

属性说明
:link为访问
:visted已访问
:active鼠标按下
：enabled可用的时候触发
：disabled不可用的时候触发
：not(s)匹配不含s 选择器的元素
：frist-child父元素的第一个元素
:last-child父元素的最后一个元素
  1. :: first-line 块级首行
	// 块级元素比如<p>、<div>等首行文本被选定。如果限定某种元素，可以加上前置p::first-line.
	::first-line{
		color:red;
	}
  1. ::first-letter 块级首字母
	// 块级元素的首行字母
	:: first-letter{
		color:red;
	}
  1. ::before 文本前插入
	 // 文本前插入内容
	 a::before{
	 content:'点击-'；
	 }
  1. :: after 文本后插入
	// 在文本后插入内容
	a::after{
	content:'-请进';
	}

结构性伪类选择器：结构性选择器够根据元素的位置选择元素，这个类元素都有一个前缀（：）。

  1. 子元素选择器
	// 选择第一个元素
	ul > li:first-child{
		color:red;
		}
	// 选择最后一个元素
	ul >li:last-child{
		color:red;
	}
	// 匹配属于父元素中唯一子元素，即span标签唯一元素
	p > span:only-child{
		color:red;
	}
	// 选择子元素的第二个元素
	ul >li:nth-last-child(2){
		color:red;
		}

在这里插入图片描述

	<audio cotrols>
	<source src="horse.ogg" type="audio/ogg">
	<source src="horse.mp3" type="audion/mpeg">
	您的浏览器不支持audio标签
	</audio>

特殊字符

在这里插入图片描述

UI 伪类选择器

	// 选择启用状态的元素。
	:enabled {
	border: 1px solid red;
	}
	// 选择禁用状态的元素
	
	:disabled {
	border: 1px solid red;
	}
	// 勾选iput 元素
	:checked {
		display: none;
	}
	// 根据是否具有required 属性选择元素
	input:required {
		border: 1px solid blue;
	}
		input:optional {
				border: 1px solid green;
		}

动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
1.:link 和visited
a:link {
color: red;
}
a:visited {
color: orange;
}
解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。
2.:hover
a:hover {
color: blue;
}
解释：表示鼠标悬停在超链接上
3.:active
a:active {
color: green;
}
解释：表示鼠标按下激活超链接时，css中active必须位于hover之后。
4.:focus
input:focus {
border: 1px solid red;
}
解释：表示获得焦点时
练习：
在这里插入图片描述

<!DOCTYE html>
<html>
<head>
	<meta charset="UTF-9"/>
	<title>audio标签使用学习/ form表单练习</title>
</head>
	<body>
		
		<!-- 笔记 begin-->
		<!-- audio 标签主要定义播放声音文件或者音频流的标准，目前所有主流浏览器支持标签，支持三种音频
<audion src="song.org" comtrols="controls">
</audio>
其中，src 属性是规定要播放的音频地址，control属性共添加播放、暂停和音量控制，<audio></audio>不支持
autoplay         autoplay        则音频在就绪后马上播放
controls           controls                用户控住键   ,比如播放按钮
loop                                    音频重新开始播放  
muted                                  规定输出应该被静音
poster             URL               视频下载时显示的图片，或者在用户点播按钮前显示的图片  begin-->	
	
		<audio src="music/l凉凉.mp3" controls="controls" autoplay="autoplay" loop="loop">
		</audio>
		<video src="" controls="controls" autoplay="autoplay" poster="images/cat.prong" height="300">
		</video>

	
	</body>
</html>

css文本样式——文本内容

属性说明
text-decoration装饰文本出现的各种划线
text-transform将英文文本转换大小写
text-shadow给文本添加阴影
text-align设置文本的对齐方式
white-span排版的空白处理方式
letter-spacing设置字母之间的间距
word - spacing设置字词之间的间距
line - height设置行高
word-wrap控制断词
text- indent设置文本首行的缩进
// 文本设置下划线
p{
	text - decoration:underline;
}
值说明
none让本身有下划线装饰的文本取消掉
underline让文本的底部出现一条下划线
overline让文本的头部出现一条下划线
line-through让文本中部出现一条删除线
blink让文本出现闪烁，，基本不支持了
// 英文文本转换为大小写
p{
	text-transform:uppercase;
}
值说明
none将已被转换大写的值恢复到默认状态
capitalize讲英文单词首部字母大写
uppercase将英文转换为大写字母
lowercase将英文转换为大写字母
 // 给文本添加阴影 ，第一个值：水平偏移；第二个值：垂直偏移； 第三个值 阴影模胡度；第四个值：阴影颜色
 p{
 	text-shadow； 5px 5px 3px black;
 	}
 // css 文本样式进行访问，形态进行控制样式
	 p{
	 	text-align:center;
		}
值说明
left靠左对齐，默认
right靠右对齐
center居中
justify内容两端对齐
start让文本处于开始的边界
end让文本处于结束的边界
// 处理空白排版方式
p{
	white-space： noweap;
}
值说明
normal默认值，空白符被压缩，文本自动换行
nowrap空白被压缩,文本不换行
pre空白符保留，遇到换行符则换行
pre-line空白符被压缩，文本会在排满或遇换行
pre-wrap空白符被保留,文本会在排行符换行
// 设置文本之间的间距
	 p{
		letter-spacing:4px;
		}
值说明
normal设置默认间距
// 让过长英文单词断开
p{
	word-wrap:break-word;
}
值说明
normal单词不断开
break-work断开单词
	// 设置本首行的缩进
	p{
		text-indent:20px;
	}
值说明
normal设置默认间距
长度值

1.练习 图片来自网上
在这里插入图片描述

<!DCTYPE html>
<html >
	<head>
		<meta charset="UTF-8">
		<title>div的用法</title>
	</head>
	<body>
		
		<div align="center">
			<img src="images/项链.png" alt="图片"/>
			
			<h2>将进酒</h2>
			<hr/>
			<p>君不见，黄河之水天来，奔流到海不复回</P>
			<p>君不见，高堂明镜悲白发，朝暮青丝暮承雪</p>
			<p>人生得意须尽欢，莫使金樽空对月</P>
			<p>天生我材必有用，千金散尽还复来</p>
			<p>烹羊宰牛且为乐，会须一饮三百杯</p>
			<hr/>
		
		<table border="2">
			<tr><td></td><th> 颜色1</th> <th>颜2</th><tr/><tr>
				<th>第二行</th><td>red</td><td>blue</td>
			</tr>
			<tr>
				<th><第三行</th><td>green</td><td>yellow</td>
			</tr>
		</table>
		<hr/>
		<br/><br/>
		<!--案例 begin-->
			<table border="2" cellpadding="2" cellspacing="2"  rules="rows">
				<tr><th>star top10</th></tr>
				<tr><td>
				<ol>
					<li><a href="">排名第一</a></li>
					<li><a href="">排名第二</a></li>
				<a href="">	<li>排名第三</li></a>	
				</ol>
				</td>
				</tr>
		</table>
		
		<hr/>
		<table>
		</div>

		</table>
	</body>	
</html>

CSS盒模型

元素内边距：css盒子模型设置元素边缘填充空白大小，称为内边距

属性说明
padding-top顶部内边距
padding-bottom底部内边距
padding-left左边内边距
padding-right右边内边距
padding简写属性
	// 设置四个内边距
	div{
		pading-top: 10px;
		padding-bottom:10px;
		padding-left:10px;
		padding-right:10px;
	}
	// 简写 分别上10px、右 10px、 下 10px、 左 10px
	div{
		pading:10px 10px 10px 10px;
	}
	// 简写 ： 上10px ,左右 50px  ,下 200px
	div{
		pading:10px 50px 200px;
	}

元素外边距元素外部填充空白的大小

属性说明
margin-top顶部内边距
margin-bottom底部内边距
margin-left左边内边距
margin-right设置右内边距
margin简写属性
	// 简写 上为10px 左右50px 下2000px
	div{
	margin:10px 50px 2000px;
	}
	// 简写  上下 10px   左右 20px
	div{
		margin:10px  20px;
	}
	// 简写 上下左右 10px
	div{
		margin:10px ;
	}
<!--最终元素总宽计算公式：总元素的宽度=宽度+右填充+右边框+左边距+左边距
元素的总高度最终计算公式：总元素的高度=高度+顶部填充+顶部填充+上边距+下边距+上边距+下边距-->

溢出：当固定尺寸内容大时就会出现溢出问题

overflow-x设置水平方向溢出
overflow-y垂直方向溢出
overflow
auto浏览器自行处理溢出内容，如果有溢出内容，就显示滚动条，否则不显示
hidden如果有溢出，直接剪掉
scroll不管是否溢出，都显示滚动条。但不同的浏览器方式不同
visible默认值，不管是否溢出，都显示内容
		div{
		overflow-x:auto;
			}

元素的可见性，一般配合JavaScript实现

属性值说明
visibiltyvisible默认值，元素在页面上可见
hidden元素不可见但占据空间
collapse元素不可见，隐藏表格的行与列，如果不是表格，则和hidden一样
	// 设置元素隐藏，但占位
	div{
		visiblity:hidden;
		}

行内-块元素

属性值说明
displayblock盒子为块级元素
inline盒子为行内元素
inline-block盒子为行内-块元素
none盒子不可见，

元素浮动

属性值说明
floatleft浮动元素靠左
right浮动元素靠右
none禁用浮动

边框

值说明
none没有边框
dashed破折线边框
double双线边框
dotted圆点线边框
groove槽线边框
inset使用内容具有内嵌效果的边框
outset使用内具有外凸效果边框
ridge脊线边框
solid实现边框
	//  solid 实线使用频率高
	div{
		border-style:solid;
		border-width:10px;
		border-color:red;
	}
设置顶部：
border-top-width
border-top-style
border-top-color
属性说明
border设置四条边框
border-top设置上边框
border-bottom下边框
border-left左边框
border-right有边框
border-bottom-left-raduius左下边角
border-bottom-right-radius右下边角
	// 设置圆角矩形
	div{
	borde:10px solid red;
	border-radius:10px;
	// 四条边分别设置
	div{
	border:10px solid red;
	border-radius:10px 20px  30px  40px;

背景的设置

属性说明
background-color背景颜色
background-image背景图片
background-repeat背景图片的样式
background-size背景图像的尺寸
background-position背景图片的位置
background-attachment背景图片的滚动
background-clip背景图片裁剪
background-origin背景图片的起始点（坐标）
background复合值
	//  url 图片的路径
	body{
		background-image:url(loding.gif)
		}

background-repeat

值说明
repeat-x水平方向平铺图像
repeat-y垂直方向平铺图像
repeat水平和垂直同时平铺图像
no-repeat禁止平铺图像

background-position

值说明
top将背景图片定位元素顶部
left将背景图片定位元素顶左边
right将背景图片定位元素顶右边
bottom将背景图片定位元素顶底部
center将背景图片定位元素顶中间
长度值使用长度偏移图片的位置
百分数使用百分数偏移的位置

background-size

值说明
auto默认值，图片本尺寸
coverd等比例缩放，使图覆盖容器，可能超出容器
contain等比例缩放，使横或纵重合

background-attachent

scroll默认值，背景固定在元素上，不会随着内容一起滚动
fixed背景固定在视窗上，内容滚动时背景不冻

background-origin

border-box元素盒子内部绘制背景
padding-box内边距盒子绘制背景
content-box在内容盒子内部绘制背景

background-clip
border-box;padding-box;conten-box ___盒子内部、内边距、内部裁剪

	div{
		width:400px;
		height:300px;
		border:10px dashed red;
		padding: 50px;
		background:silver url(img.png) no-repeat scrooll left toop/100%
		border-box content-box;

表格的样式：五种样式

属性值说明
border-collapse边框样式相邻单位的样式
border-spacing长度值相邻单元边距的间距
caption-side位置名称表格标题的置
empty-cells显示值空单元格式是否显示边距
table-layout布局样式制定表格的布局样式

1.border-collapse

值说明
separate默认值，单元格边距独立
collapse
	// 单元格相邻的边距被合并
	table{
		border-collapse:collapse;
		}

3.caption-side

值说明
top默认值，标题在上方
bottom标题在下方
	//  设置表格的标题
	table{
		cation-side:bottom;
		}

5.table-layout

	// 内容过长后，不在拉伸整个单元格
	table{
		table-layout:fixed;
		}
属性值说明
list-style-type类型值列表的标记类型
list-style-imagenone或URL图像作为列表列表
list-style-position位置值配列的相对位置
list-style简写属性列表写形式

1.list-style-type

值说明
none没有标点
disc实心圆
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马文
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-roman大写英文字母
	ul{
		list-style-type:square;
		}

2.list-type-position

值说明
outside默认值，标记位于内容框外部
inside标记位于内容框内部
	ul{
		width:120px;
		list-style-postion:inside;
	}
中
单元格使用text-align属性水平对齐，垂直对齐无法操作，使用css提供vertical-align属性用于垂直对齐
值说明
baseline内容对象与基线对齐
top内容对象与顶端对齐
middle内容对象与中部对齐
bottom内容对象与定不对齐
		// 单元格的内容对象实现垂直对齐
		table tr td{
			vertical-align:bottom;
		}
值说明
sub垂直对齐文本的下标
super垂直对齐的上标
	// 文本上下标设置
	b{
		vertical-align:super;
		}
属性值说明
color颜色值设置文本前净色
opacity0~1设置元素的透明度
	// 设置文本颜色
	p{
		color:red;
	}
	// 设置透明元素
	p{
	color:red;
	opactiy:0.5;
	}

盒子阴影和轮廓
1.box-shadow

box-shadowhoffset阴影的水平偏移量,是一个长度值，正值表示阴影向右偏移，负值表示阴影左偏
voffset阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，负值 代表阴影位于元素盒子
blur(可选)指定模胡值，是一个长度值，值越大盒子的边界越模糊，默认值为0，边界清晰
spread(可选)指定阴影延伸半径，一个长度值，正代表阴影向盒子各个方向延伸扩大，负值代表<阴影沿相反方向缩小/th>
color(可选)设置阴影的颜色
inset(可选)将外部阴影设置为内部阴影
	//  给盒子添加阴影效果
	div{
		width:200px;
		height:200px;
		border:10px solid silver;
		box-shadow:5px 4px 10px 2px gray;
	}

|outline-color|外围轮廓颜色|
|outline-offset|轮廓距离元素边框边缘的偏移量|
|outline-style|轮廓样式，|
|outline-witdh|轮廓宽度|
|outline|
在这里插入图片描述

none无变换
translate translateX translatY在水平方向、垂直方向或两个方向上平移元素
scale scaleX scaleY在水平方向、垂直方向或两个方向上缩放元素
rotale旋转元素
skew skewX skewY在水平方向、垂直方向或两个方向上使用元素倾斜一定的角度
matrix（4~6数值，逗号隔开）自定义变幻

3D

在这里插入图片描述
|flat||默认值，表示所有子元素在2D平面呈现|
|preserve-3d| 表示子元素在3D空间中呈现|

传统布局

1固定布局
在这里插入图片描述

// 以.css结尾的文件
@charset "utf-8";
body{
    width: 960px;
    /*水平居中*/
    margin: 0 auto;
    /*和父元素一起有header*/
    position: relative;
}
header{
    height: 100px;
    background-color: #0000FF;
    /*窗口在层上*/
    /*position: absolute;*/
    /*top: 50px;*/
    /*left: 50px;*/
    /*向下层*/
    /*z-index: -10;*/
    /*会随层动而动*/
    /*position: fixed;*/
    position: relative;
    top:10px;

}
aside{
    width: 30%;
    height: 200px;
    background: #0FF;
    /*左浮动*/
    float: left;
}
section{
    width: 70%;
    height: 200px;
    background: #F0F;
    float: right;

}
footer{
    height: 100px;
    /*清除浮动的影响*/
    clear:both;
    background: #DDDDDD;
}
// 以.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css浮动布局</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
       #header{
            color: green;
        }
        header{
            color: red;
        }
    </style>
</head>
<body>
    <header style="color:red;">header</header>
    <aside>aside</aside>
    <section>section</section>
    <footer>footer</footer>


</body>
</html>
加燕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中content属性,CSS3的content属性用法详解
weixin_34173656的博客
06-05 7356
Content属性应该算是使用最常用的一个css属性之一吧，比如我们创建一个聊天气泡、超链接的立体翻转特效、添加图标。都要使用到content属性，当然这个属性要结合：before和：after伪类使用。下面详细介绍它的用法。CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够...
html中content属性,CSS3的content属性详解
weixin_33673142的博客
06-05 9131
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:这是h1这是h2cssh1::after{content:"h1后插入内容"}h2::after{content:...
CSS content 添加 HTML 实体
wuxiaopengnihao1的博客
07-18 379
HTML提供了一些显示保留字符的方法。保留字符是为HTML保留的字符或基本键盘中不存在的字符。例如‘HTML实体。本示例使用CSS添加大于号和小于号，然后使用其对应的转义Unicode添加大于号和小于号。**示例**本示例使用使用CSS的HTML实体在文档中添加一些内容。...
css和html中content,CSS中需要明白的content属性_html/css_WEB-ITnose
weixin_39884877的博客
06-29 647
如果你是一个前端开发者,可能知道有一些很好的伪类的改变,比如CSS content属性.如果不熟悉这些概念的,可能需要去复习一篇了.在这篇文章中.我们主要是看 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性.content 属性的基本语法.content 属性的...
html如何折叠content,css content怎么用？
weixin_31108739的博客
06-03 150
css content怎么用？下面本篇文章给大家介绍一下css content属性。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css content怎么用？content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。说明： 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 di...
Web 前端知识笔记思维导图版
11-05
小白前端学习笔记，持续更新！ 前端知识驳杂，所以整理了思维导图版的笔记。 如果下载观看，建议下载.xmind版本的。
HTML、CSS知识点总结
10-20
html、css知识点，归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正，共同进步！
Web前端知识整理 初学者.zip
12-01
在“Web前端知识整理 初学者.zip”这个压缩包中，包含了“Web前端思维导图”的详细内容。这个思维导图对于初学者来说是一个宝贵的资源，它系统地梳理了Web前端开发的基础概念、核心技术以及常见工具，帮助学习者建立...
JQUERY知识整理文档
11-30
**jQuery知识整理文档** 在Web开发领域，JavaScript库如jQuery极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery以其简洁的API和强大的功能，成为开发者们首选的工具之一。本文档将深入探讨jQuery的...
web前端常用操作整理(含JS/HTML/CSS等方面知识)
09-22
web前端包括JS、HTML、CSS等等方面，本文整理了前端的常用操作，善用可提高工作效率，个人感觉还不错，喜欢的朋友可以参考下
常用的HTML和CSS content属性特殊字符归纳（转）
最新发布
slongzhang的博客
09-12 693
今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。
HTML+CSS个人笔记
qq_53233068的博客
09-10 4407
HTML+CSS个人笔记 HTML(Hyper Text Markup Language) 浏览器 什么是浏览器内核？ 浏览器所采用的渲染引擎（“Rendering Engine”）是浏览器最核心的组成部分，通俗的叫浏览器内核。 五大主流浏览器 浏览器 内核 简介 IE Trident 微软 仅支持windows Safari Webkit 苹果 Mac Firedox（火狐） Gecko Mozilla基金会 支持Windows、Linux、Mac Chrome（谷
html中content属性,CSS content 属性 | 菜鸟教程
weixin_32661017的博客
06-05 3538
content 属性遵循一个原则：CSS 仅仅改变样式。因此，所加入的内容不会在 HTML 代码中直接展现：事实上，打开 F12 调试会发现浏览器把 before 作为一个特殊的节点嵌入到目标元素中。这是很有用的一点，例如要制作一个伪输入元素(使用 contenteditable)时：默认值这一行 HTML 代码表示一个可编辑(仅允许纯文本)的段落，并且设置该“输入元素”的默认值。但是在一般的 i...
CSS3的content属性详解
weixin_34151004的博客
05-10 556
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 插入纯文字 content:"插入的文章"，或者content:none不插入内容 html: <h1>这是h1</h...
nginx css文件Content-Type为text/html 问题解决
热门推荐
小白成神路
11-24 3万+
新增一个基于域名的虚拟主机后，访问该虚拟主机目录下的css文件，Response Headers 中的Content-Type值为 text/html http://k1ic.com/static/frame.css nginx.conf nginx.conf k1ic.com.conf k1ic.com.conf 3.解决注意到配置php-fpm处为通配符“/”,使得所有请求均会被php-
html特殊字符 css3content
Clownfishl的博客
03-07 1779
content是css3新增的一个样式，对移动端的页面友好，兼容性很好，content用法不仅仅简单，而且很利于页面打开！ 简单叙述下css3的content用法！ 这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8； 下面符号列表的后面有两列编号，它们并不太一样，第一列是用于html的，你需要在前面加上&amp;#符号； 第二列可以用于CSS文件中，但是需要用反斜杠\...
CSS content 属性使用
Duke的博客
04-27 940
CSS content 属性 <!--设置链接文本的前后括号内添加的链接属性--> <style> a:after {content: " (" attr(href) ")";} </style> <p> <a href="http://www.baidu.com">百度</a>百度一下，你就知道 </p>...
css中content的使用
haoyanyu_的博客
05-08 1万+
1.显示具体内容（跟：after 和：before配合使用） HTML：  CSS  :   效果如下： 2.通过attr（）显示标签的属性 HTML：  CSS:  效果如下：  3.显示字符集图标 更多字符可以访问https://blog.csdn.net/sinat_17775997/article/details/52384680 4.图片替换文字 HTML...
常用的HTML和CSS content属性特殊字符归纳
张鑫的博客
07-12 2万+
今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。 因为这些字符属于unicode字符集，所以，我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式； 还有一点需要注意的是，部分字符在不同...
HTML5、CSS3、JS.docx
04-25
本文总结了一个月学习前端基础知识的成果，整理了HTML、CSS、HTML5、CSS3和JS的笔记，希望能够帮助他人学习交流。本文提供了免费的笔记，欢迎大家阅读。在学习过程中，如果有任何不准确或有待改进的地方，欢迎大家...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值