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

Javaweb之CSS引入方式和选择器

  • 时间:2018-06-17 21:01 作者:烟火式java 来源:烟火式java 阅读:151
  • 扫一扫,手机访问
摘要:小编提醒:本文将代码式诠释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)
    最新发布的资讯信息
    【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
    【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
    【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
    【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
    【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
    【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
    【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
    【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
    【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
    【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)