当前位置: 首页 > news >正文

javaweb_CSS

# css引入方式

1:内嵌方式    <div style="color:red;font-size:100px;">JavaWeb</div>    // 不建议使用 不便于后期的维护

2:内部样式,css代码较多时,会影响加载速度
<head>
    <style type="text/css">
        div{
            background:red;
            text:10p;
        }
    </style>
</head>

3:链入外部样式,开发中非常建议使用
创建文件testcss.css
在文件中编写css内容
dic{
    color:green;
    text:10p;
}
在html文件中引入 
<link rel="stylesheet" type="text/css" href="testcss.css"/>

4:import链入外部样式(有些浏览器不支持)不支持javascripty动态修改
<style type="text/css">
    @import url("testcss.css");
</style>

 # css中的选择器

1:元素选择器
    <style type="text/css">
        span{
            text:10p;
        }
    </style>

2:id选择器(不可重复)
    <style type="text/css">
        #id1{
            background:red;
            text:10p;
        }
    </style>    
    <div id="id1">id选择器</div>

3:class选择器(可重复)
    <style type="text/css">
        .c1{
            background:red;
            text:10p;
        }
    </style>    
    <div class="c1">id选择器</div>

4:属性选择器
    <style type="text/css">
        input[type="text"]{
            background:red;
            text:10p;
        }
    </style>    
    <table>
        <tr>
            <th>用户名:</th>
            <th>
                <input type="text">
            </th>
        </tr>
        <tr>
            <th>密码:</th>
            <th>
                <input type="password">
            </th>
        </tr>
    </table>

5:伪元素选择器
    <style type="text/css">
        a:link{clolr:red}             // 静止
        a:hover{clolr:blue}           // 悬浮
        a:active{clolr:green}         // 触发
        a:visited{clolr:yellow}       // 完成
    </style>

6:层级选择器
    <style type="text/css">
        #div1 .d1 span{
            background:red;
            text:10p;
        }
    </style>
  <div id="div1">
      <div class="d1">
          <span>xxx<span>
      </div>
      <div class="d2">
          <span>xxx</span>
      </div>  
  </div>

待完成

 

转载于:https://www.cnblogs.com/Doaoao/p/10592007.html

相关文章:

  • sam哥其实是个安静的美男子...
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • 经典面试题1
  • JAVA学习路线 零基础新手必备
  • Flask+jinja2 开发Puppet用户和节点管理系统
  • 痞子衡嵌入式:如果i.MX RT是一匹悍马,征服它时别忘了用马镫MCUBootUtility
  • 武汉大学2014年基础数学复试试题参考解答
  • chown: changing ownership of `.': Invalid argument
  • 面试题:数组原型上实现一个去重的方法
  • ×××案例之一路由之间的×××
  • Spring Framework 5.2.0.M1 发布
  • [詹兴致矩阵论习题参考解答]习题2.5
  • BF-9000 BMC任务关键型应急通信系统
  • appium如何切换键盘
  • 关于ios 8 7 下的模态窗口大小的控制 代碼+場景(mainstoryboard)( Resizing UIModalPresentationFormSheet )...
  • 自己简单写的 事件订阅机制
  • [译] React v16.8: 含有Hooks的版本
  • 0基础学习移动端适配
  • docker容器内的网络抓包
  • es6要点
  • leetcode98. Validate Binary Search Tree
  • maya建模与骨骼动画快速实现人工鱼
  • Protobuf3语言指南
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 模型微调
  • 那些年我们用过的显示性能指标
  • 使用Swoole加速Laravel(正式环境中)
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • UI设计初学者应该如何入门?
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • 组复制官方翻译九、Group Replication Technical Details
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (webRTC、RecordRTC):navigator.mediaDevices undefined
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)http-server应用
  • (转)大型网站架构演变和知识体系
  • *++p:p先自+,然后*p,最终为3 ++*p:先*p,即arr[0]=1,然后再++,最终为2 *p++:值为arr[0],即1,该语句执行完毕后,p指向arr[1]
  • .gitattributes 文件
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .net Stream篇(六)
  • .net 发送邮件
  • .NET连接数据库方式
  • .NET使用存储过程实现对数据库的增删改查
  • .net中调用windows performance记录性能信息