CSS样式详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_43485772/article/details/107043819

背景

background-color

接受任何合法的颜色值

background-image

默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。
不能继承
语法：url()
多背景：url(image1.png), url(image2.png), url(image3.png), url(image1.png)

background-repeat

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

example：

no-repeat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JV76N1Vm-1593593017536)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701115351.png)]

repeat-x

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOeTHoAV-1593593017540)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701115450.png)]

repeat-y

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IscspO8V-1593593017542)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701115546.png)]

background-size

cover — 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

example:

background-size: 100px 10em;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95s3UpHI-1593593017547)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701124758.png)]

cover:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bv3SOO2s-1593593017550)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701124850.png)]

contain:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nAWgX96l-1593593017552)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701124925.png)]

background-position

单一关键字：

top、bottom、left、right 和 center

双关键字：

可以组合上面的，而两值对应的是水平和垂直值（可用%,px,em）

linear-gradient

direction	用角度值指定渐变的方向（或角度，单位deg）
color-stop1, color-stop2,…	用于指定渐变的起止颜色

radial-gradient

shape	确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变; circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角; closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 ;closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角; farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值：center（默认）：设置中间为径向渐变圆心的纵坐标值; top：设置顶部为径向渐变圆心的纵坐标值; bottom：设置底部为径向渐变圆心的纵坐标值
start-color, …, last-color	用于指定渐变的起止颜色

background-attachment

scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

边框

边框的共性

因为重要就放到这里讲，通过border-style的例子说明

1个值：border-style:dotted;
所有 4 个边框都是点状

2个值：border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线

值1：上+下

值2：左+右

3个值：border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线

值1：上

值2：左+右

值3：下

4个值：border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

值1：上

值2：右

值3：下

值4：左

常用格式：

 border: 1px solid black;

border-style

none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

包含：

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

border-width

包含：

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

注意：要有border-width必须先设置border-width

border-color

包含：

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

默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table

border-radius

可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径

列表

列表类型

无序列表：

<ul>
  <li>Humous</li>
  <li>Pitta</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nMR5uqQJ-1593593017555)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151121.png)]

顺序列表：

<ol>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edf0cv3U-1593593017556)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151136.png)]

首行缩进：

<dl>
  <dt>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ji1MU6e-1593593017558)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151152.png)]

特定属性

start:属性允许你从1 以外的数字开始计数

reversed:列表倒计数

value:允许设置列表项指定数值

sist-style-type

`list-style-type

设置项目符号点的类型
常用：

disc	实心圆点 (默认值)
circle	空心圆点
square	实心方块
decimal	十进制阿拉伯数字；从1开始
decimal-leading-zero	01, 02, 03, … 98, 99
upper-roman	I, II, III, IV, V…

list-style-position

outside	标记盒在主块盒的外面
inside	标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxmdjhlW-1593593017560)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701150303.png)]

list-style-image

允许对于项目符号使用自定义图片，注意设置限制来显示完整

链接

标签默认样式

链接具有下划线
未访问过的 (Unvisited) 的链接是蓝色的
访问过的 (Visited) 的链接是紫色的
悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标
选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接
激活 (Active) 链接的时候会变成红色

常用空链接规则集

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

伪类

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

注意：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

去下划线

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}