HTML常用于在网页中显示内容，当然，还可以是布局，但是比较不方便，所以，引进了CSS

CSS全称Cascading Style Sheets，中文名：层叠样式表

帮助文档：CSS.chm

作用:布局和美化网页

特点：

  • 和HTML一样，是一种标记语言，可以由浏览器直接执行
  • 大小写不敏感
  • CSS文件是一个文本文件，后缀名为css
  • 嵌套在HTML中使用

Css规则

  • 语法

    • CSS定义由选择器（selector）、属性（property）及属性值（value）组成；
    • 格式：selector{property:value;}
    • 选择器包括
      • 类型选择器：

        • 定义：HTML标签
        • 使用：直接使用标签

　　　　　　　　

定义　　　　　　　　　　　　　　　　　　　　　　　　　　使用

      • class选择器：

        • 定义：标记名.类名 或 .类名
        • 使用：class="类名"
        • 标记名为html标签，“标记名.类名”表示只有使用该标签并class值为该类名时，才使用该选择器；
        • “.类名”表示只要class值为该类名，就会使用该选择器

　　　　　　　　

定义　　　　　　　　　　　　　　　　　　　　　　　　使用

      • id选择器：

        • 定义：标记名#id值 或 #id值
        • 使用：id="id值"
        • 标记名为html标签，“标记名#id值”表示使用该标签并id为该值时，才使用该选择器
        • “#id值”表示只要id为该值，就会使用该选择器
        • 同一页面id值是唯一的（是的，如果同一页面有两个相同的id，样式也能显示出来，但是这样有违逻辑，并且 将来使用js调用id时，会出现混乱）

　　　　　　　　　　　　　　　

定义　　　　　　　　　　　　　　　　　　　　　　　　使用

      • 包含选择器：

        • 多种选择器的层次组合，选择器用空格隔开，各选择器由左到右，为包含关系
        • 定义：各选择器符组合，用空格隔开
        • 使用：各选择器嵌入使用
        • 层数不限，但建议不要太多，影响维护和seo

　　　　　　　　　　　　

定义　　　　　　　　　　　　　　　　　　　　　　使用

      • 群组选择器：

        • 同时定义多个选择器为同一属性
        • 定义：各选择器组合，用","分隔开
        • 使用：各分隔符直接使用

　　　　　　　　　　

定义　　　　　　　　　　　　　　　　　　　　使用

      • 伪元素选择器：

        • 对html元素不同状态的一种定义方式
        • 定义：标签:伪元素
        • 使用：该标签的不同状态使用不同属性

　　　　　　　　

定义　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　使用

    • 属性与属性值用":"分隔开，多个属性值用";"分隔
  • 注释

    • 格式：/*.......*/
  • 长度单位
    • 相对单位（常用）

      • px：像素
      • em：相对于当前对象内文本的字体尺寸
      • %：百分比
    • 绝对单位（不常用）
      • pt：点
      • cm：厘米
      • mm：毫米
  • 颜色单位和URL值
    • 颜色：

      • #rrggbb
      • #rgb
      • rgb(x,x,x)（不常用，浏览器不兼容）
      • rgb(x%,x%,x%)（不常用，浏览器不兼容）
    • URL
      • 表示：url(address)

HTML中使用CSS的方式

  • 内联样式表

    • 直接在标签中使用
    • 使用style属性，嵌入css键值对
    • 使用灵活，但失去了CSS的作用

  • 内嵌样式表

    • 在<head>标签中，使用<style>标签
    • 将要使用的CSS样式写在<style>标签中
    • <style type="text/css">css</style>或者<style>css</style>

  • 外部链接样式表

    • 外部链接css文件，文件中直接输入css内容
    • 优点：
      • 使用外接的css文件，浏览器带有缓存功能，不用每次都下载
      • 多个文件共享
    • 使用<link>标签引入HTML中，格式为<link type="text/css" rel="stylesheet" href="*.css" />

三种格式的优先级，就近原则：内联式>内嵌式>外链式

内联元素与块级元素

  • 内联元素

    • 标签中的内容都在同一行，不会自动换行
    • 不可设置宽和高
  • 块级元素
    • 标签中的内容会自动换行
    • 可设置宽和高

CSS字体属性

  • 多属性写在同一行，用复合属性<font>，顺序必须为 [[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ],<font-size>和<font-family>为必选项。
  • 单属性分开写
    • <font-style>属性：设置字体是否为斜体，默认值为normal；
    • <font-variant>属性：设置字体是否为小型的大写字母，默认值为normal；
    • <font-weight>属性：设置字体粗细，默认值为normal；
    • <font-size>属性：设置字体大小，常用单位为"px"或"%"，默认值为normal；
    • <font-family>属性：设置字体，可设置多种字体，用“,”隔开，浏览器会按顺序检索是否存在该字体以显示，字体名称为中文时，要用单引号引起。默认值根据浏览器选择。
    • <font-stretch>属性：设置字体宽度，默认值为normal；

CSS背景属性

  • 多属性写在一行，使用复合属性<background>，属性值为[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]，其他参数不填时，默认无条件覆盖。
  • 单属性分开写
    • <background-color>：设置背景色，默认为transparent；
    • <background-image>：设置背景图片，用"url()"设置图片路径；
    • <background-repeat>：设置背景图片填充效果，默认为repeat；
    • <background-position>：设置背景图片的填充位置，默认值为"0% 0%"，常用单位"%"和"px"。
      小技巧：可设置一个区域的<weight>和<height>属性，<background-repeat>属性可填充该区域，如作为导航条等；<background-position>属性可分别截取图片一部分，分开现实，减少网页加载时间。

CSS文本属性

  • <letter-spacing>：设置字符间距，允许使用负值，默认值为normal
  • <word-spacing>：设置单词间距，允许使用负值，默认值为normal
  • <text-decoration>：向文本添加修饰，underline下划线，overline上划线，line-through删除线
  • <text-align>：水平对齐方式，centen居中，right右对齐，left左对齐
  • <line-height>：设置对象行高，当行高与区域高度相同，文本垂直居中
  • <text-indent>：设置文本缩进，单位可为em（字符）、px（像素）、%（百分比）
  • <color>：设置字体颜色

CSS边框属性

  • 多属性合并写，使用复合属性<border>，属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
  • <border-left>、<border-right>、<border-top>、<border-bottom>：设置左线、右线、上线、下线的属性，属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
  • 单属性分开写
    • <border-style>：设置边框样式，常用dotted（点状）、dashed（虚线）、solid（单实线）
    • <border-width>：设置边框宽度，不允许为负数，<border-style>属性设为none，本属性失去作用
    • <border-color>：设置边框颜色

CSS列表属性

  • <list-style-type>:设置列表项的标记为预设标记
  • <list-style-image>：设置列表项的标记为自选标记，“url()”设置标记的地址
  • <list-style-position>：设置表项在文本的位置，outside表示标记放置在文本以外，inside表示标记放置在文本以内

DIV+CSS页面布局

  • 优势：
  1. 内容与布局分离
  2. 代码简洁，提高页面浏览速度
  3. 易于维护和修改
  4. 提高搜索引擎对页面的索引效率
  • div和span

    • div：块级元素，会自动换行，能设置宽高
    • span：内联元素，不会自动换行，不能设置宽高

W3C盒子模型

  • maigin：外补白（盒子四边的外延申边距）

    • maigin：可使用1~4个参数来设置外补白大小
    • maigin-top、maigin-right、maigin-bottom、maigin-left：分别设置盒子上、右、下、左外补白大小
  • border：边框
    • border：可使用1~4个参数来设置边框宽度
    • border-top、border-right、border-bottom、border-left：分别设置盒子上、右、下、左边框大小
  • padding：内补白（盒子内容与边框的距离）
    • padding： 可使用1~4个参数设置内补白大小
    • padding-top、padding-right、padding-bottom、padding-left：分别设置盒子上、右、下、左内补白大小

DIV定位

  • position：设置定位方式，参数为static、absolute、relative、fixed

    • absolute：绝对定位，位置相对于文档流，会脱离文档流
    • relative：相对定位，位置相对于自己原来的位置，不会脱离文档流
    • fixed：固定定位，位置相对于浏览器窗口
    • 绑定模式：父层使用"relative"定位，子层使用"absolute"定位，子层将于父层“绑定”，子层的位置不再相对于文档流，而是相对于父层
    • top：盒子与顶部的距离
    • right：盒子与右边的距离
    • bottom：盒子与底部的距离
    • left：盒子与左边的距离
    • z-index:设置层叠顺序，默认以0开始，可为负数
  • text-align：水平对齐方式，centen居中，right右对齐，left左对齐
  • line-height：设置对象行高，当行高与区域高度相同，文本垂直居中
  • float：设置对象为浮动效果
    • 只会水平浮动，不会不会垂直浮动
    • 会脱离文档流
    • 多个对象同时设置为浮动时，各对象并排显示
    • left：左浮动
    • right：右浮动
  • clear：清除浮动
    • right：清除右浮动，对象右边不能存在浮动对象
    • left：清除左浮动，对象左边不能存在浮动对象
    • both：清除两边浮动，对象两边不能存在浮动对象

DIV的显示

  • display：设置元素显示发方式

    • block：以块级元素方式显示
    • inline：以内联元素方式显示
    • none：隐藏该元素，隐藏后，不占用位置
  • visibility：设置嵌套关系的显示
    • inherit：显示属性与父层相同，父显子显，父隐子隐
    • visible：无论父层是否显示，子层依然显示
    • hidden：无论父层是否显示，子层均隐藏且占用位置
  • overflow：内容超出边界时的显示方式
    • auto：自动处理，超出时显示滚动条，未超出则不显示
    • scroll：始终显示滚动条，无论是否超出
    • visible：超出也直接显示，不做处理
    • hidden：超出部分隐藏，不显示滚动条

PHP笔记（CSS篇）的更多相关文章

  1. PHP学习笔记--入门篇

    PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...

  2. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  3. 《深入浅出WPF》笔记——资源篇

    原文:<深入浅出WPF>笔记--资源篇 前面的记录有的地方已经用到了资源,本文就来详细的记录一下WPF中的资源.我们平时的“资源”一词是指“资财之源”,是创造人类社会财富的源泉.在计算机程 ...

  4. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  5. 《javascript权威指南》读书笔记——第二篇

    <javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...

  6. 《javascript权威指南》读书笔记——第一篇

    <javascript权威指南>读书笔记——第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本 ...

  7. 面试题2：BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇

    BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内 ...

  8. BAT及各大互联网公司前端笔试面试题--Html,Css篇

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...

  9. 高质量代码之HTML、CSS篇

    HTML篇 使用语义化标签<strong><fieldset><legend><ul>等等,少用<div><span> 判断网页 ...

  10. PHP学习笔记 - 进阶篇（11）

    PHP学习笔记 - 进阶篇(11) 数据库操作 PHP支持哪些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Syba ...

随机推荐

  1. 【集合框架】JDK1.8源码分析之Comparable && Comparator（九）

    一.前言 在Java集合框架里面,各种集合的操作很大程度上都离不开Comparable和Comparator,虽然它们与集合没有显示的关系,但是它们只有在集合里面的时候才能发挥最大的威力.下面是开始我 ...

  2. Spring-AOP实践 - 统计访问时间

    公司的项目有的页面超级慢,20s以上,不知道用户会不会疯掉,于是老大说这个页面要性能优化.于是,首先就要搞清楚究竟是哪一步耗时太多. 我采用spring aop来统计各个阶段的用时,其中计时器工具为S ...

  3. $\LaTeX$笔记：Section 编号方式(数字、字母、罗马)&计数器计数形式修改

    $\LaTeX$系列根目录: Latex学习笔记-序 IEEE模板中Section的编号是罗马数字,要是改投其他刊物的话可能得用阿拉伯数字,所以可以在导言部分做如下修改(放在导言区宏包调用之后): \ ...

  4. Effective java笔记（十），序列化

    将一个对象编码成字节流称作将该对象「序列化」.相反,从字节流编码中重新构建对象被称作「反序列化」.一旦对象被「序列化」后,它的编码就可以从一台虚拟机传递到另一台虚拟机,或被存储到磁盘上,供以后「反序列 ...

  5. C#使用资源文件的方法

    其实,对于资源文件的使用,说白点就是通过强制类型转换,将资源文件里的数据强行的转换成你需要的(换种方式说,就是你原来存进去什么,就用什么类型拿出来). 主要通过System.Resources.Res ...

  6. Intellij IDEA 导入 eclipese项目之后，中文注释乱码解决方案

    首先,看导入后整个IJ界面: 可以看到注释是乱码,要解决问题就跟我开始做吧,看右下角有个"UTF-8",点一下选择"GBk",选择"Reload&qu ...

  7. Java中随机数的产生方式与原理

    查阅随机数相关资料,特做整理 首先说一下java中产生随机数的几种方式 在j2se中我们可以使用Math.random()方法来产生一个随机数,这个产生的随机数是0-1之间的一个double,我们可以 ...

  8. ERROR LazyInitializationException:19 - failed to lazily initialize a collection of role: com.goodfan.entity.BeanA.beanB, no session or session was closed

    1. 问题, 当使用JSONArray.fromObject(List<BeanA>)时, beanA中含有BeanB的属性beanB时,会报这个错 2. 解决办法: 使用jsonconf ...

  9. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  10. Java子类属性继承父类属性

    public abstract class Parent { String name = "parent"; } public class Son extends Parent{ ...