CSS3的一些知识点

1、元素选择器，即 E {...}，E代表有效的HTML元素；可以用*来表示应用到文档中的任意元素；

<style type="text/css">
    body {
        margin: 100px;
    }
</style>

2、属性选择器，有如下几种：

  • E[attr] {...}：指定该CSS样式对所有具有attr属性的E元素起作用；
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
   div[align] {
       width:200px;
       height:100px;
       border:1px solid red;
   }
</style>
</head>
<body>
<div align="center">我具有align属性</div>
<dvi>我没有align属性</dvi>
</body>
</html>

  • E[attr=value] {...}：指定该CSS样式对所有具有attr属性，并且值为value的E元素起作用；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[align="center"] {
            width: 200px;
            height: 100px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div align="center">我有align="center"属性</div>
    <div align="left">我有align="left"属性</div>
</body>
</html>

  • E[attr~=value] {...}：指定该CSS样式对所有具有attr属性，并且该属性值有多个，以空格隔开，对某个值为value的E元素起作用；
  • E[attr|=value] {...}：指定该CSS样式对所有具有attr属性，且attr属性值以连字符分隔的系列值，对其中第一个值为value的E元素起作用；
  • E[attr^=value] {...}：指定该CSS样式对所有具有attr属性，且attr属性值以value开头的字符串的E元素起作用；
  • E[attr$=value] {...}：指定该CSS样式对所有具有attr属性，且attr属性值以value结尾的字符串的E元素起作用；
  • E[attr*=value] {...}：指定该CSS样式对所有具有attr属性，且attr属性值对有包含value的字符串的E元素起作用；

3、ID选择器，即#idValue {...}：对具有指定id属性值的元素起作用，还可以指定对某一个具体类型元素且id值为idValue的元素起作用，即E#idValue {...}；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#div1 {
            font-size: large;
            background-color: #9fcdff;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        我是一个div
    </div>
</body>
</html>

4、class选择器，即.classValue {...}：对具有指定class属性值的元素起作用，还可以指定对某一个具体类型元素且class值为classValue的元素起作用，即E.classValue {...}；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p.c1 {
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div>
        <p class="c1">我是一个莫得感情的P</p>
        <span class="c1">我是个span</span>
    </div>
</body>
</html>

5、包含选择器，即selector1 selector2 {...}：指定的目标选择器必须处于某个选择器对应元素内部；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div .c1 {
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div>
        <p class="c1">我是一个莫得感情的P</p>
        <span>我是个span</span>
    </div>
</body>
</html>

6、子选择器，即selector1>selector2 {...}：指定目标选择器必须是某个选择器对应元素的子元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1>span{
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <p>我是一个莫得感情的P</p>
            <span>我是个span</span>
        </div>
    </div>
</body>
</html>

7、兄弟选择器，即selector1~selector2 {...}：指定目标选择器必须是某个选择器对应元素后面的能匹配的元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1~span{
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <p>我是一个莫得感情的P</p>
            <span>我是个span</span>
        </div>
    </div>
    <span>我是div1的兄弟</span>
    <span>我是div1的兄弟</span>
    <span>我是div1的兄弟</span>
</body>
</html>

8、组合选择器，即selector1,selector2,selector3... {...}：让一份CSS样式对多个选择器起作用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,span{
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <p>我是一个p</p>
    <span>我是一个span</span>
</body>
</html>

9、伪元素选择器，CSS提供了4个：

  • :first-letter：对指定对象内的第一个字符起作用；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:first-letter{
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
</body>
</html>

  • :first-line：对指定对象内的第一行内容起作用；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:first-line{
            font-size: large;
            color: #9fcdff;
        }
    </style>
</head>
<body>
    <div>
        我是第一行<br>
        我是第二行
    </div>
</body>
</html>

注：:first-letter和:first-line选择器仅对块元素起作用，若想应用在行内属性上，需要设定对象的height、width属性，或设定position属性值为absolute，或设定display属性值为block。

  •  :before：该选择绮与内容相关的属性content结合使用，用于向指定的对象内部前端插入内容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:before {
            content: "歌词：";
        }
    </style>
</head>
<body>
    <p>遇见你 需要运气</p>
    <p>爱上你 却需要多少勇气</p>
</body>
</html>

  • :after：该选择绮与内容相关的属性content结合使用，用于向指定的对象内部尾端插入内容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:after {
            content: "——《吻下去爱上你》";
        }
    </style>
</head>
<body>
    <p>遇见你 需要运气</p>
    <p>爱上你 却需要多少勇气</p>
</body>
</html>

10、伪类选择器，用于对已有选择器做进一步的限制，有三类：

  • 结构性伪类选择器
    • :root：匹配文档的根元素，HTML文档的根元素是<html>；　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       :root {
            background-color: #9fcdff;
        }
    </style>
</head>
<body>
</body>
</html>

    • selector:first-child：匹配符合selector选择器，而且必须是其父元素的第一个子节点元素；selector:last-child与它同理；　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:first-child {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>
</body>
</html>

    • selector:nth-child(n)：匹配符号selector选择器，而且必须是其父元素的第n个子节点元素；　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:nth-child(2) {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>
</body>
</html>

    • selector:nth-last-child(n)：匹配符合selector选择器，而且必须是其父元素的倒数第n个子节点元素；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:nth-last-child(1) {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>
</body>
</html>

注意：上面两个选择器还可以接收参数：odd/event/xn+y（n从0开始），下面举个栗子吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:nth-child(2n+2) {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
    </ul>
</body>
</html>

    • selector:only-child：匹配符合selector选择器，而且必须是其父元素的唯一子节点的元素；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:only-child {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>only one</li>
    </ul>
</body>
</html>

    • selector:first-of-type：匹配符号selector选择器，而且是与它同类型同级的兄弟元素中的第一个元素；selector:last-of-type与它同理；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:first-of-type {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>me</li>
        <li>brother</li>
    </ul>
</body>
</html>

    • selector:nth-of-type(n)：匹配符合selector选择器，而且是与它同类型同级的兄弟元素中的第n个元素；selector:nth-last-of-type(n)与它同理；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:nth-of-type(2) {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>me</li>
        <li>brother</li>
        <li>brother</li>
    </ul>
</body>
</html>

注意：上面这个选择器还可以接收参数：odd/event/xn+y（n从0开始）

    • selector:only-of-type：匹配符合selector选择器，而且是与它同类型同级的兄弟元素中的唯一一个元素；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        li:only-of-type {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>me</li>
    </ul>
</body>
</html>

    • selector:empty：匹配符合selector选择器，且内部没有任何子元素的元素；
    • selector:lang()：匹配符合selector选择器，且其内容是指定语言的元素；　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 100px;
        }
        p:lang(zh) {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p lang="en">Hello</p>
    <p lang="zh">我爱中国</p>
</body>
</html>

  • UI元素状态伪类选择器
    • selector:link：匹配符合selector选择器，且未被访问前的元素（通常只能是超链接）；　　
    • selector:visited：匹配符合selector选择器，且已被访问过的元素（通常只能是超链接）；
    • selector:active：匹配符合selector选择器，且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素；
    • selector:hover：匹配符合selector选择器，且处于鼠标悬停状态的元素；
    • selector:focus：匹配符合selector选择器，且已得到焦点的元素；
    • selector:enabled：匹配符合selector选择器，且当前处于可用状态的元素；
    • selector:disabled：匹配符合selector选择器，且当前处于不可用状态的元素；
    • selector:checked：匹配符合slelector选择器，且当前处于选中状态的元素；　
    • selector:default：匹配selector选择器，且页面打开时处于选中状态的元素；
    • selector:indeterminate：匹配selector选择器，且当前选中状态不明确的元素；
    • selector:read-only：匹配selector选择器，且处于只读状态的元素；
    • selector:read-write：匹配selector选择器，且处于读写状态的元素；
    • selector:required：匹配selector选择器，且具有必填要求的元素；
    • selector:optional：匹配slelector选择器，且无必填要求的元素；
    • selector:valid：匹配selector选择器，且能通过输入校验的元素；
    • selector:invalid：匹配slelector选择器，且不能通过输入校验的元素；
    • selector:in-range：匹配selector选择器，且当前处于指定范围内的元素；
    • selector:out-of-range：匹配selector选择器，且当前超出指定范围内的元素；
    • selector::selection：匹配selector选择器中的元素中当前被选中的内容；
  • 其他伪类选择器
    • selector:target：匹配符合selector选择器，且必须是命名锚点目标的元素（当前正在访问的）；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :target {
            background-color: yellow;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <div id="div1">
        我我我
    </div>
    <div id="div2">
        你你你
    </div>
</body>
</html>

    • selector:not(selector2)：匹配符号selector选择器，但不符号selector2选择器的元素；

11、可以为表格增加contentEditable="true"属性，表示单元格可编辑内容；可以为输入框增加readonly属性，表示只读；可以为输入框增加required属性，表示必填；

12、字体、文本相关属性

  • color：用于控制文字颜色；
  • font：复合属性，其属性值顺序为 font-style font-variant font-weight font-size line-height font-family；
  • font-family：用于设置文字的字体，多个字体之间用英文逗号隔开；
  • font-size：用于设置文字字体的大小　　
    • xx-small：最小字体；
    • x-small：较小字体；
    • small：小字体；
    • medium：正常大小的字体，默认值；
    • large：大字体；
    • x-large：较大字体；
    • xx-large：最大字体；
    • larger：相对于父元素中的字体进行相对增大；
    • smaller：相对于父元素中的字体进行相对减少；
    • length：直接值；
  • font-style：用于设置文字风格
    • normal：文字正常
    • italic：斜体
    • oblique：倾斜字体
  • font-weight：用于设置字体粗细程度
    • lighter：细；
    • normal：正常；
    • bold：粗；
    • bolder：更粗；
    • 直接值；
  • text-decoration：用于控制文字是否有修饰线
    • none：无修饰；
    • blink：闪烁；
    • underline：下划线；
    • line-through：中划线；
    • overline：上划线；
  • text-shadow：用于设置文字的阴影效果；该属性的值顺序为 color xoffset yoffset length或者 xoffset yoffset radius color
    • color：阴影的颜色；
    • xoffset：指定阴影在横向上的偏移；
    • yoffset：指定阴影在纵向上的偏移；
    • radius：指定阴影的模糊半径，模糊半径越大，阴影看上去越模糊；　　
  • text-transform：用于设置文字的大小写
    • none：不转换；
    • capitalize：首字母大写；
    • uppercase：全部大写；
    • lowercase：全部小写；
  • line-height：用于设置字体的行高；
  • letter-spacing：用于设置字符之间的间隔；
  • word-spacing：用于设置单词之间的间隔；
  • text-indent：用于设置段落文本的缩进，默认值为0；
  • text-overflow：用于控制溢出文本的处理方法，有两个属性
    • clip：若该元素指定了overflow:hidden属性，那么当元素中文本溢出时，clip只是简单的裁切溢出的文本；
    • ellipsis：若该元素指定了overflow:hidden属性，那么当元素中文本溢出时，ellipsis裁切溢出的文本，并显示溢出的标记（...）；
  • vertical-align：用于设置目标元素里内容的垂直对齐方式，有8个属性
    • auto：对元素的文本内容执行自动对齐；
    • baseline：默认值，将支持valign属性的元素文本内容与基线对齐；
    • sub：将元素的内容与文本下标对齐；
    • super：将元素的内容与文本上标对齐；
    • top：默认值，将支持valign属性的元素的文本内容与元素的顶端对齐；
    • middle：默认值，将支持valign属性的元素的文本内容对齐到元素的中间；
    • bottom：默认值，将支持valign属性的元素的文本内容与元素的底端对齐；
    • length：直接值，指定文本内容相对于基线的偏移距离；
  • text-align：用于设置目标元素中文本的水平对齐方式，有4个属性值
    • left：左对齐；
    • right：右对齐；
    • center：居中对齐；
    • justify：两端对齐；
  • direction：用于设置文本的流入方向，有2个属性值
    • ltr：从左向右；
    • rtl：从右向左
  • white-space：用于设置目标元素对文本内容中空白的处理方式，有6个属性值
    • normal：默认值，浏览器忽略文本中的空白；
    • pre：浏览器保留文本中的所有空白，其行为方式类似于<pre.../>标签
    • nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br../>标签为止
    • pre-wrap：保留空白序列符，但可以正常进行换行
    • pre-line：合并空白符序列，但保留换行符
    • inherit：指定从父元素继承white-space属性的值
  • word-break：用于设置目标元素中文本内容的换行方式，有3个属性值
    • normal：用浏览器的默认规则进行换行，即对于西方文字，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行；
    • keep-all：只能在半角空格、连字符处换行；
    • break-all：允许在单词中间换行；
  • word-wrap：用于设置目标元素中文本内容的换行方式；　　　　　　　　　　　　　　　　　　

13、颜色表示法：有六种方式

  • 用颜色名表示，比如red，但能表示的颜色数量有限；
  • 用十六进制的颜色值表示；
  • 用rgb(r,g,b)函数表示
  • 用hsl(Hue,Saturation,Lightness)函数表示，即用色调、饱和度、亮度控制颜色，其中色调0表示红色，120表示绿色，240表示蓝色；
  • 用rgba(r,g,b,a)函数表示，a参数用于指定颜色的透明度，为0-1之间的数，0代表完全透明；
  • 用hsla(h,s,l,a)函数表示，a参数用于指定颜色的透明度，为0-1之间的数，0代表完全透明；　　

14、设置使用服务器字体，即：若客户端没有安装某种字体，那么将会自动下载该字体；　　

@font-face {
            font-family: name;
            src: local("xxx"),url("xxx") format("xxx");
}

　　format用于指定字体格式，目前仅支持：TrueType格式（对应*.ttf字体文字）、OpenType格式（对应*.otf字体文字），还可以使用font-style、font-weight属性设置字体样式，也可以用local("字体名称")属性来指定优先使用的客户端字体，当字体不存在时才会下载服务器端字体

15、CSS盒模型：内容区与边框区是可见的，外边距区与内容填充区是不可见的；

16、background属性：用于设置对象的背景样式，是一个复合属性，属性值顺序为下

  • background-color：用于设置背景色；
  • background-image：用于设置背景图片；
  • background-repeat：用于设置对象的背景图片是否平铺，有4个属性值
    • repeat：平铺
    • no-repeat：不平埔
    • repeat-x：仅在横向平铺
    • repeat-y：仅在纵向平铺　　　
  • background-attachment：用于设置背景图片是随着对象内容滚动还是固定，有2个属性值
    • scroll：指定背景图片会随着元素里的内容的滚动而滚动，默认值；
    • fixed：背景图片固定，不会随着元素内容滚动而滚动；
  • background-position：用于设置对象的背景图片位置，该属性需要横坐标和纵坐标两个值，如果只指定了一个值，该值对应横坐标，纵坐标将默认为50%；如果指定了两个值，那么第二个值将对应纵坐标；

17、background-clip属性：用于设置背景覆盖的范围，有4个属性值：

  • border-box：指定背景覆盖盒模型的边框区、内填充区、内容区；
  • no-clip：指定背景覆盖盒模型的边框区、内填充区、内容区；
  • padding-box：指定背景覆盖盒模型的内填充区、内容区；　　
  • content-box：指定背景只覆盖盒模型的内容区；　　　　　

 18、background-origin：用于指定背景从哪里覆盖

  • border-box：指定背景从边框区开始覆盖；
  • padding-box：指定背景从内填充区开始覆盖；
  • content-box：指定背景从内容区开始覆盖；

19、background-size属性：用于控制背景图的大小；

20、background-repeat属性：指定背景图的平铺模式，有6个属性值

  • repeat：背景图片将在水平和垂直方向重复；
  • repeat-x：背景图片将在水平方向重复；
  • repeat-y：背景图片将在垂直方向重复；
  • no-repeat：背景图片仅显示一次；
  • space：不调整背景图片的大小，只调整背景图片间距，从而保证了HTML元素内平铺的每个背景图都能完整的显示出来；
  • round：自动调整背景图片的大小，从而保证了HTML元素内平铺的每个背景图都能完整的显示出来；

21、linear-gradient(方向，颜色列表)：渐变函数，方向默认为从上到下，有以下几个值

  • to top：代表从下到上
  • to bottom：代表从上到下，默认值
  • to left：代表从右到左
  • to right：代表从左到右
  • to left top：代表从右下角到左上角
  • to right top：代表从左下角到右上角
  • to left bottom：代表从右上角到左下角
  • to right bottom：代表从左上角到右下角　　　　　　　　　　　　　

 　　对于颜色列表的语法是：颜色1 位置1，颜色2 位置2 ...（位置既可以使用百分比，也可以使用长度值）

　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div {
            height: 400px;
            width: 100px;
            border:1px solid gray;
            background:linear-gradient(to top, #6dffd4 20% , #55ceff 80%);
        }
    </style>
</head>
<body>
     <div></div>
</body>
</html>

 

22、repeating-linear-gradient(方向，颜色列表)，方向与颜色列表同21。

　

 

 

　　

 

　　

 

 

　　

 

posted @ 2019-08-23 17:25  Aion_14  阅读(487)  评论(0)    收藏  举报