CSS-II

Posted on Views:

Emmet语法

快速生成html结构语法

用途 语法
生成标签 输入标签名直接按tab键
多个相同标签 div*3
父子级 ul>li
并列 div+p
生成带有类名的 .nav（默认生成div，如果想要p，则p.nav）
生成带有id名的 #id
类名有一定顺序 .demo$*5（$是自增符号）
生成的标签中含有内容 div{哈哈哈}

快速生成CSS样式语法

首字母缩写即可，想要text-align:center，直接tac+tab

CSS复合选择器

由基础选择器组合而成

后代选择器（重要）

又称为包含选择器，可以选择指定父元素中的所有子元素（各个级别的嵌套都可以选出来），适用于ol,ul列表。写法：ol li{}中间用空格隔开，表示嵌套。除了用标签选择器，任意基础选择器都可以组合

扩展：可以有多层嵌套，那就可以多层选择：元素1 元素2 元素3{}选出来的是最后一个 元素3

子选择器

写法：元素1>元素2{}选择元素1最近一级的子元素

1
2
3
4
<div>
    <a href="#">儿子</a>
    <p><a href="#">孙子</a></p>
</div>

如果想要选出第一个a标签，用div a是不可以的，孙子也算是后代，所有这里就需要子选择器

并集选择器

写法：元素1,元素2{}同时选择，定义相同的样式，通常用于集体声明。注意：这里的元素不止基础选择器，复合选择器也可以！

伪类选择器

向标签添加特殊的效果

链接伪类

写法：a:~

  • a:link：选择所有未被访问的链接
  • a:visited：选出已访问过的链接
  • a:hover：选择鼠标指针位于其上的链接
  • a:active：选择活动链接（鼠标按下未弹起）

注意：

  1. 为了确保生效，必须按照LVHA的顺序进行声明
  2. 实际开发中一般只需要先给a指定，再给a:hover指定就行，其余的不需要

focus伪类

用于选取获得焦点的表单元素，比如点击输入框时，整个边框变个颜色，写法：input:focus

结构伪类

CSS的元素显示模式

HTML元素一般分为块元素和行内元素（内联元素）两种类型

块元素独占一行，如div,h1~h6,p,ul,ol,li，特点：

  1. 高度、宽度、内外边距都可以控制
  2. 宽度默认是容器（父级宽度）的100%
  3. 是一个容器/盒子，里面可以放其他行内元素或块元素（除了p,h1~6这种文字类的元素里面不能放块级元素）

行内元素一行可以有多个，如span,a,em,i,del，特点：

  1. 高、宽的直接设置是无效的（可以通过转换模式间接设置），默认宽度就是其本身内容的宽度
  2. 行内元素只能容纳纯文本或其他行内元素
  3. 连接内不能再放链接，特殊情况a里面可以放跨级元素，同时把a转换为块级元素更安全

还有另一种是行内块元素，同时具有块元素和行内元素的特点，如img,input,td，特点：

  1. 一行可以显示多个，但是中间会有空白缝隙（行内元素特点）
  2. 默认宽度为本身内容宽度（行内元素特点）
  3. 高度、宽度、内外边距可以控制（块元素特点）

元素模式的转换

把行内元素转化为块元素，这样就可以设置其高度和宽度，应用：增加a的触发范围。写法：在a的样式表中display:block;

把块元素转化为行内元素，使其在一行内显示，写法：display:inline;（用的较少

转化为行内块元素，写法：display:inline-block

CSS背景样式

背景颜色

background-color，默认值为transparent透明，也可以手动指定背景颜色为透明

背景颜色的不透明度：background:rgba，a是alpha的缩写，取值为0~1，0.3可以简写为.3，注意：是指盒子背景色半透明，而盒子里面的内容不受影响

背景图片

background-image:url();（一定不要落下url）默认值为none，实际开发中常见于logo、一些装饰性的小图片或是背景图片，相较于img标签插入图片，优点是便于控制位置

通过background-position:x y其中x,y坐标可以用方位名词或者精确单位

参数 值
方位名词 top bottom left right center
精确单位 ~px 百分数
  1. 方位名词

  • 如果两个值都为方位名词，则前后顺序无关，top left和left top效果一致

  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认为居中对齐

  1. 精确单位
  • 要按照x y的顺序来，比如20px 50px，都是相对于左上角点的距离
  • 如果只指定一个数值，那么一定是x的值，y的垂直居中
  1. 混合单位

一定要按顺序说明，如center 20px

背景平铺

background-repeat，四个取值

repeat no-repeat repeat-x repeat-y
铺满盒子 不平铺 沿x轴平铺，横向铺满盒子 沿y轴平铺

背景图像固定

background-attachment用来制作视差滚动效果，两个取值

scroll fixed
图像随对象内容滚动 图像固定

背景复合写法

像font一样，可以节约代码，没有特定的书写顺序，约定俗成的顺序为：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置这是在实际开发中更提倡的写法

CSS三大特性

层叠性

当遇到样式冲突问题时，遵循的原则：就近原则，后来者居上，执行顺序自上而下

继承性

子标签会继承父标签的某些样式，如文本颜色和色号。在检查页面中，会提示Inherited from...目的在于简化代码

行高的继承性

1
2
3
4
5
6
body{
    font:12px/1.5 "Microsoft YaHei";
}
div{
    font-size:14px;
}

1.5表示1.5倍行高，最美观舒适的行高是字体的1.5~2倍，此时div的行高为21。这样写的好处：子元素可以根据自身文字大小自动调整行高

优先级

当同一个元素指定多个选择器，就会有优先级的产生

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

小技巧

  1. 想让盒子内的文字垂直居中，直接设置line-height即可，甚至不用设置height，因为行高=文字高度+上间距+下间距。如果设置了height：当行高小于盒子高度，文字会偏上；行高大于盒子高度，文字会偏下。因为设置了height，盒子就不会被撑大

不想学了，用处不大，该学专业课了