欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

有关HTML、CSS、HTML5的细碎知识2

程序员文章站 2022-06-18 11:27:37
...

细碎知识点1:链接: link.
1. font简写方法
font:font-style font-variant font-weight font-size/line-height font-family
要求:
(1)font-style font-variant font-weight 是可选的,并且可以任意组合,但是必须出现在 font-size 前面。
(2)font-size 必须写,指定字体大小。
(3)line-height 是可选的,当设置的数字后面没有带单位,代表的是本身元素的大小的多少倍。
(4)font-family 设定字体的系列,必要

2. 伪类
伪类使用的一般顺序:link,visited,hover,focus,active,可以同时设置多个状态。
使用方法:

a:link {
	color: red; //当这个链接未被访问过则会显示红色
}

link:未访问过的状态;
visited:已访问过的状态;
hover:悬浮于之上的状态;
focus:获得焦点的状态(需要使用到键盘而不是鼠标);
active:活跃中的状态。

能够隔行进行修改样式的伪类:nth-child

p:nth-child(even){ //偶数的P段落是红色的背景
	background-color: red;
}

p:nth-child(odd){ //奇数的P段落是绿色的背景
	background-color: green;
}

或者
p:nth-child(2n){ //选中偶数
	background-color: red;
}

p:nth-child(2n+1){ //选中奇数
	background-color: green;
}

有关HTML、CSS、HTML5的细碎知识2

3. float浮动布局和绝对定位布局的相同点和区别
相同点:
使用了float浮动和绝对定位以后的元素都脱离正常的元素流,即从按代码编写的排版布局中脱离出来,不再占有位置
区别:
使用float浮动的元素依旧会被流中的文字元素感知,即当正常流中的文字遇到float元素以后会自动围绕浮动元素排版,并且可以使用clear进行浮动清理。
但是使用了绝对定位布局的元素则会被正常流中的元素完全忽略,并不会围绕绝对定位布局的元素进行布局,会直接被绝对定位布局的元素覆盖,也不能使用clear进行浮动清理。

4. 使用table进行布局

//HTML大体布局
<div id = "tableContainter">
	<div id = "tableRow">
		<div id = "main">
			...
		</div>
		<div id = "sidebar">
			...
		</div>
	</div>
</div>

//CSS样式布局
div#tableContainter {
	display: table;
}
div#tableRow {
	display: table-row;
}
#main{
	display: table-cell;
}
#sidebar{
	display: table-cell;
}

有关HTML、CSS、HTML5的细碎知识2

5. 表格相关
在< table >标签中可以通过添加< caption >标签来给表格增加一个标题。
caption-side 设置标题的位置,比如:caption-side:bottom;即设置标题在表格下方。
有关HTML、CSS、HTML5的细碎知识2

border-spacing 是单元格之间的空间,也就是边框距离。
border-collapse 用于折叠边框,可以把两个紧挨的合并成一个边框,比如:border-collapse:collapse;

6. ul中的li样式设置

li {
	list-style-type: disc; //默认类型,实心黑圆点
	list-style-type: circle; //空心圆圈
	list-style-type: square; //实心黑方块
	list-style-type: none; //无样式
}

有关HTML、CSS、HTML5的细碎知识2
自定义标记:

li {
	list-style-image: url(...);
}

有关HTML、CSS、HTML5的细碎知识2
7. HTML5中新增输入类型
(1)数字输入

<input type="number" min="0" max="20" step="2">
//使用min和max来限制允许输入的数值,通过step设置步长

有关HTML、CSS、HTML5的细碎知识2

(2)范围输入

<input type="range" min="0" max="20" step="5">
//使用min和max来限制允许输入的数值,通过step设置步长

有关HTML、CSS、HTML5的细碎知识2

(3)颜色输入

<input type="color">

有关HTML、CSS、HTML5的细碎知识2

(4)日期输入

<input type="date">

有关HTML、CSS、HTML5的细碎知识2

(5)email输入

<input type="email">

有关HTML、CSS、HTML5的细碎知识2

(6)tel输入

<input type="tel">

有关HTML、CSS、HTML5的细碎知识2

(7)url输入

<input type="url">

有关HTML、CSS、HTML5的细碎知识2

8. fieldset和legend
fieldset将公共的元素组织在一起,legend为他们提供一个标签名字

<fieldset>
	<legend>标签名称</legend>
	<input type="checkbox" name="spice" value="salt" /> Salt <br />
	<input type="checkbox" name="spice" value="pepper" /> Pepper <br />
	<input type="checkbox" name="spice" value="garlic" /> Garlic 
</fieldset>

有关HTML、CSS、HTML5的细碎知识2
9. 伪元素
可以用来选择元素的某些部分,比如:

p:first-letter {
	font-size: 3em; // 把段落的第一个字母放大
}

p:first-line{
	font-style: italic; //把第一行设置为斜体
}

10. 属性选择器

img[width] {
	border: black thin solid; //选中包含width属性的img
}

img[height="300"] {
	border: red thin solid; //选中height=“300”的img
}

img[alt~="flowers"] {
	border: #ccc thin solid; //选中alt属性包含单词“flowers”的img
}

11. 按兄弟选择

h1+p {
	font-style: italic; //选择所有紧跟在一个h1元素后面的段落
}
相关标签: css html html5