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

Javaweb之CSS引入方式和选择器

  • 时间:2018-06-17 21:01 作者:烟火式java 来源:烟火式java 阅读:70
  • 扫一扫,手机访问
摘要:小编提醒:本文将代码式诠释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)
    最新发布的资讯信息
    【系统环境|服务器应用】PHP和Python实战bcrypt算法(2019-02-01 20:47)
    【系统环境|服务器应用】PostgreSQL数据库安装Version10.5(2019-02-01 20:47)
    【系统环境|服务器应用】Notepad++快速选中多行(2019-02-01 20:47)
    【系统环境|服务器应用】Clover支持目录多标签页(2019-02-01 20:47)
    【系统环境|服务器应用】计算机视觉 OpenCV Android | Mat像素操作(2019-02-01 20:46)
    【系统环境|服务器应用】PHP | 运算符 知识梳理与运用实例(2019-02-01 20:46)
    【系统环境|服务器应用】人工智能通识-数学-零基础矩阵运算(2019-02-01 20:46)
    【系统环境|服务器应用】Android-打包AAR步骤以及最为关键的注意事项!(2019-02-01 20:46)
    【系统环境|服务器应用】回转寿司你肯定吃过!——Android消息机制(构造)(2019-02-01 20:46)
    【系统环境|服务器应用】Android中不规则形状View的布局实现(2019-02-01 20:46)