css3层叠样式表
html中引入css样式表方法***********************************************************
1,内部样式表
<head>
<style type="text/css">内容</style>
</head>
2,行内样式表
<body>
<HTML标签 style="样式属性:取值;样式属性:取值;...."></HTML标签>
</body>
3,链接样式表
<head>
<link rel="stylesheet" type="text/css" href="样式表文件的地址">
</head>
4,导入样式表
<head>
<style type="text/css">
@import url("外部样式表文件地址");
</style>
</head>
a标签的伪类选择器******************************************************************
a:link{}//默认地
a:visited{}//访问过的
a:active{}//鼠标长按
a:hover{}//鼠标悬停
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
访问过程顺序记忆:love hate
默认状态:从未被访问过的状态.
被访问过的状态.
长按状态.
<style>
a:link{
color:red;
}
a:visited{
color:green;
}
a:hover{
color:orange;
}
a:active{
color:pink;
}
</style>
<body>
<a href="#">taobao</a>
<a href="#">JD</a>
</body>
css三大特性************************************************************************
继承性
作用:给父元素设置一些属性,所有后代元素也可以使用。
只有以color-/font-/text-/line-开头的属性才有继承性
超链接不能继承父元素的颜色和下划线属性,h标签的文字大小不能继承
层叠性
作用:就是css处理冲突的一种能力。
只有在多个选择器选中同一个标签,然后又设置了相同的属性的不同值。
优先级
1,是否直接选中
<style></style>
是否间接选中(继承性)
离目标标签最近优先级最高
2,是否相同的选择器
直接选中,相同选择器时,谁在最后,标签的属性值就是谁的值
3,不同选择器
直接选中,不是相同选择器,就按优先级:id>类>标签>通配符>继承>浏览器默认
行内样式>内嵌样式表>链接样式表>导入样式表
important
作用:用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高。
important只能用于直接选中,不能用于间接选中。
通配符选择器选中的标签也是直接选中的
只能提升被指定的属性的优先级
<ul>
<li>
<p id="i1" class="c1"></p>
</li>
</ul>
<style>
#i1{color:purple !important;}
.c1{color:pink !important;}
p{color:green !important;font-size:50px;}
*{color:blue !important;font-size:10px;}
li{color:red !important;}
</style>
优先级的权重问题
<div id="identity1" class="box1"><ul>
<li>
<p id="identity2" class="box2">段落</p>
</li>
</ul>
</div>
<style>
#identity1 .box2{color:red;}
.box1 .box2{color:green;}
div ul li p{color:blue;}
</style>
作用:当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高。
规则:
首先先计算选择器中有多少个id,id多的选择器优先级最高
如果id的个数一样时,那么再看类名的个数,类名的个数多的优先级高。
如果类名的个数一样时,那么再看标签名称的个数,标签名称个数多的优先级高。
如果id,类名,标签名称个数一样时,那么就不会继续往下计算,那么此时谁在后面听谁的,也就是说优先级如果一样,那么谁写在后面听谁的.
显示模式********************************************************************
块级元素:会独占一行,如果没有设置宽度,默认和父元素一样高。
容器级标签,
行内元素:不会独占一行,和内容一样宽。不能设置宽度和高度
除了p以外的文本级标签
行内块级元素:img,
显示模式转换:
块级转行内:dispaly:inline;
行内转块级:display:block;
转行内块级:dispaly:inline-block;
display:block/inline/inline-block
文字样式***************************************************************************
组合设置:font:
font:font-style font-weight font-size font-family;
font:italic bold 10px "斜体"
style,weight可以省略,size,family不能省略
style,weight可以交换位置,size,family不能交换位置
字体:font-family
基本用法:font-family:字体1,字体2,字体3;有些字体中间出现空格要用英文双引号将字体括起来.
https://blog.csdn.net/weixin_40529341/article/details/80510036
字号:font-size
注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
风格(斜体):font-style
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
加粗:font-weight
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
| 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
颜色:color
https://blog.csdn.net/weixin_40529341/article/details/80510036
变体:font-variant
值 | 描述 |
---|---|
normal | 默认值。浏览器会显示一个标准的字体。 |
small-caps | 浏览器会显示小型大写字母的字体。 |
inherit | 规定应该从父元素继承 font-variant 属性的值。 |
文本样式***************************************************************************
修饰文字:text-decoration
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
转换英文字母大小写:text-transform
值 | 描述 |
---|---|
none | 默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize | 文本中的每个单词以大写字母开头。 |
uppercase | 定义仅有大写字母。 |
lowercase | 定义无大写字母,仅有小写字母。 |
inherit | 规定应该从父元素继承 text-transform 属性的值。 |
设置中文字符间距:letter-spacing
值 | 描述 |
---|---|
normal | 默认。规定字符间没有额外的空间。 |
length | 定义字符间的固定空间(允许使用负值)。 |
inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
设置英文单词间距:word-spacing
值 | 描述 |
---|---|
normal | 默认。定义单词间的标准空间。 |
length | 定义单词间的固定空间。 |
inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
设置段落的水平对齐方式:text-align
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
值 justify
最后一个水平对齐属性是 justify,它会带来自己的一些问题。
值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在 CSS 中,还需要多做些考虑。
要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过 CSS 规范特别指出,如果 letter-spacing 属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS 也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于 CSS 没有定义连字符行为,用户代理不太可能自动加连字符。因此,在 CSS 中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。
设置段落首行缩进:text-indent:2em(一般情况);
调整行高:line-height:块级元素高度;设置文字垂直居中.
列表样式***************************************************************************
组合设置:list-style:
可以按顺序设置如下属性:
- list-style-type
- list-style-position
- list-style-image
列表符号:list-style-type:
值 | 描述 |
---|---|
none | 无标记。 |
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
使用图像符号:list-style-image:
值 | 描述 |
---|---|
URL | 图像的路径。 |
none | 默认。无图形被显示。 |
inherit | 规定应该从父元素继承 list-style-image 属性的值。 |
调整列表位置:list-style-position:
值 | 描述 |
---|---|
inside | 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
表格*************************************************************************
属性 | 描述 |
---|---|
border-collapse | 设置是否把表格边框合并为单一的边框。 |
border-spacing | 设置分隔单元格边框的距离。 |
caption-side | 设置表格标题的位置。 |
empty-cells | 设置是否显示表格中的空单元格。 |
table-layout | 设置显示单元、行和列的算法。 |
border-collapse
值 | 描述 |
---|---|
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
border-spacing
值 | 描述 |
---|---|
length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数,那么定义的是水平和垂直间距。 如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。 |
inherit | 规定应该从父元素继承 border-spacing 属性的值。 |
caption-slide
值 | 描述 |
---|---|
top | 默认值。把表格标题定位在表格之上。 |
bottom | 把表格标题定位在表格之下。 |
inherit | 规定应该从父元素继承 caption-side 属性的值。 |
empty-cells
值 | 描述 |
---|---|
hide | 不在空单元格周围绘制边框。 |
show | 在空单元格周围绘制边框。默认。 |
inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
table-layout
值 | 描述 |
---|---|
automatic | 默认。列宽度由单元格内容设定。 |
fixed | 列宽由表格宽度和列宽度设定。 |
inherit | 规定应该从父元素继承 table-layout 属性的值。 |
轮廓样式***************************************************************************
组合样式:outline:
可以按顺序设置如下属性:
- outline-color
- outline-style
- outline-width
outline-color:
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的轮廓颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的轮廓颜色(比如 rgb(255,0,0))。 |
invert | 默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。 |
inherit | 规定应该从父元素继承轮廓颜色的设置。 |
outline-style:
值 | 描述 |
---|---|
none | 默认。定义无轮廓。 |
dotted | 定义点状的轮廓。 |
dashed | 定义虚线轮廓。 |
solid | 定义实线轮廓。 |
double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
inherit | 规定应该从父元素继承轮廓样式的设置。 |
outline-width:
值 | 描述 |
---|---|
thin | 规定细轮廓。 |
medium | 默认。规定中等的轮廓。 |
thick | 规定粗的轮廓。 |
length | 允许您规定轮廓粗细的值。 |
inherit | 规定应该从父元素继承轮廓宽度的设置。 |
背景样式********************************************************************
组合样式:background:颜色 图片 平铺 关联 定位
可以设置如下属性:
- background-color颜色
- background-position定位 x,y
- background-size
- background-repeat平铺
- background-origin
- background-clip
- background-attachment关联
- background-image图片
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
值 | 描述 | CSS |
---|---|---|
background-color | 规定要使用的背景颜色。 | 1 |
background-position | 规定背景图像的位置。 | 1 |
background-size | 规定背景图片的尺寸。 | 3 |
background-repeat | 规定如何重复背景图像。 | 1 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-clip | 规定背景的绘制区域。 | 3 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-image | 规定要使用的背景图像。 | 1 |
inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
background-color
background-position
background-position:x y;[x:left/center/right/?px[可为负数]],[y:top/center/bottom/?px[可为负数]]
值 | 描述 |
---|---|
| 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
background-size
值 | 描述 | 测试 |
---|---|---|
length | 设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 | 测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
background-repeat
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-origin
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 | 测试 |
background-clip
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
background-attachment
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
background-image
值 | 描述 |
---|---|
url('URL') | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
inherit | 规定应该从父元素继承 background-image 属性的设置。 |
CSS 尺寸属性******************************************************************************************
CSS 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。
属性 | 描述 |
---|---|
height | 设置元素的高度。 |
line-height | 设置行高。 |
max-height | 设置元素的最大高度。 |
max-width | 设置元素的最大宽度。 |
min-height | 设置元素的最小高度。 |
min-width | 设置元素的最小宽度。 |
width | 设置元素的宽度。 |
CSS 分类属性 (Classification)**************************************************************************
CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。
属性 | 描述 |
---|---|
clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
cursor | 规定当指向某元素之上时显示的指针类型。 |
display | 设置是否及如何显示元素。 |
float | 定义元素在哪个方向浮动。 |
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility | 设置元素是否可见或不可见。 |
clear属性
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
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 | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
display属性
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
float属性
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
position属性
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
visibility属性
值 | 描述 |
---|---|
visible | 默认值。元素是可见的。 |
hidden | 元素是不可见的。 |
collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |
inherit | 规定应该从父元素继承 visibility 属性的值。 |