重点记忆:四种结合方式 三种基本选择器
  1.CSS:层叠样式表
  相当于皮肤
  提高了可维护性、样式与内容分离(注释格式/* */)

  2.CSS与HTML结合的四种方式:内联式、嵌入式、外部式
   1.每个标签上都有一个style【属性】来控制 sytle="key:value;key:value" <div style="">
  2.使用style标签:<style type="text/css">div{key:value}</style>写在头部
  3.在style标签里面使用语句,与2类似对比 【兼容性差】
  @import url{css文件路径};
  4.使用link头标签引入外部文件<link rel="stylesheet" type="text/css" href="" />分离了【推荐】
  

  CSS的优先级:由上到下、由外到内优先级增高(就近原则)

  3. CSS的选择器:要对哪个标签里的样式进行操作
  三种基本选择器
    1.标签选择器:使用标签名称作为选择器名称(上2处)
    2.类选择器【最常用】:每个HTML标签都有一个class属性,使用这个值作为选择器。
    使用方法:div.haha{} .haha{}(所有class值为haha的)
    3.id选择器【给js留的】:每个HTML标签都有一个id属性,使用这个值作为选择器。
    使用方法:div#haha{} #haha{}(所有id值为haha的)
    基本选择器的优先级:(内联的就近的style最高)>id>class>标签

  不同点:

    1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,
    ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
    2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式
    但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
    <span class="stress bigsize">可以给两个同时设置。

  三种扩展选择器
  1.关联选择器:可以设置嵌套标签里的样式
  如:<div><p></p></div> 设置p标签的样式 div p{}
  .food>li .first span
  总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
  2.组合选择器:把不同的标签设置成相同的样式
  如:<div></div> <p></p> 设置相同的样式 div,p{}
  3.伪元素选择器:提供了一些定义好的样式【作了解】
  更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签设置样式
  比如超链接(lv ha):
  状态:原始状态 悬停状态 点击状态 点击之后
  :link :hover :active :visited
  a:hover{color:red;}
  样式操作 在头部style中 a:link{} a:hover{}

  4.CSS盒子模型 (现在主流为div+css组成)
  在讲解CSS布局之前,我们需要提前知道一些知识,
  在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素和内联块状元素。
  重要概念 边框:border (设置上下左右 border-top border-bottom border-left border-right)
  属性:width(即粗细) style(样式) color
  内边距:padding(div中文本内容距离边框的值)(四个方向同上)
  属性:length
  外边距:margin(div距外部的距离)其它亦同上
  还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)
  设置上下左右四个方向的边距是按照顺时针方向设置的(不单独设置的时候的默认顺序)
  5.CSS的布局的漂浮【作了解,用的少】
  float
  两个属性值:left 文本流流向对象【右边】(自己居左,后边div居右) right 流向【左边】
  6.CSS的布局的定位
  position
  两个属性值:absolute :将对象从文档流中拖出(在上面飘着,后面补上),再使用上下左右定位
  relative :对象不可重叠(不会拖出),依旧使用上下左右定位
  7.案例:图文混排 图片签名

JavaWeb基础—CSS学习小结的更多相关文章

  1. JavaWeb基础—XML学习小结

    一.概述 是什么? 指可扩展标记语言 能干什么? 传输和存储数据 怎么干? 需要自行定义标签. XML 独立于硬件.软件以及应用程序 通常.建立完xml文件后首要的任务是:引入约束文件! 二.XML简 ...

  2. JavaWeb基础—JS学习小结

    JavaScript是一种运行在浏览器中的解释型的编程语言 推荐:菜鸟教程一.简介js:javascript是基于对象[哪些基本对象呢]和和事件驱动[哪些主要事件呢]的语言,应用在客户端(注意与面向对 ...

  3. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  4. CSS学习小结

    接触了B/S的东西之后才发现自己须要学习的东西太多了.html.xml.JavaScript.jquery.HTMLdom.VBScript.ajax.jquery.json等等技术都是须要我们一一研 ...

  5. JavaWeb基础—MySQL入门小结

    一.数据库概述 RDBMS:关系型数据库管理系统 == 管理员(manager)+仓库(database) 常见数据库:  Oracle(神喻):甲骨文 MySQL: 归于甲骨文旗下(高版本系统已经开 ...

  6. 题解 P3870 【[TJOI2009]开关】/基础分块学习小结

    直接进入正题: 分块: 分块分块,就是把一个长串东西,分为许多块,这样,我们就可以在操作一个区间的时候,对于在区间里面完整的块,直接操作块,不完整的直接操作即可,因为不完整,再加上一个块本身就不大,复 ...

  7. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  8. JavaWeb基础: 学习大纲

    JavaWeb基础: Web应用和Web服务器 JavaWeb基础: Tomcat JavaWeb基础:HTTP协议和基于Restful的架构 JavaWeb基础: Web工程配置文件 JavaWeb ...

  9. 学习nodejs部分基础内容入门小结

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 的包管理器 n ...

随机推荐

  1. 五、vue常用UI组件

    下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...

  2. pjax 和 ajax 的区别

    pjax 是一个 jQuery 插件,它通过 ajax 和 pushState 技术提供了极速的(无刷新 ajax 加载)浏览体验,并且保持了真实的地址.网页标题,浏览器的后退(前进)按钮也可以正常使 ...

  3. 转 Ubuntu Linux 环境变量PATH设置

    Ubuntu Linux系统环境变量配置文件: /etc/profile : 在登录时,操作系统定制用户环境时使用的第一个文件 ,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...

  4. JAVA 判断字符长度

    /** * 判断姓名字符长度 * 字符串为空返回0:有中文返回中文字符数:无中文返回2 * @param CustomerSn * @return */ private Integer getName ...

  5. poj_3275 Ranking the cows

    Ranking the cows Description Each of Farmer John's N cows (1 ≤ N ≤ 1,000) produces milk at a differe ...

  6. Orcal数据库,使用EF的自增处理

    1.定义EF拦截器,截获执行命令前的操作.修改执行sql.还需要定义orcal序列,供自增使用 using System; using System.Collections.Generic; usin ...

  7. django使用LDAP验证

    1.安装Python-LDAP(python_ldap-2.4.25-cp27-none-win_amd64.whl)pip install python_ldap-2.4.25-cp27-none- ...

  8. Linux查看系统当前字符集

    常用的命令展示 参考当前环境的字符集 方法一: cat /etc/sysconfig/i18n [ssh客户端工具最好也是utf-8,保持一致] 方法二:echo $LANG 设置当前环境的字符集 方 ...

  9. Sublime Text3 使用总结

    一.简介: Sublime Text 3是一款强大而精巧的文本编辑器 [点击下载].它的界面友好.功能非凡.性能极佳可令代码高亮.语法提示.自动完成更重要的是,它支持众多插件扩展——锦上添花.强之又强 ...

  10. 【ASP.NET】#001 获取服务器IP

    客户端ip: Request.ServerVariables.Get("Remote_Addr").ToString(); 客户端主机名: Request.ServerVariab ...