初识css

CSS

css初识

html局限性

• 满足不了设计者需求
• 操作html属性不方便
• 里面添加样式臃肿繁琐

层叠（级联）样式表

也是一种标记语言

• 设置版面布局和外观显示样式

使html从样式中脱离，实现了html专注去做结构呈现，样式交给css。即结构样式相分离

网页丰富多彩，布局更加灵活

引入css样式表（书写位置）

行内式（内联式）

• <标签名 style=“属性1:属性值1; 属性2:属性值2;”>内容</标签名>

• style其实就是标签的属性，属性:值; 多组属性; 隔开

• 只能控制当前的标签和以及嵌套在其中的子标签，造成代码冗余

• 缺点：没有实现样式和结构相分离

  • 控制一个标签

内部（嵌）样式表

• 将css代码集中写在HTML文档的head头部标签中，并用style定义

• type="text/css"在html5中可以省略

• 只能控制当前页面，没有彻底分离

外部样式表（外链式）

• 将所有样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到html文档中

• css文件与HTML文件建立联系

• • 需要放在head标签中，并且得指定link标签的属性

• rel=“stylesheet”

  • 被链接的文档是一个样式表文件

• type=“text/css”

  • 定义所链接文档类型

• href=“url”

  • 定义所连接外部样式表文件的url，可以相对路径，也可以绝对路径

• 完全实现结构样式相分离，控制整个站点，但需要link引入

css选择器

作用：找到网页中的特定元素，即选择出想要的标签

• 设置这些标签的样式

css基础选择器

• 标签选择器

  • 选择某类标签的全部

    • 以html的标签名称作为选择器

  • 优点：快速为页面中同类型的标签统一样式

    • 缺点：不能设计差异化样式

  • 标签选择器，页面同选起，直接写标签，全部不放弃

• 类选择器

  • .类名{属性1:属性值1;…}

  • 对元素对象定义单独或相同的样式，可以选择一个或多个标签

    • 不能用标签作为类名

  • 差异化选择，样式点定义，结构类调用，一个或多个，开发最常用

  • 多类名选择器

    • 一个标签内部只能有一个class

    • 类选择器（名字），id选择器（身份证号）。在同一个页面中，允许相同名字的class，不允许有相同名字的id对象出现

    • 可以生效，浏览器兼容

      • 不规范

• id选择器

  • #类名{属性1:属性值1;…}

    • #定义

  • • id调用

• 通配符选择器

  • • {属性1:属性值1;…}
  • • 选择所有标签
    • 会匹配页面所有元素，降低页面响应速度，不建议随便使用

  • 不需要调用，自动使用样式

    • 常用于清除所有元素的内外边距

复合选择器

• 选择器，即选择的标签
• 看左图

css字体样式属性调试工具

font字体

• font-size:字体大小

  • 不同浏览器默认的文字大小不同，明确值

  • 100px;

    • 一定加单位

      • 一般加给body

  • 标题标签比较特殊，需特殊指定像素大小

  • 在谷歌下css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px

• font-family:字体

  • 可以同时指定多个字体，中间英文逗号隔开，不支持第一个字体就会尝试下一个，都没则默认

  • 中文字体加英文引号，英文字体一般不加，英文字体位于中文字体前，若字体名包含空格等特殊字符，加引号

  • arial不区分大小写

    • 一般加给body

  • unicode字体

    • 宋体\5b8b\4f53
    • 微软雅黑\5fae\8f6f\96c5\9ed1
    • 加引号

• font-weight:字体粗细

  • 无语义

    • normal

      • bold

  • 100-900整百，400=normal，700=bold。没有单位！

• font-style:字体风格

  • normal正常

    • italic斜体

• font: italic 700 20px “微软雅黑”;

  • font属性，综合写法，不能换顺序，各属性空格隔开。不需设置可省略，但size family必须有

  • 选择器 { font: font-style font-weight font-size/line-height font-family;}

  • sws/lf

    • 妻子

css外观属性

• color:文本颜色

  • 预定义

  • 十六进制

    • #000000黑色；#ffffff白色；#ff0000红色；

    • 析取

      • 工具FastStone Capture
      • snipaste f1 shift c

  • rgb代码

• line-height:行间距

  • 单位px像素用的最多

    • line-height:1.2; 用倍数 1.5

  • 上间距、下间距、文本高度

• text-align:文本水平对齐方式

  • 盒子里面内容对齐

    • left、center、right

  • 给图片添加，需要给他的父亲p标签添加，不可以直接添加到img上

• text-indent:首行缩进

  • 相对单位 当前标签单位

    • text-indent:2em;

• text-decoration:文本的装饰

  • none默认，取消下划线，最常用

    • underline下划线
      • line-through贯穿线
      • overline上划线

sublime快捷操作emmet语法

• div tab

  • div*3 tab

• 父子级关系 ul>li

  • 兄弟级关系 div+p

    • 综合 dl>dt+dd*3

• .demo 生成带类名

  • #two 生成带id名

• 自增符号 $ div{$}*5

  • .demo$*5

css复合选择器

目标：理解应用场景

• 应用：用后代、并集选择器给元素添加样式，使用伪类选择器

  • 由两个或多个基础选择器，不同组合形成

分类

• 后代选择器

  • .nav a{ }

    • 元素1 元素2 { 元素声明 }
    • 父级 子级{属性1:属性值1;…}

  • 当标签发生嵌套时，内层时外层的后代

    • 他能选择任何包含在内的标签
    • 后代选择器能选择它的子孙后代
    • 任意基础选择器的组合

  • 符号 空格

• 子元素选择器

  • div>strong{属性1:属性值1}

    • 只选亲儿子元素，不包含孙子 重孙子元素

      • 符号 >

    • 选择离他最近的标签

• 交集选择器

  • 既又关系

    • p.red {}

      • 类名为 .red 的段落标签

        • 没有符号

• 并集选择器

  • 声明样式相同

    • 选择多组标签

  • , 和的意思，通常用于集体声明

    • p, span{}

      • 符号 逗号

• 链接伪类选择器

  • :link{}

    • 用冒号

      • lvha顺序，不要颠倒

        • 交集选择器的变种

        • 链接需要单独指定样式，给父亲写没有用。浏览器有默认样式。一般写一个大 a统一样式，没有下划线

        • a{}

        • .nav a:hover{rolor:red;}

          • 鼠标放到nav里面的链接才会变色

      • lv包包hao

    • a:link

      • 未访问的链接

    • a:visited

      • 已访问的链接

    • a:hover

      • 鼠标移动到链接上

    • a:active

      • 选定的链接

        • 按下鼠标不松开

• :focus伪类选择器

  • 选取获得焦点的表单元素

  • input表单元素才能获取

    • input:focus

标签显示模式

标签的三种模式

• 特点区别

  • 三种显示模式的相互转化

块元素

• 常见块元素h、p、div、ul、ol、li

• 独占一行

  • 宽高内外边距可以控制

    • 宽度默认时容器（父级宽度）的100%

      • 是容器、盒子，里面可以放任何标签

• 只有文字才能组成段落，p里面不能放块级元素

  • 同理 h文字类块级标签不能放其他块级元素

行内元素（内联元素）

• 常见的行内元素a、strong、b、em、i、del、ins、span、u、s

• 相邻行内元素在一行，一行可以显示多个

  • 宽高直接设置无效

    • 默认宽度就是它本身的宽度

      • 行内元素只能容纳把文本或其他行内元素

• 链接里面不能再放链接

  • 特殊情况a里面可以放块级元素，但给a转换一下块级模式最安全

行内块元素

• 常见标签img、input、td

• 可以设置宽高内外边距和对齐属性

  • 相邻行内元素在一行，但有空白缝隙，一行可以显示多个

    • 默认宽度就是它本身的宽度

• 块和行内元素的特点都有

标签显示模式转换display

• 块转行内 display:inline;

  • 行内转块display:block;

    • 块、行内元素转换为行内块:display:inline-block;

行高

文字垂直居中

• 行高和高度的三种关系

  • 理解为什么行高等于高度单行文字会垂直居中

    • 实现

      • 会测量行高

顶线

• 中线

  • 基线

    • 底线

基线到基线的距离为行高

行高=上距离+内容高度+下距离

• 上距离总是=下距离

行高等于盒子高度 文字垂直居中

• 行高大于高度 文字偏下

  • 行高小于高度 文字偏上

css背景

背景颜色color

• background-color:颜色值;

  • 默认值 transparent 透明的

背景图片image

• background-image:url(images/liu.jpg);

  • 必须加url,url 不要加引号
  • 默认 none 无背景图

背景平铺 repeat

• background-repeat:repeat|no-repeat|repeat-x|repeat-y

  • 默认 repeat

背景位置position

• background-position: length||length

  • length

    • 百分数|由浮点数字和单位标识符组成的长度值

• background-position:position||position

  • position

    • top|center|bottom|left|center|right 方位名词

• 必须先指定bgi属性

• position后面是x坐标或y坐标，可以使用方位名词或者精确单位

• 如果只指定了一个方位名词，另一个值默认居中，为50%

• 如果只指定了一个数值，那该数值用于x坐标，另一个默认y坐标，默认居中对齐

• 如果指定两个值，两个值都是方位名词，则两个值前后顺序无关，比如left、top与top、left效果一致

  • 常用bgp：center top

• 如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值时y坐标

背景附着

• 操作对象是 背景图像——滚动/固定

  • background-attachment:scroll|fixed

背景简写

• 类似font的模式

  • 顺序推荐，可省略

• background：color、url 、repeat、attachment、position

背景透明（css3）

• background:rgba(0,0,0,.3)

• 参数alpha 透明度 取值范围0~1之间

  • 低于ie9版本不支持
  • 背景半透明是指盒子背景半透明，盒子内容不受影响

CSS三大特性

说出css样式冲突采取的原则

• 哪些常见样式有继承性

  • 写出css优先级算法

    • 计算常见选择器的叠加值

层叠性

• 样式冲突 就近原则，不冲突就不层叠

  • 相同选择器，相同属性 实质是覆盖

继承性

• 子承父业

  • text-、font-、line-、color能继承

优先级

• 选择器相同——层叠性

  • 选择器不同——选择器权重

• 计算公式

  • 继承或*通配符 0，0，0，0

  • 标签选择器 0，0，0，1

  • （伪类）类选择器 0，0，1，0

  • id选择器 0，1，0，0

  • style=“”;行内样式表 1，0，0，0

  • 每个!important 无穷大 在属性值后添加

    • specificity四位数，四个级别，值从左到右，左边最大，依次减小。数位之间没有进制，级别之间不可超越。

  • 不同选择器选择了同一个标签

• 权重叠加

  • div ul li 0，0，0，3

    • .nav ul li 0，0，1，2

      • a:hover 0，0，1，1

        • .nav a 0，0，1，1

  • 继承的权重是0

    • 看孩子有没有被选中

      • 未选中 权重是0
      • 选中，计算权重

XMind: ZEN - Trial Version