CSS属性与选择器清单

最新推荐文章于 2022-03-02 17:39:51 发布

Nevvvvver

最新推荐文章于 2022-03-02 17:39:51 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/qq_41125273/article/details/107223547

版权

CSS常用基本属性

CSS背景

属性	描述	属性值
background	简写属性
background-color	设置元素的背景颜色	color_name, hex_number, rgb_number
background-image	把图像设置为背景	none, url(‘URL’)
background-repeat	设置背景图像是否及如何重复	repeat, no-repeat, repeat-x,repeat-y
background-attachment	背景图像是否固定或者随着页面的其余部分滚动	scroll, fixed
background-position	设置背景图像的起始位置	xpos ypos (center, top, bottom, left, right) , height, %

background

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中，顺序为以上列表顺序，属性无需全部使用。

body {
	background:#ffffff url('img_tree.png') no-repeat right top;
}

background-color

h1 {
	background-color:red; /*颜色名称*/
	}
p {
	background-color:#e0ffff;/*十六进制*/
}
div {
    background-color:rgb(255，0，0);/*RGB*/
    /*
		color_name , hex_number , rgb_number
		transparent: 默认，背景颜色透明
	*/
}

background-image

默认情况下，背景图像进行水平和垂直方向的平铺重复显示，以覆盖整个元素实体。

body {
    background-image:url('paper.gif');
    /*
    	url('URL') , none
    */
}

background-repeat

body {
    background-repeat:no-repeat;
    /*
    	repeat: 默认，在垂直方向和水平方向平铺
        no-repeat：不平铺，只显示一次
        repeat-x：水平平铺
    	repeat-y：垂直平铺
    */
}

background-attachment

body {
    background-attachment:fixed;
    /*
    	scroll：默认，图片会随文档滚动
        fixed：相对于可视区固定
    */
}

background-position

body{
	background-position:center top;
	/*方位：
		xpos ypos :(center top bottom left right)一般由两个关键字组成，为垂直位置和水平位置，若有省略默认补齐center
		% , length：一般由两个关键字组成，依次为向右偏移量和向下偏移量，有省略默认补齐50%（ % 和 length 可以混用）
	*/
}

CSS文本

属性	描述	属性值
color	设置文本颜色	color_name, hex_number, rgb_number
direction	设置文本方向	ltr, rtl
line-height	设置行高	normal, length, %, number
letter-spacing	设置字符间距	normal, length
text-align	设置元素中文本的对齐方式	left, right, center, justify
text-decoration	向文本添加修饰	none, underline, overline, line-through, blink
text-indent	缩进元素中文本的首行	length, %
text-transform	控制元素中的字母	none, uppercase, lowercase, capitalize
unicode-bidi	设置文本方向	normal, embed, bidi-override, initial
white-space	设置元素中空白的处理方式	normal, pre, nowrap, pre-line, pre-wrap
word-spacing	设置字间（字、单词）间距	normal, length

color

body {
	color:red;
}
h1 {
	color:#00ff00;
}
h2 {
	color:rgb(255,0,0);
	/*
		color_name  hex_number  rgb_number
	*/
}

direction

对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

p {
	direction:ltr;
	/*
		ltr: 默认，文本方向从左到右
		rtl: 文本方向从右到左
	*/
}

可以看到 rtl 属性并不是真的从右往左书写，只是把标点符号写到了左边。
在这里插入图片描述

line-height

p {
	line-height: 3;
	/*
		normal：默认，设置合理的行间距
		length , % : 不允许使用负值
		number: 设置数字，此数字会与当前的字体尺寸相乘来设置行间距
	*/
}

letter-spacing

若是英文文本，则 letter-space 指的是字母与字母之间的间距。

h1 {
	letter-spacing: -0.5em;
	/*
		normal：默认，规定字符间没有额外的空间
		length：可以接受正长度值或负长度值
	*/
}

text-align

body {
	text-align:center;
	/*
	left：默认
	right , center
	justify：文本行的左右两端都放在父元素的内边界上，调整单词和字母间的间隔，使各行的长度恰好相等
	*/
}

text-decoration

a {
	text-decoration: underline;
	/*
		none：一般文本的默认值（除链接外），用于关闭所有装饰
		underline:下划线
		overline:上划线
		line-through:删除线
		blink:让文本闪烁(IE、Chrome、Safari不支持)
	*/
}
a {
	text-decoration: underline overline;
	/*可以在一个规则中结合多种装饰*/
}

text-indent

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。

p {
	text-indent:50px;
	/*
		length , % ：允许使用负值
	*/
}

使用负值还可以实现比如“悬挂缩进”，不过要小心首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {
	text-indent: -5em;
	padding-left: 5em;
}

text-transform

h1 {
	text-transform: uppercase;
	/*
		none:默认值，对文本不做任何改动
		uppercase:全大写
		lowercase:全小写
		capitalize:将每个单词的首字母大写，但其它字母不做改动
	*/
}

unicode-bidi

div {
    direction:rtl;
    unicode-bidi:bidi-override;
    /*
		normal: 默认，不使用附加的嵌入层面
		embed: 创建一个附加的嵌入层面
		bidi-override: 创建一个附加的嵌入层面，重新排序取决于direction属性
		initial:设置该属性为它的默认值
	*/	
}

当添加了 “bidi-override” 属性之后，可以看到第一行真正的是从右向左书写了。
在这里插入图片描述

white-space

空白符处理是把所有空白符合并为一个空格，忽略换行字符。

p {
	white-space: normal;/*浏览器默认*/
	/*
	               空白符     换行符    自动换行
		normal：    合并       忽略      允许   （默认）
		pre：       保留       保留      不允许
		nowrap：    合并       忽略      不允许
		pre-line：  合并       保留      允许   （兼容性不好）
		pre-wrap：  保留       保留      允许   （兼容性不好）
	*/
}

word-spacing

若是英文文本，则 word-space 指的是单词与单词之间的间距。

p {
	word-spacing: 30px;
	/*
		normal：默认，定义单词间的标准空间
		length：允许使用负值
	*/
}

CSS字体

属性	描述	属性值
font	简写属性，作用是把所有针对字体的属性设置在一个声明中
font-family	设置字体系列
font-size	设置字体的尺寸	length,%
font-style	设置字体风格	normal, italic, oblique
font-variant	以小型大写字体或者正常字体显示文本	normal, small-caps
font-weight	设置字体的粗细	normal, bold, bolder, lighter, 100-900(整百)

font

可设置的属性是（按顺序）：font-style font-variant font-weight font-size/line-height font-family
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入。

p {
    font:italic bold 12px/30px Georgia,serif;
}

font-family

在CSS中，有两种不同类型的字体系列：通用字体系列与特定字体系列。

p {
	font-family: sans-serif;
	/*
		除了特定的字体系列外，CSS的五种通用字体系列：
		Serif Sans-serif Monospace Cursive Fantasy
	*/

若使用特定字体，会产生一个问题，如果用户代理上没有安装该字体，就只能使用用户代理的默认字体来显示元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题：

h1 {
	font-family: Georgia, "宋体", "Times New Roman", Times, serif;
}

属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，将尝试下一种字体。

font-size

管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落，请务必正确使用HTML标签。

p {
	font-size: 2.5em; 
	/*
		常用：length, %
	*/
}

font-style

p {
	font-style: italic;
	/*
		normal: 文本正常显示
		italic: 文本斜体显示
		oblique: 文本倾斜显示
	*/
}

italic 和 oblique 的区别

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

font-variant

p {
	font-variant: small-caps;
	/*
		normal: 默认，标准字体
		small-caps：浏览器会显示小型大写字母的字体
	*/
}

<p>This is a paragraph</p>

在这里插入图片描述

font-weight

p {
	font-weight: bold;
	/*
		normal, bold, bolder, lighter
		100, 200, 300, 400, 500, 600, 700, 800, 900（其中400等同于normal，700等同于bold）
	*/
}

一般，字体所拥有的字重的数量实际很少存在满足有9个字重的，通常字体用有的字重数量为4至6个。但不必担心，起码400和700对应的字重至少是每重字体必备的。

CSS列表

属性	描述	属性值
list-style	简写属性，用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志	none, url(‘URL’)
list-style-position	设置列表中列表项标志的位置	outside, inside
list-style-type	设置列表项标志的类型	disc, circle, square, decimal…

CSS列表项标记可以为有序列表（数字或字母等）、无序列表（小黑点或小黑框等）、图像。

list-style

简写属性，list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

li {
	list-style : url(example.gif) square inside；
}

list-style-image

ul {
	list-style-image: url('arrow.jpg');
	/*
		none , url('URL')
	*/
	list-style-type: square;
}

<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>可口可乐</li>
</ul>

请始终规定一个 list-style-type 属性以防图像不可用。
在这里插入图片描述

list-style-position

ul {
	list-style-position:inside;
	/*
		outside: 默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
		inside: 列表项目标记放置在文本以内，且环绕文本根据标记对齐
	*/
}

在这里插入图片描述

list-style-type

list-style-type的所有属性值手册

ul.circle {
	list-style-type:circle;
}
ul.square {
	list-style-type:square;
}
ol.upper-roman {
	list-style-type:upper-roman;
}
ol.lower-alpha {
	list-style-type:lower-alpha;
	/* 常用的属性：
		disc：默认，标记是实心圆
		circle：标记是空心圆
		square：标记是实心方块
		decimal：标记是数字
		lower-roman/upper-roman：小写/大写罗马数字
		lower-alpha/upper-alpha：小写/大写英文字母
		lower-latin/upper-lation：小写/大写拉丁字母
	*/
}

CSS表格

属性	描述	属性值
boder-collapse	设置是否把表格边框合并为单一的边框	separate, collapse
boder-spacing	设置分隔单元格边框的距离	length length
caption-side	设置表格标题的位置	top, bottom
empty-cells	设置是否显示表格中的空单元格	hide, show
table-layout	设置显示单元、行和列的算法	automatic, fixed

若需要在CSS中设置表格边框，请使用 border 属性；
表格宽度和高度，可以通过 width 和 height 属性定义；
表格文本对齐，可以通过 text-align 和 vertical-align 属性定义；
如需控制表格中内容与边框的距离，可以为 td 和 th 设置 padding 属性。

border-collapse

table,th,td {
	border:1px solid blue;
}

<table>
	<tr>
		<th>Firstname</th>
		<th>Lastname</th>
	</tr>
	<tr>
		<td>Bill</td>
		<td>Gates</td>
	</tr>
	<tr>
		<td>Steven</td>
		<td>Jobs</td>
	</tr>
</table>

在这里插入图片描述
上面的例子，表格具有双线条边框，这是因为table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

table {
	border-collapse:collapse;
	/*
		separate: 默认值，边框会被分开，不会忽略border-spacing和empty-cells属性
		collapse: 如果可能，边框会合并为一个单一的边框，忽略border-spacing和empty-cells属性
	*/
}

table,th, td {
	border: 1px solid blue;
}

在这里插入图片描述

border-spacing

仅用于边框分离模式。

table {
	border-collapse:separate;
	border-spacing:10px 50px;
	/*
		length length：如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
	*/
}

在这里插入图片描述

caption-side

caption {
	caption-side:bottom;
	/*
		top：默认值，把表格标题定位在表格之上。
		bottom：把表格标题定位在表格之下。
	*/
}

empty-cells

仅用于边框分离模式。

table {
	border-collapse:separate;
	empty-cells:hide;
	/*
		hide：不在空单元格周围绘制边框
		show：默认，在空单元格周围绘制边框
	*/
}

table-layout

table {
	table-layout:fixed;
	/*
		automatic: 默认，列宽度由单元格内容设定
		fixed: 列宽由表格宽度和列宽度设定
	*/
}

CSS轮廓与边框

属性	描述	属性值
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色	color_name, hex_name, rgb_name
outline-style	设置轮廓的样式	none, dotted, dashed, solid, double…
outline-width	设置轮廓的宽度	thin, medium, thick, length
border	简写属性，用于把针对四个边的属性设置在一个声明
border-style	简写属性，用于设置元素所有边框的样式，或者单独地为各边设置边框样式	none,dotted, dashed, solid, double…
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度	thin, medium, thick, length
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色	color_name, hex_name, rgb_name
border-bottom border-left border-right border-top	简写属性，用于把下/左/右/上边框的所有属性设置到一个声明中
border-bottom-color border-left-color border-right-color border-top-color	设置元素的下/左/右/上边框的颜色	color_name, hex_name, rgb_name
border-bottom-style border-left-style border-right-style border-top-style	设置元素的下/左/右/上边框的样式	none, dotted, dashed, solid, double…
border-bottom-width border-left-width border-right-width border-top-width	设置元素的下/左/右/上边框的宽度	thin, medium, thick, length

outline

p {
	outline:#00ff00 dotted thick;
}

outline 简写属性在一个声明中设置所有的轮廓属性，可以按以上表格顺序设置属性。

outline-color

p {
	outline-color:#00ff00;
	/*
		color_name, hex_number, rgb_number
		invert：默认，执行颜色反转，可使轮廓在不同的背景颜色中都是可见的
	*/
}

outline-style

p {
	outline-style:dotted;
	/*
		none：默认，无轮廓
		dotted：点状轮廓
		dashed：虚线轮廓
		solid：实线轮廓
		double：双线轮廓，双线的宽度等同于outline-width的值
		groove/ridge：定义3D凹/凸槽轮廓，此效果取决于outline-color的值
		inset/outset：定义3D凹/凸边轮廓，此效果取决于outline-color的值
	*/
}

outline-width

outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0，不允许设置负值。

p.one {
	border:red solid thin;
	outline-style:solid;
	outline-width:thin;
}
p.two {
	border:red solid thin;
	outline-style:solid;
	outline-width:3px;
	/*
		thin：细轮廓
		mediun：默认，中等轮廓
		thick：粗轮廓
		length：规定轮廓粗细的值
	*/
}

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

在这里插入图片描述

boder

简写属性，设置四条边的边框的所有样式，可按照如下顺序 border-width, border-style, border-color。

p {
	border: 5px solid red;
}

border-style

可以设置所有边框的样式，或者单独地为各边设置边框样式，可以取一个至四个值，遵循值复制规则。

p {
	border-style:dotted;
	/*
		none：默认，无边框
		dotted：点状边框
		dashed：虚线边框
		solid：实线边框
		double：双线边框，双线的宽度等同于border-width的值
		groove/ridge：定义3D凹/凸槽边框，此效果取决于border-color的值
		inset/outset：定义3D凹/凸边边框，此效果取决于border-color的值
	*/
}

p {
	border-style:dotted solid double;/*上边框点状，右左边框实线，下边框双线*/
}

在这里插入图片描述

border-width

可以设置所有边框的宽度，或者单独地为各边设置边框宽度，可以取一个至四个值，遵循值复制规则。

p {
	border-style:solid;
    border-width:thin medium thick 10px;
    /*
		thin, medium, thick, length
	*/

}

border-color

可以设置所有边框的颜色，或者单独地为各边设置边框颜色，可以取一个至四个值，遵循值复制规则。

p {
    border-style:solid;
    border-color:red green gray;
}

border-bottom
border-left
border-right
border-top

单独设置某一条边框的所有样式，可以按照如下顺序：width, style, color 。

p {
	border-top:medium dotted red;
    border-right:thin solid white;
    border-bottom:10px dotted gray;
    border-left:5px solid blue;
}

border-bottom-color
border-left-color
border-right-color
border-top-color

单独设置某一条边框的颜色。

p {
	border-top-color:red;
    border-right-color:blue;
    border-bottom-color:yellow;
    border-left-color:gray;
}

border-bottom-style
border-left-style
border-right-style
border-top-style

单独设置某一条边框的样式。

p {
	border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

border-bottom-width
border-left-width
border-right-width
border-top-width

单独设置某一条边框的宽度。

p {
	border-top-width:medium;
    border-right-width:10px;
    border-bottom-width:thin;
    border-left-width:5px;
}

CSS内边距与外边距

属性	描述	属性值
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom padding-left padding-right padding-top	设置元素的下/左/右/上内边距	auto, length, %
margin	简写属性，作用是在一个声明中设置元素的所内边距属性
margin-bottom margin-left margin-right margin-top	设置元素的下/左/右/上内边距	auto, length, %

padding

此属性可以有一到四个值，遵循值复制规则。

p {
	padding: 10px 0.25em 2ex 20%;
	/*
		auto：浏览器计算内边距
		length（不允许使用负值）
		% (百分数值都是相对于其父元素的 width 计算的)
	*/
}

padding-bottom
padding-left
padding-right
padding-top

实现的效果与上面的简写规则是完全相同的，单独对每个边距进行设置。

h1 {
	padding-top: 10px;
	padding-right: 0.25em;
	padding-bottom: 2ex;
	padding-left: 20%;
}

margin

此属性可以有一到四个值，与内边距的设置相同，遵循值复制规则。

p {
	margin: 10px 0.25em 2ex 20%;
	/*
		auto：浏览器计算外边距
		length（可以使用负值）
		% (百分数值是相对于其父元素的 width 计算的)
	*/
}

可以用margin进行水平居中

p {
	margin:0 auto;
}

margin-bottom
margin-left
margin-right
margin-top

实现的效果与上面的简写规则是完全相同的，单独对每个边距进行设置。

h1 {
	margin-top: 10px;
	margin-right: 0.25em;
	margin-bottom: 2ex;
	margin-left: 20%;
}

CSS定位与浮动

属性	描述	属性值
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中	absolute, fixed, relative, static
top right bottom left	定义定位元素的上/右/下/左外边距边界与其包含块左边边界之间的偏移	auto, length, %
overflow	设置当元素的内容溢出其区域时发生的事情	visible, hidden, scroll, auto
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来	shape, auto
vertical-align	设置元素的垂直对齐方式	baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %
z-index	设置元素的堆叠顺序	auto, number
cursor	设置鼠标的样式	auto, crosshair, default, pointer, move, text…
display	设置是否以及如何显示元素	none, block, inline, inline-block, table
visibility	设置元素的可见性	visible, hidden, collapse
float	指定不允许元素周围有浮动元素	left, right, none
clear	指定一个盒子（元素）是否可以浮动	left, right, both, none

position

属性	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素框从文档流中完全删除元素的位置通过 left、top、right、bottom 属性进行规定
fixed	生成固定定位的元素，相对于浏览器窗口进行定位，元素框从文档流中完全删除元素的位置通过 left、top、right、bottom 属性进行规定
relative	生成相对定位的元素，相对于其正常位置进行定位，保留原本所占的空间元素的位置通过 left、top、right、bottom 属性进行规定
static	默认值。没有定位，元素出现在正常**的流中（忽略 top, bottom, left, right 或者 z-index 声明）

绝对定位absolute

固定定位fixed

绝对/固定定位元素的位置与文档流无关，因此不占据空间，原来的空间被删除，区别是他们的包含块不一样。

绝对定位的元素的位置相对于最近的已定位祖父元素；
固定定位的元素的位置相对于视口。

#box_relative {
	position: absolute;
	left: 30px;
	top: 20px;
}

在这里插入图片描述

相对定位relative

在使用相对定位时，元素仍然占据原来的空间。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

在这里插入图片描述

top
right
bottom
left

img {
	position:absolute;
	top:5px;
	right:-10em;
	/*
		auto, length, % （允许负值）
	*/
}

overflow

div {
	width:150px;
	height:150px;
	overflow:scroll;
	/*
		visible: 默认值，内容不会被修剪，会呈现在元素框之外
		hidden: 内容会被修剪，并且其余内容是不可见的
		scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
		auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
	*/
}

clip

img {
	position:absolute;
	clip:rect(0px,200px,60px,0px);
	/*
		shape: 设置元素的形状，唯一合法的形状值是：rect (top, right, bottom, left)
		auto: 默认值，不应用任何剪裁
	*/
}

在这里插入图片描述

vertical-align

img {
	vertical-align:middle;
	/*
		baseline: 默认，元素放在父元素的基线上
		sub: 垂直对齐文本的下标
		super: 垂直对齐文本的上标
		top:把元素的顶端与行种最高元素的顶端对齐
		text-top: 把元素的顶端与父元素的字体的顶端对齐
		middle: 把元素放在父元素的中部
		bottom: 把元素的顶端与行中最低的元素的顶端对齐
		text-bottom: 把元素的底端与父元素的字体的底端对齐
		length, %
	*/
}

在这里插入图片描述

z-index

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，可以拥有负值。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

img {
	position:absolute;/*只对定位元素奏效*/
	left:0px;
	top:0px;
	z-index:-1;
	/* 
		auto, number 
	*/
  }

cursor

p {
	cursor: pointer;
	/*  属性值见下图 */
}

在这里插入图片描述

display

display的所有属性值手册

p {
	display: inline;
	/*常用：
		none：此元素不会被显示
		block：显示为块元素，前后会有换行符
		inline：显示为内联元素，元素前后没有换行符
		inline-block：显示为行内块元素
		table：作为块级表格来显示，表格前后有换行符
	*/
}

visibility

h2 {
	visibility:hidden;
	/*
		visible: 默认，元素是可见的
		hidden: 元素是不可见的
		collapse: 当在表格元素中使用时，此值可删除一行或一列，但是不会影响表格的布局，此值用在其他元素上，会呈现 ”hidden“
	*/
}

float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在这里插入图片描述

在这里插入图片描述

img {
	float:right;
	/*
		left, right, none
	*/
}

clear

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。
在这里插入图片描述
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面。

img {
	float:left;
}
p {
	clear:both;
	/* 
		left, right, both：在左/右两侧不允许浮动元素
		none： 默认值，允许浮动元素出现在两侧
	*/
}

CSS尺寸

属性	描述	属性值
height width	设置元素的高度/宽度	auto ,length, %
max-height max-width	设置元素的最大高度/宽度	length, %
min-height min-width	设置元素的最小高度/宽度	length, %

CSS选择器

选择器类型	例子	描述
类选择器	.important	选择类class=“important”的所有元素
ID选择器	#intro	选择id=“intro”的所有元素
通配符选择器	*	选择所有元素
元素选择器	h1	选择所有<h1>元素
选择器分组	div, p	选择所有<div>和<p>元素
后代选择器	div p	选择<div>元素内部的所有<p>元素
子元素选择器	div > p	选择<div>的字元素<p>
相邻兄弟选择器	div + p	选择紧接在<div>元素之后的所有<p>元素
属性选择器	[class]	选择带有class属性的所有元素
	[class = “important”]	选择class = “important” 的所有元素
	[class ~= “important”]	选择 class 属性包含单词 “important” 的所有元素
	[class \|= “im”]	选择 class 属性以 “im” 开头的所有元素
伪类	a:active	选择被激活（鼠标点击时）链接
	a:hover	选择鼠标指针位于其上的链接
	a:link	选择所有未被访问的链接
	a:visited	选择所有已被访问的链接
	input:focus	选择获得焦点的input元素
	p:first-child	选择所有<p>元素，若它是其父元素的首个子元素
	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个<p>元素
伪元素	p:first-letter	选择每个<p>元素的首字母
	p:first-line	选择每个<p>元素的首行
	p:before	在每个<p>元素的内容之前插入内容
	p:after	在每个<p>元素的内容之后插入内容

类选择器

.important {color:red;}
p.important {color:red;}

/* 只匹配 class 属性中同时包含词 important 和 urgent 的元素 */
.important.urgent {background:silver;}

ID选择器

#intro {font-weight:bold;}

通配符选择器

该选择器可以与任何元素匹配，就像是一个通配符。

* {color:red;}

元素/类型选择器

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

选择器分组

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

后代选择器

选择所有后代，无论嵌套多深。

/* 只对 h1 元素中的 em 元素应用样式 */
h1 em {color:red;}

子元素选择器

只选择子元素，即第一层嵌套。

h1 > strong {color:red;}

相邻兄弟选择器

选择紧接在该元素后的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}

属性选择器

/* 如果您希望把包含标题（title）的所有元素变为红色 */
*[title] {color:red;}

/* 对有 href 属性的锚（a 元素）应用 */
a[href] {color:red;}

/* 将同时有 href 和 title 属性的 锚（a 元素）设置为红色 */
a[href][title] {color:red;}

/* 根据具体属性值来选择该元素，若写成 p[class="important"] 则无法匹配 */
p[class="important warning"] {color: red;}

<p class="important warning">This paragraph is a very important warning.</p>

/* 部分值匹配，根据部分属性值进行选择 */
p[class～="important"] {color: red;}

/*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 */
p[class|="important"] {color: red;}

伪类

用于向某些选择器添加特殊的效果。

a:active

a:hover

a:link

a:visited

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

a:link {
	color:#FF0000;
	text-decoration:none;
}		
a:visited {
	color:#00FF00;
	text-decoration:none;
}	
a:hover {
	color:#FF00FF;
	text-decoration:underline;
}	
a:active {
	color:#0000FF;
	text-decoration:underline;
}

input:focus

选择获得焦点的输入字段，并设置其样式。

input:focus {
	background-color:yellow;
}

在这里插入图片描述

a:first-child

p:first-child {
	background-color:yellow;
}

<body>
	<p>这个段落是其父元素（body）的首个子元素。</p>
	<h1>欢迎访问我的主页</h1>
	<p>这个段落不是其父元素的首个子元素。</p>
	<div>
		<p>这个段落是其父元素（div）的首个子元素。</p>
		<p>这个段落不是其父元素的首个子元素。</p>
	</div>
</div>

在这里插入图片描述

a:lang(it)

p:lang(en) { 
	background:yellow;
}

<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>

在这里插入图片描述

伪元素

p:first-letter

p:first-letter {
	color: #ff0000;
	font-size:xx-large
}

<p>
	You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>

在这里插入图片描述

p:first-line

p:first-line {
	color: #ff0000;
	font-variant: small-caps
}

<p>
	You can use the :first-line pseudo-element to add a special<br>
	effect to the first line of a text!
</p>

在这里插入图片描述

p:before

h1:before {
	content:url(logo.gif);
}

p:after

h1:after {
	content:url(logo.gif);
}

Nevvvvver

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性与选择器清单

CSS的常用基本属性CSS样式CSS背景CSS文本CSS字体CSS链接CSS列表CSS表格CSS轮廓CSS样式CSS背景属性描述background-color设置元素的背景颜色background-image把图像设置为背景background-repeat设置背景图像是否及如何重复background-attachment背景图像是否固定或者随着页面的其余部分滚动background-position设置背景图像的起始位置backgrou
复制链接

扫一扫