7.HMTL7

1. CSS : cascading style sheet(层叠 样式 表)

  • HTML标签，指定元素， CSS让标签更美， javascript: 可动
  • 能写在哪？？
    • 外部引入 css文件 用 link标签
    • 内部样式： 用style标签
    • 内联样式： 标签的style属性上
    <!-- 外部样式 -->
    <link type="text/css" rel="stylesheet" href="test1.css" />
    <style>
        /* 内部样式 */
        div:hover {
            width: 0px;height: 0px;border-width: 10px;border-style: solid;border-color: transparent transparent black    transparent ;
        }
        div {
            width: 0px;height: 0px;border-width: 10px;border-style: solid;border-color:black transparent transparent  transparent ;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- 内联样式 -->
    <p style="color:red">hello world</p>
    <h1>hello world</h1>
</body>

2. 选择器：

	选择符{属性：属性值；属性：属性值；}

2.1 元素选择器;元素 {样式}； 权重1

2.2 类选择器：class ； 权重10

  • class定义用.

    .abc {样式} .a2{样式}

  • 用的时候写在标签的class属性上

     <div class="abc a2"></div>

2.3 ID选择器： #id； 权重100

  • 定义是用#id

    #a1 {样式}

  • 使用的时候用id属性：

    <div id="a1"

2.4 * 所有元素：基本不用

2.5. 空格表示父子关系（派生）

E F： F是E的子就可以

E>F: F是E的一级子元素

2.6. 逗号， 并列的关系

    <style>
        div {
            color :red;
        }
        div > p, abc > p {
            color: green;
        }
    </style>
</head>
<body>
    
    <div>
        555
        <p>
            33
            <span>
                hello world
            </span>
            44
        </p>
        666
        <abc>
            dklfakl
            <p>hello world</p>
        </abc>
    </div>
</body>

2.7 + 同辈相邻的弟弟css3

        h1 + p{
            color:yellow;
        }
※ h1的同辈，且相邻，且弟弟

2.8 属性选择器用【】

  • [属性=值]： 常用name选择器
  • [属性*=值]： 包含值
  • [属性^=值]： 以值开头
  • [属性$=值]：以值结尾
        [a2='a3'] {
            font-weight: bold;
        }
        /* 属性过滤name */
        [name='ename'],[name='empno'] {
            background-color: red;;
        }
        /* 包含3 */
        [a2*='3'] {
            font-size: 2em;
        }      
         /* 以a开头 */ 
        [a2^='a']  {
            color: blue;
        }
        /* 以4结尾的 */ 
        [a2$='4']  {
            border:1px solid black;
        }
        /* 空格split的包含 */
        [a2~='c5'] {
            font-style: italic;
        }

3 伪类：

3.1 ： nth系列：

  • first-child: 第一个子。如果不是第一个子就失效
  • nth-of-type(n); 第几个子元素
  • nth-of-child(n): 第几个子元素是
    <style>
        li:first-child {
            text-decoration: line-through;
        }
        li:last-child {
            text-indent: 4em;
        }
        div.a2:first-child {
            /* 不是第一个孩子无效 */
            color: red;
        }
        div.a2:nth-child(3) {
            /* 第几个是.a2的 */
            color: red;
        }
        div.a2:nth-of-type(3) {
            /* 第几个.a2 */
            color: green;
        }
    </style>

3.2： 一堆

:link/ visited/ active/ before/after/ hover/

4. CSS样式：定位：

定位一般都是和left/right/top/bottom连用

  • fixed: 固定定位。广告跟着滚动条走。
    • 文档流中清除位置。相对与整个窗体定位
posted @ 2021-08-17 12:30  剑心空明  阅读(5)  评论(0)  编辑  收藏  举报  来源