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

    css样式:
    <!-- 内联样式:在元素的style属性内写样式 -->
    <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!</h2>
    <!-- 内部样式:在head内部的style标签里写样式 -->
    <style type="text/css" >
    /*css的注释是这样的*/
    h2{color: blue;}
    </style>
    <!-- 外部样式:在独立的css文件内写样式href是css文件的路径 -->
    <link rel="stylesheet" href="my.css"/>
    css样式规则:
    1.继承性,父元素(字体,颜色)的某些样式可以被子元素继承
    2.层叠性:给一个元素增加不同的声明,效果会叠加
    3.优先级:给一个元素增加相同的声明,效果以后者为准,也叫就近原则.
    css类选择器:
    /*1.元素选择器*/
    /*2.类选择器:根据class属性选择一类元素*/
    .female{color: pink;}
    /*3.id选择器:根据ID属性选择唯一的元素*/
    #where{color: lime;font-size: 20px;}
    /*4.选择器组:写出一组选择器,可以选中其中每个选择器对应的并集*/
    .female,#where{font-weight: bold;}
    /*5.派生选择器:*/
    /* 1)选择某元素的子孙*/
    #p5 b {color: orange;}
    /* 2)选择某元素的儿子*/
    #p5>b{font-size: 100px;}
    p a{font-size: 50px;}
    /*6.伪类选择器:选择某状态下的元素*/
    /*1)选择未访问过的超链接*/
    a:LINK {color:green;}
    /*2)选择已经访问过的超链接*/
    a:VISITED {color: red;}
    /*3)选择激活态的按钮*/
    .btn:ACTIVE {background: red;}
    /*4)选择有焦点的框*/
    .txt:FOCUS{background-color: yellow;}
    /*5)选择悬停状态*/
    .btn:HOVER {color: gray; 50px;}
    img:HOVER{ 250px;height: 250px;}
    css之边框--border:
    /*1.给标题单边边框*/
    h1{border-left: 15px solid blue;border-right: 15px solid red;border-bottom: 15px solid yellow;border-top: 15px solid green;}
    /*2.给段落四边同时加边框*/
    p{border: 1px dashed red; auto;height: 60px;overflow: auto;}
    day03
    /*1.四边设置相同的边距*/
    #d1{padding: 20px;margin: 40px;}
    /*2.四边设置不同的边距--顺序是上右下左*/
    #d2{padding: 10px 20px 30px 40px;margin: 10px 20px 30px 40px;}
    /*3.单边设置边距*/
    #d3{padding-top: 20px;margin-left: 30px;}
    /*4.对称设置边距 -- 上下 空格后左右*/
    #d4{padding: 20px 40px;margin: 50px 70px;}
    /*5.对称设置的一个特例:当左右外边距设置为auto时,元素会水平居中*/
    #d5{margin: 20px auto;}

    我是初学者,如有更新不好的,欢迎这位大神指出,谢谢大家!

    更多精彩以后更新,转载注明!

  • 相关阅读:
    pycharm快捷键、常用设置、包管理
    【转载】TCP socket心跳包示例程序
    【转载】C++定时器实现
    金龙一卡通登陆爬取数据 免验证码 多线程 学生卡 CAUC
    python3 正方教务系统 爬取数据
    29、Python之Web框架Django入门
    28、Python之前端组件学习
    27、Python之jQuery基础
    26、Python之JavaScript进阶篇
    25、Python之JavaScript基础
  • 原文地址:https://www.cnblogs.com/CaiNiao-TuFei/p/7633498.html
Copyright © 2011-2022 走看看