第四天背景边框列表链接和更复杂的选择器-CSDN博客

本文链接：https://blog.csdn.net/hualala_32/article/details/80261350

第四天背景边框列表链接和更复杂的选择器

课程目标

掌握CSS稍微复杂的一些选择器，还有背景，边框等一些CSS样式属性

课程描述

复习

CSS的基本概念，基本的选择器，以及关于字体的一些样式设置。

阅读

因为不知道为什么MDN打不开，所以有些没看到，以后再补上了。

阅读笔记

背景

background-color：为元素设置背景色，不能继承，默认是transparent。
background-image：把图像放入背景，默认值是none，不能继承。事实上，所有背景属性都不能继承。
- 另一个可用的值：颜色渐变，包括线性渐变（从一条直线到另一条直线）和径向渐变（从一个点发散出来）。
- 线性渐变是通过linear-gradient()函数传入的，至少需要用括号分隔的三个参数——背景中渐变的方向，开始颜色和结尾的颜色。可以使用关键字来指定方向（to bottom，to right，to bottom right等），或角度值（0deg相当于to top，90deg相当于to right，直到360deg，它再次相当于to top）。
- repeating-linear-gradient()设置一个重复的线性渐变。
```
body {background-image: url(/i/eg_bg_04.gif);}
background-image: linear-gradient(to bottom, orange, yellow);
background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);      
```
background-repeat：在页面上对背景图像进行平铺。repeat在水平垂直方向上都平铺。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
background-position：改变图像在背景中的位置。如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。如果只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center。
- 像px这样的绝对值
- 像rems这样的相对值
- 百分比
- 关键字：right center
  
  background-position:top;
  background-position:50% 50%;
background-attachment：通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
```
background-attachment:fixed
```

background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框下面。

background-clip: border-box; // 包含边框
background-clip: padding-box; // 不包含边框
background-clip: content-box; // 不包含padding

background：简写

div {
    background-color: yellow;
    background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
    background-repeat: no-repeat;
    background-position: 99% center;
}
div {
    background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

多个背景：这些背景都是堆叠在一起的，第一个出现在顶部，第二个在下面，第三个，等等。
```
background-image: url(image.png), url(background-tile.png);
```
背景尺寸background-size：允许你动态地改变背景图像的大小。
```
background-size: 16px 16px;
```

边框

元素的边框就是围绕元素内容和内边距的一条或多条线。
每个边框有3个方面：宽度、样式以及颜色。
边框绘制在“元素的背景之上”。

border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

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

定义多种样式：border-style: solid dotted dashed double;
定义单边样式：border-top-style

border-width：边框的宽度，有两种方法，一可以指定长度值，比如2px或0.1em；二使用3个关键字之一，他们分别是thin、medium（默认值）和thick。
border-color：设置边框颜色，一次可以接受最多4个颜色值。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。
透明边框：border-color: transparent;
border-radius：边界半径。可以使用任何长度单位来指定边界半径，例如：px，rems，%。还可以创建椭圆形角（x半径与y半径不同）。两个不同的半径用正斜杆（/）分隔border-radius: 10px / 20px;。
border-image：边界图像。（IE 11+支持，以及其他现代浏览器）。首先，我们需要一个盒子来应用边界。这需要指定一个边界，否则边界图像将没有显示的空间。我们还将使用background-clip，使任何背景色只填充内容和内边距的区域，并且不扩展到边界。
```
border: 30px solid black;
background-clip: padding-box;
```
- border-image-source：指定要使用的源图像作为边界图像。能够接受一个url()函数或一个渐变作为一个值。
- border-image-slice：设置所需大小的切片。如果图像是光栅图形（.png或.jpg），就用像素来解释这个数字。如果图像是矢量图形（比如，.svg），那么这个数字将被解释为图形中的坐标。也可以使用百分比（使用单位%）。
- border-image-repeat：填充边界。stretch|repeat|round|space。
- border-image-width：只调整边界图像，而不是边界——如果这个设置小于border-width，它会在边界的外面，而不是填满它。如果它更大，那么它就会扩展到边界之外，并开始重叠在内边距/内容上。
- border-image-outset：定义边界内部和内边距之间的额外空间的大小——有点像“边界填充”。
- 简写：border-image: url(border-image.png) 40 round;
border：border-width border-style border-color

列表

list-style-type：修改用于列表项的标志类型。值：none|disc（实心圆）|circle（空心圆）|square（实心方块）|decimal（数字）
list-style-image：列表项图像。例：list-style-image : url(xxx.gif)。

list-style-position：列表标志位置。

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

简写：list-style: url(example.gif) square inside。list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
管理列表计数start：<ol start="4"><li></li></ol>
reversed：启动列表倒计数<ol start='4' reversed>
value：允许设置列表项指定数值<li value="2">

链接

链接的四种状态：
- a:link：普通的、未被访问的链接
- a:visited：用户已访问的链接
- a:hover：鼠标指针位于链接的上方
- a:active：链接被点击的时刻
当为链接的不同状态设置样式时，有以下规则：
- a:hover必须位于a:link和a:visited之后
- a:avtive必须位于a:hover之后
text-decoration：去掉链接中的下划线
background-color：规定链接的背景色

选择器

选择器	选择的元素
`A,E`	多元素选择器，同时选择多个元素
`A E`	派生选择器，元素A的任一后代E（后代节点指A的子节点，子节点的子节点，以此类推）
`A > E`	元素A的任一子元素E（也就是直系后代）
`E:first-child`	任一是其父母节点的第一个子节点的元素E
`B + E`	元素B的任一下一个兄弟元素E
`B ~ E`	B元素后面的拥有共同父元素的兄弟元素E

1. 伪类选择器
- :link
- :visited
- :active
- :hover
- :focus
- :first-child
- :nth-child
- :nth-last-child
- :nth-of-type
- :first-of-type
- :last-of-type
- :empty
- :target
- :checked
- :enabled
- :disabled
2. 优先级
- 标签选择符、伪类及伪对象：优先级积分为1
- 类选择符、属性选择符：优先级积分为10
- ID选择符：优先级积分为100
- style属性：优先级积分为1000
- 其他选择符，如通配符选择符等：优先级积分为0