zoukankan      html  css  js  c++  java
  • 前端之Css

    一、初识Css

    1、概念

    • 用于修饰标签。
    • 使用css选择器需要关注两点:1、选择哪个选择器 2、如何选择需要使用css样式的标签。
    • 在head中添加style标签,在style标签中添加css选择器,就可以将css样式附着到body中的标签上了。

    二、选择器

    1、选择器种类

    (1)id选择器

    • head中使用#号定位,在body中的div标签添加id属性,head中写入对应id属性的值,即可将css样式定位到标签上。 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--样式标签-->
        <style>
            /*id选择器*/
            #div1{
                background-color: red;
            }
        </style>
    </head>
    <body>
    
        <div id="div1">我是个人</div>
    </body>
    </html>

    (2)class选择器

    • head中使用英文.号定位,在body中的div标签添加class属性,head中写入对应class属性的值,即可将css样式定位到标签上。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="c1">我是绿色</div>
    </body>
    </html>

    (3)标签选择器

    • head中使用标签名div定位,在body中写入标签内容,head中写入对应div标签的值,即可将css样式定位到标签上。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>lrx</div>
    </body>
    </html>

    (4)标签层级选择器

    • head中使用标签名div里面的span标签定位,在body中写入标签内容,head中写入对应span标签的值,即可将css样式定位到标签上。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div span{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            <span>123</span>
        </div>
    </body>
    </html>

    (5)属性选择器

    • 在body里面的div标签中加入自定义属性,然后head中通过使用标签名div加中括号,中括号中写全自定义属性名和值的方式,将css样式与标签进行关联。
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div[abc="哈哈哈"]{
                background-color: burlywood; 
            }
        </style>
    </head>
    <body>
        <div abc="哈哈哈">哦哦哦</div>
    </body>
    </html>

     

  • 相关阅读:
    WPF简单的分页控件实现
    WPF常用样式总结
    树:重建二叉树
    从尾到头打印链表
    字符串替换空格
    二维数组中的查找
    C#中转换运算符explicit、implicit、operator、volatile研究
    泛型实现常用算法
    .NET架构师知识普及
    .NET中扩展方法和Enumerable(System.Linq)
  • 原文地址:https://www.cnblogs.com/brf-test/p/12003776.html
Copyright © 2011-2022 走看看