你好啊 小朋友 语法: (1)用style属性将样式嵌入到htm"> Javaweb之CSS引入方式和选择器 - 送吗网

Javaweb之CSS引入方式和选择器

  • 时间:2018-06-17 21:01 作者:烟火式java 来源:烟火式java 阅读:104
  • 扫一扫,手机访问
摘要:小编提醒:本文将代码式诠释css引入方式和选择器,请认真阅读哦css的引入方式和书写规范 (1)内嵌样式 内嵌样式是把css的代码嵌入到html标签中 style="color:red;font-size: 100px;">你好啊 小朋友 语法: (1)用style属性将样式嵌入到htm

小编提醒:本文将代码式诠释css引入方式和选择器,请认真阅读哦

Javaweb之CSS引入方式和选择器

  1. css的引入方式和书写规范
  2. (1)内嵌样式
  3. 内嵌样式是把css的代码嵌入到html标签中
  4. style="color:red;font-size: 100px;">你好啊 小朋友
  • 语法:
  • (1)用style属性将样式嵌入到html标签中
  • (2)属性的写法:属性:属性值
  • (3)多个属性之间用分号;隔开
  • 不建议用
  • (2)内部样式
  • 在head标签中用style标签进行css的引入
  • type="text/css">
  • div{color:red;font-size: 100px;}
  • 语法:
  • (1)用style标签进行css的引入
  • type="text/css">
  • 属性:type:告知浏览器用css解析器去解析
  • (2)属性的写法:属性:属性值
  • (3)多个属性之间用分号;隔开
  • (3)外部样式
  • 将css样式抽取成一个单独css文件 谁去用谁就引使用
  • rel="stylesheet" type="text/css" href="demo1.css"/>
  • 语法:
  • (1)创立css文件 将css属性写在css文件中
  • (2)在head中用link标签进行引入
  • rel="stylesheet" type="text/css" href="css文件地址"/>
  • rel:代表要引入的文件与html的关系
  • type:告知浏览器用css解析器去解析
  • href:css文件地址
  • (3)属性的写法:属性:属性值
  • (4)多个属性之间用分号;隔开
  • (4)@import方式
  • type="text/css">
  • @import url("css地址");
  • link与@import方式的区别:
  • (1)link所有浏览器都支持 import部分低版本IE不支持
  • (2)import方式是等待html加载完毕之后在加载
  • (3)import方式不支持js的动态修改
  • css选择器
  • 1、基本选择器
  • (1)元素选择器
  • 语法:html标签名{css属性}
  • 示例:
  • hello css!!!
  • type="text/css">
  • span{color:red;font-size:100px; }
  • (2)id选择器 id唯一性
  • 语法:#id的值{css属性}
  • 示例:
  • id="div1">hello css1!!!
  • id="div2">hello css2!!!
  • type="text/css">
  • #div1{background-color: red;}
  • #div2{background-color: pink;}
  • (3)class选择器
  • 语法:.class的值{css属性}
  • 示例:
  • class="style1">div1
  • class="style1">div2
  • class="style2">div3
  • type="text/css">
  • .style1{background-color: red}
  • .style2{background-color: pink}
  • ***选择器的优先级:id>class>元素
  • 2、属性选择器
  • 语法:基本选择器[属性=‘属性值’]{css属性}
  • 示例:
  • action="">
  • name: type="text" />
  • pass: type="password" />
  • type="text/css">
  • input[type='text']{background-color: yellow}
  • input[type='password']{background-color: pink}
  • 3、伪元素选择器
  • a标签的伪元素选择器
  • 语法:
  • 静止状态 a:link{css属性}
  • 悬浮状态 a:hover{css属性}
  • 触发状态 a:active{css属性}
  • 完成状态 a:visited{css属性}
  • 示例:
  • href="#">点击我吧
  • type="text/css">
  • a:link{color:blue}
  • a:hover{color:red}
  • a:active{color:yellow}
  • a:visited{color:green}
  • 4、层级选择器
  • 语法:父级选择器 子级选择器 .....
  • 示例:
  • id="d1">
  • class="dd1">
  • span1-1
  • class="dd2">
  • span1-2
  • id="d2">
  • class="dd1">
  • span1-1
  • class="dd2">
  • span1-2
  • type="text/css">
  • #d1 .dd2 span{color:red}
  • 文末,小编感谢你的阅读,期待和你的下次相见哦!

    前几天有私信我要Java的学习资料,我连夜整理了少量有深度的Java教程和参考资料,从入门到高级的都有,文件已经打包好了,正在学习Java的同学能免费下载学习学习。文件下载方式:点击我的头像,关注后私信回复"资料”就可下载。首先把代码撸起来!首先把代码撸起来!首先把代码撸起来!重要的事说三遍,哈哈。 “编程是门手艺活”。什么意思?得练啊。

    Javaweb之CSS引入方式和选择器

    • 全部评论(0)
    最新发布的资讯信息
    【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
    【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
    【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
    【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
    【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
    【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
    【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
    【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
    【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
    【系统环境|服务器应用】JavaScript编译原理与内存管理(2019-06-11 06:33)