CSS基础笔记（二）

最新推荐文章于 2024-09-03 20:39:09 发布

尼古拉斯-阳

最新推荐文章于 2024-09-03 20:39:09 发布

阅读量134

点赞数

文章标签： css

子串匹配属性选择器

下表是对这些选择器的简单总结：

类型	描述
[abc^=“def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择 abc 属性值中包含子串 “def” 的所有元素

可以想到，这些选择有很多用途。

a[href*="w3school.com.cn"] {color: red;}

伪类

W3C：“W3C” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

<html>
<head>
	<style type="text/css">
		p:first-child {
		  color: red;
		  } 
	</style>
</head>

<body>
	<p>some text</p>
	<p>some text</p>
</body>
</html>

伪元素

W3C：“W3C” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS 分类属性 (Classification)

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

如何改变光标

CSS cursor 属性

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

<html>

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
		<span style="cursor:auto">
		Auto</span><br />
		<span style="cursor:crosshair">
		Crosshair</span><br />
		<span style="cursor:default">
		Default</span><br />
		<span style="cursor:pointer">
		Pointer</span><br />
		<span style="cursor:move">
		Move</span><br />
		<span style="cursor:e-resize">
		e-resize</span><br />
		<span style="cursor:ne-resize">
		ne-resize</span><br />
		<span style="cursor:nw-resize">
		nw-resize</span><br />
		<span style="cursor:n-resize">
		n-resize</span><br />
		<span style="cursor:se-resize">
		se-resize</span><br />
		<span style="cursor:sw-resize">
		sw-resize</span><br />
		<span style="cursor:s-resize">
		s-resize</span><br />
		<span style="cursor:w-resize">
		w-resize</span><br />
		<span style="cursor:text">
		text</span><br />
		<span style="cursor:wait">
		wait</span><br />
		<span style="cursor:help">
		help</span>
</body>

</html>

CSS visibility 属性

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit	规定应该从父元素继承 visibility 属性的值。

CSS display 属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示，表格前后带有换行符。
inline-table	此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示
table-header-group	此元素会作为一个或多个行的分组来显示
table-footer-group	此元素会作为一个或多个行的分组来显示
table-row	此元素会作为一个表格行显示
table-column-group	此元素会作为一个或多个列的分组来显示
table-column	此元素会作为一个单元格列显示
table-cell	此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption	此元素会作为一个表格标题显示（类似 caption）
inherit	规定应该从父元素继承 display 属性的值。

导航栏实例

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

尼古拉斯-阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础笔记（二）

子串匹配属性选择器下表是对这些选择器的简单总结：类型描述[abc^=“def”]选择 abc 属性值以 “def” 开头的所有元素[abc$=“def”]选择 abc 属性值以 “def” 结尾的所有元素[abc*=“def”]选择 abc 属性值中包含子串 “def” 的所有元素可以想到，这些选择有很多用途。a[href*="w3school.c...
复制链接

扫一扫