• 技术文章 >web前端 >js教程

    Css的分类,属性与选择器

    php中世界最好的语言php中世界最好的语言2018-03-19 13:51:08原创831
    这次给大家带来Css的分类,属性与选择器,使用Css的分类,属性与选择器的注意事项有哪些,下面就是实战案例,一起来看一下。

    Css 层叠样式表 美化页面的小工具

    分类:

      内联 (行内)在标签内部以属性的形式呈现,属性名style

    内嵌 head标签内以标签形式呈现,标签名style

    外部 head标签内 加link标签 引入外部文件 *.css

    大前端零基础入门到就业:进入学习

    <link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />

    link标签

      插入icon图标(加icon图标,路径必须绝对路径)

    <link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>

    icon图标

    选择器:

      用来找元素,将样式用在标签上。

        标签选择器 .p{}

        id选择器 #id{}

        class选择器.class{}

        并列(加逗号)选择器1,选择器2

        父子(加空格)父选择器 子选择器

        *{}全页面

    属性:

      文本:

        text-decoration 文本修饰 (下划线什么的)

        text-indent 缩进

        text-shadow 阴影 1px(水平阴影的位置)1px(垂直) 1px(模糊的距离) # (阴影颜色)

        font-weight字体加粗

        em表一个字大小

      背景:

        background-position: 属性 定义p内图片在p的位置 可以写两个值左右上下

    <head>
        <style>        
            #p{ 
            width:100%;
            height:111px;
            background-image:url();
                background-position:34% 0        }
        </style></head><body>
        <p id="p"></p></body>

    bg-position

        

        background-size 图片大小 等比缩放

        background:颜色 图片 平铺 位置 大小

    总结问题:

      1.text-indent 缩进属性,只能用在块标签上,span之类的行标签不能用

        解决办法:给span加display:inline-block;属性,变为行内块标签。

      2.大p套小p,若父p不设宽高,则他会随着子p的位置移动而改变。

        如margin float属性,写在子p,父p也会移动。

        解决办法:给父p设置边框或定义宽高。

      3.改变<hr/>的颜色

      <hr style="background-color:#ECECEC; border:none; height:1px;" />

      取消边框,设背景色 设高。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    在前端中的html基础知识

    知名的网站前端布局分析

    关于前端的css基本知识

    以上就是Css的分类,属性与选择器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:样式表 css 选择器
    上一篇:HTTP与HTTPs有什么区别 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 带你了解Nodejs中的非阻塞异步IO• Angular学习之详解样式绑定(ngClass和ngStyle)的使用• JavaScript计算属性与监视(侦听)属性的使用• 聊聊基于Node实现单点登录(SSO)的方法• 深入了解Angular(新手入门指南)
    1/1

    PHP中文网