Javaweb04——CSS

最新推荐文章于 2023-04-04 16:28:50 发布

D70

最新推荐文章于 2023-04-04 16:28:50 发布

阅读量99

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/m0_56384168/article/details/116457076

版权

CSS HTML标签样式属性选择器前端开发

关键词由CSDN通过智能技术生成

Javaweb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS编程语言

一 介绍
    1是一种专门在浏览器编译执行的语言
    2定位html标签并对定位的html标签中【样式属性】进行统一管理
二 HTML标签属性分类
    1基本属性
        大多数html标签都拥有属性
        比如 id属性 相当于身份证编号 用于区分HTML标签
        <input type="text" id="one">
        <input type="text" id="two">
        比如 name属性 相当于一个群组的名字
        <input type="text" id="one" name="myText">
        <input type="text" id="two" name="myText">
    2样式属性
        是一个非常庞大的群体 通知浏览器将HTML标签中的数据以指定形态展示
        <div style="background-color:red;color:green;font-size:50">我是前端工程师最爱的div</div>
    3工作状态属性
        只存在于【表单域标签中】 表示【表单域标签】的状态
        checked：存在于radio与checkbox中表示标签是否被选中
        disabled：表示当前标签处于不可用状态
        readOnly：表示标签处于只读状态
        selected：存在于option标签表示标签是否被选中
    4监听属性
        监听属性 用户与html标签之间通信的通道 用于监听用户在何时对当前标签进行何种操作
        当指定的的操作产生时 监听属性将会通知浏览器调用对应的JavaScript方法
三 样式属性开发难度
    1大量HTML标签要有相同样式的设置 导致重复性工作很多
    2用户修改需求时 进行大量维护工作
四 CSS编程语言作用
    1通知浏览器 满足定位条件的HTML标签进行统一定位
    2通知浏览器对已经定位的HTML标签的样式属性进行统一管理
五 CSS选择器
    1介绍
        实际上就是定位条件 用于定位HTML标签
        CSS选择器有九个大的分类
    2语法格式
        <html>
            <head>
                <style type="text/css">
                    定位条件 {
                        "样式属性1":"值1";
                        "样式属性2":"值2";
                    }
                </style>
            </head>
        </html>
六 ID选择器
    1介绍
        根据HTML标签中的id属性进行定位
        <style type="text/css">
                    #id编号 {
                        "样式属性1":"值1";
                        "样式属性2":"值2";
                    }
        </style>
七 标签类型选择器
    1介绍
        根据标签类型进行定位
    2语法
        <style type="text/css">
                    标签类型名 {
                        "样式属性1":"值1";
                        "样式属性2":"值2";
                    }
        </style>
八 层级选择器
    1HTML标签之间的关系
        父子关系
        兄弟关系
        td是tr的子标签 两个td是兄弟关系
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    2介绍
        根据父子关系 兄弟关系进行定位
    3简单的层级选择器
        <style type="text/css">
                    定位父标签条件 定位子标签条件 {
                        "样式属性1":"值1";
                        "样式属性2":"值2";
                    }
        </style>
九 自定义选择器
    1介绍
        一组HTML标签没有相同特征则可使用自定义选择器 将自定义选择器绑定到对应标签上
    2语法
        <style type="text/css">
                    .自定义选择器名 {
                        "样式属性1":"值1";
                        "样式属性2":"值2";
                    }
        </style>
        <div class="自定义选择器名称"></div>