一、css简介

  1、层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用

  2、css作用

    (1)修饰html
    (2)替代了标签自身的颜色,字号等属性,提高复用性
    (3)html内容与样式分离,便于后期维护

  3、css引入方式

    (1)内嵌样式

    <div style="color:red;font-size:100">内嵌方式</div>

    (2)内部样式(写在head中)

    <style type="text/css">

      div{color:red;font-size:100}

      input{color:red;font-size:100}

    </style>

    (3)web全局样式

      1.创建css文件

      2.键入:div{color:red;font-size:200px}

      3.引入该css文件

        <link ref="stylesheet" href="cssDemo.css" type="text/css">

    (4)@import方式

      基本不用,原因迟滞于html加载css,不支持js动态修改,部分低ie版本不支持

    小结:

      style:告知浏览器使用css去解析

      ref:css和html的关系

      引入写在head中

      内部样式也写在head中

二、css选择器

  1、基本选择器

    (1)、标签/元素选择器

      <style>
        div{color:red;font-size:10px}
      </style>

    (2)、id选择器

      <style>
        #div1{color:red;font-size:10px}
      </style>
      <div id="div1">id选择器</div>

    (3)、class选择器

      <style>
        .style1{color:red;font-size:10px}
        .style2{color:pink;font-size:10px}
      </style>
  
      <div class="style1">id选择器1</div>
      <div class="style1">id选择器2</div>
      <div class="style2">id选择器3</div>
  优先级总结:id选择器>类选择器>标签选择器

  2、属性选择器

    <style>
      input[type='text']{background-color:green}
      input[type='password']{background-color:yellow}
    </style>
    <form>
      name<input type="text" value=""/>
      password<input type="password" value=""/>
    </form>

  3、a标签伪元素选择器

    语法:鼠标放到链接上有四种状态

    静止状态 a:link{css属性}
    悬浮状态 a:hover{css属性}
    点击状态 a:active{css属性}
    释放状态 a:visited{css属性}

    <style type="text/css">
      a:link{background-color:white}
      a:hover{background-color:pink}
      a:active{background-color:red}
      a:visited{background-color:green}
    </style>
    <a href="#">hit me</a>

  4、层叠选择器

    语法:适用于div嵌套,给其中指定的元素修饰

    <style>
      #div1 .div1class span{color:red;font-size:100px}
      .body2 .div2class span{color:pink;font-size:50px}
    </style>

三、css属性

  1、文字属性

    font-size:字体大小

    font-family:字体类型

  2、文本属性

    color:颜色

    text-decoration:下划线

      属性值:none/underline

    text-align:对齐方式

      属性值:left/right/center

  3、背景属性
    background-color:背景颜色
    background-image:背景图片
    background-repeat:平铺方式
    属性值:repeat-x/repeat-y/repeat
  4、列表属性
    list-style-type
      属性值很多,用时查
    可以在li前面加图片,效果很棒
    格式:list-style-image:url("xxx.gif");
  5、尺寸属性
    width:宽
    height:高
  6、显示属性
    display
      属性值:none/inline
    <style type="text/css">
      span{display:none;color:red}
    </style>
    <script type="text/javascript">
      function deal(){
        document.getElementById("span").style.display="inline";
      }
    </script>
    <form>
      username<input type="text" value="">
      <span id="span">对不起您的输入有误!</span><br>
      password<input type="password" value=""><br>
      <input id="btn" type="button" value="button" onclick="deal()">
    </form>
  7、浮动属性
    float:
      属性值:
        left:向左浮
        right:向右浮动
    clear:
      属性值:
        left:清除左浮动
        right:清除右浮动
        both:左右均清除
    <style type="text/css">
      #div1{background-color:red;width:50px;height:60px;float:left}
      #div2{background-color:green;width:50px;height:60px;float:left}
      #div3{background-color:pink;width:50px;height:60px;float:left}
    </style>
    <div id="div1"></div>
    <div id="div2"></div>

    <div id="div3"></div>

  8、盒子模型

  查资料

css层叠样式初学的更多相关文章

  1. CSS层叠样式选择器归纳

     常用选择器 1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...

  2. css层叠样式优先级总结

    虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...

  3. CSS层叠样式

    为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...

  4. 学习前端第二天之css层叠样式

    一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体    ( 可直接跟 ...

  5. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  6. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  7. CSS层叠

    前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...

  8. CSS层叠和继承

    CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...

  9. css层叠规则,优先级算法

    前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...

随机推荐

  1. CSS 选择器参考手册

    CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) ...

  2. Pandas系列之入门篇——HDF5

    Pandas系列之入门篇--HDF5 简介 HDF5(层次性数据格式)作用于大数据存储,其高效的压缩方式节约了不少硬盘空间,同时也给查询效率带来了一定的影响, 压缩效率越高,查询效率越低.pandas ...

  3. 1022: [SHOI2008]小约翰的游戏John【Nim博弈,新生必做的水题】

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2709  Solved: 1726[Submit] ...

  4. HDU 1069 Monkey and Banana(DP——最大递减子序列)

    题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=1069 题意描述: 给n块砖,给出其长,宽和高 问将这n块砖,怎样叠放使得满足以下条件使得 ...

  5. 有用的linux命令笔记

    date cal [month] [year] bc 计算器 mkdir -p /home/bird/ 连续建立文件夹 mkdir -m 711 test2 创建文件夹是的权限 mv -i 询问是非覆 ...

  6. dede list列表页和文章页分别使用if else

    标签: dede 2015-01-25 19:33 755人阅读 评论(0) 收藏 举报 分类: [ Dede ](20) 版权声明:本文为博主原创文章,未经博主允许不得转载. list列表页中使用i ...

  7. vue前后台数据交互vue-resource文档

    地址:https://segmentfault.com/a/1190000007087934 Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通 ...

  8. JAR包介绍大全用途作用详解JAVA

    jta.jar 标准JTA API必要commons-collections.jar 集合类 必要antlr.jar  ANother Tool for Language Recognition 必要 ...

  9. J.U.C FutureTask之源码解析

    通过直接继承Thread, 实现Runnable接口来创建线程.但这两种方式都有一种缺陷:在执行完任务之后无法获得执行结果. 如果需要获得执行结果,就必须通过共享变量或者使用线程通信的方式来达到效果, ...

  10. 频繁更换ip会影响SEO优化吗?

    网站更换ip会不影响SEO的效果,其实网站更换ip是正常的(但不能频繁更换),搜索引擎抓取是根据网站的域名进行的,不是根据ip来抓取你的网站.在短时间内更换IP对SEO的效果并没有很大的影响. 如果是 ...