全栈 前端第二周（第三天）

一、对于选择器的内容补充：组合选择器

        1、后代选择器：使用空格隔开，选择所有的同类后代元素，下列代码演示为在html中选中代码主体部分内所有的<p>（包括在多级父子关系中的<p>）标签进行颜色样式的修改

        

body p
{
    color：red；
}

        2、亲代选择器：使用 > 隔开，选择某元素的直接子元素，下列代码演示为在html中，存在多级父子关系的情况下，亲代选择器只会选择该父级的直接子级元素

body>p
{
color:red;
}

        3、相邻兄第选择器：使用 + 隔开，选择某元素后的相邻元素，且兄弟元素需要有相同的父元素，下列代码演示为在同一个父元素下，以 p1 为原点，它的向下相邻标签（可不同标签）

注：选择的目标需是同一个父级元素下，可以是不同标签，且需在选择器下方的代码

.p1+span
{
    color: red;
}

        4、后续兄弟选择器：使用 ~ 隔开，选择某元素后的所有同种标签的兄弟元素，且兄弟元素要有相同的父元素,下列代码示例为在同一父元素下，多个不同标签是以class="p1"为原点，向下选择p标签，定义样式为红色

.p1~p
{
 color:red;
}

5、多个元素选择器：使用 ， 隔开，可以同时选择多个不同级别和标签的元素。下列代码演示选择了段落标签，标题标签和文本标签

p,h1,span
{
color:red;
}

6、通配符选择器，没有选中符号，默认选中所有的元素，用于清除元素的默认样式

{
color：red；
}

二、链接属性

链接默认有下划线，未访问时为蓝色，点击时为红色，访问过后为紫色，鼠标悬浮时改变鼠标样式。

1、text-decoration：修改超链接的下划线属性

2、伪类选择器：使用伪类选择器给一部分样式添加特殊效果

语法的使用方式为 冒号+类别

：link	选择未访问时的链接元素
：active	选择访问时的链接元素（针对所有元素）
：visited	选择已经访问的链接元素
：hover	选择鼠标移入时的链接元素（针对所有元素）
cursor	指定当鼠标移入到某个元素边界范围内所用的光标形状  针对所有元素

text-decoration：link/visited/active/hover
{
color:red;

cursor：   ;
}

cursor的使用方法为在定义样式中添加各种所需的样式即可

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	此光标指示可用的帮助（通常是一个问号或一个气球）

三、列表属性（list-style：设置列表的样式）

1、list-style-type：设置列表项标志类型

disc	实心圆
circle	空心圆
square	实心小方块
decimal	标记为数字
decimal-leading-zero	以0开头的数字标记（01,02,03.....）
upper-alpha	大写英文字母
lower-alpha	小写英文字母
upper-roman	大写罗马数字
lower-roman	小写罗马数字
lower-greek	小写希腊字母（alpha，beta.....）

还有一些其他样式：

    lower-greek         ：小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin           ：小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin          ：大写拉丁字母(A, B, C, D, E, 等。)
    hebrew               ：传统的希伯来编号方式
    armenian            ：传统的亚美尼亚编号方式
    georgian             ：传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic   ：简单的表意数字
    hiragana             ：标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
    katakana            ：标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
    hiragana-iroha   ：标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
    katakana-iroha   ：标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

2、list-style-position：设置列表项标志的位置

        1）outside （默认值）：列表项目名称标记放置在文本以外

        2）inside：列表项目名称标记放置在文本以内

3、list-style-image：将图像设置为列表项标志

        1）none：无图像被显示

        2）url：图片的地址/路径

四、表格属性

1、边框相关的属性

        1）border-collapse：设置表格的边框是否合并

                separate（默认值）：不合并

                collapse：合并（塌陷）

        2）caption-side：用于设置标题的位置

                top（默认值）：表格上方

                bottom：表格下方

        3）empty-cells：设置单元格的边框和背景

                show（默认值）：显示

                hide：不显示（仅用于边框分离的情况）

        4）table-layout：用于设置表格单元格的列宽的方式

                auto（默认值）：内容撑开，由最宽的一列决定

                fixed：固定不变的

五、背景属性（background：给元素设置背景属性）

1、background-color：定义背景色 ，可以通过颜色名，十六进制，rgb，rgba来设置颜色。

        transparent：透明（默认值）

2、background-image：将图像设置为元素背景

        none（默认）：无图像显示

        url：图像的路径/地址

3、background-repeat：设置背景图像是否重复（需先设置背景图像）

        repeat（默认值）：重复，平铺（水平和垂直方向都重复 ）

        no-repeat：不重复

        repeat-x:只水平重复

        repeat-y:只垂直重复

4、background-position：设置背景图像的起始位置，默认为左上角（需先设置背景图像）

        设置属性的默认顺序为：先左右，后上下（left / center / right / top / center / bottom）

        px：使用像素依据坐标轴来设置起始位置

        %：通过百分比设置。0% 0%为左上角

        只设置一个值的情况下，另一个值默认居中（center）

5、background-size：设置背景图像的大小（CSS3）

            px：先设置宽，后设置高
            %：先设置宽，后设置高

只设置一个值的情况下，另一个默认等比例放大或者缩小
            cover：覆盖  背景图像最小边充满背景
            contain：容器  背景图像最大边充满背景

6、background-attachment：设置背景图像是否固定 或者 随页面其余部分滚动

            scroll：默认 背景图像跟着页面滚动
            fixed：背景图像不跟着页面滚动
            local：背景图像会随着元素内容的滚动而滚动