CSS学习笔记1：基础、复合选择器

CSS - Cascading Style Sheets

实现结构（HTML）与样式（CSS）的分离

1. 分类

行内式（内联式）：

使用频率：偶尔使用，当局部样式跟整体样式不同的时候使用

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; "> 内容

行内式例子

内部样式表

用于相同页面处理相同风格的标签

一般定义在head中

外部样式表（外链式）

用于多个页面显示相同风格的标签

在head中使用link标签

type可以省略

2. CSS基础选择器（选择器分类）

2.1 标签选择器*

见上面，都是标签选择器，修改标签的属性。

PS：只能使用已有的标签来作为标签选择器

2.2 类选择器*

head用'.'声明，标签中用'class'调用

.类名{

    属性1:属性值1;

    属性2:属性值2

}

标签中使用属性class="类名"即可

类选择可以选择一个或多个标签

例1

例2.1 google案例

例2.2 google案例  

例2.3 google案例显示结果

2.3 多类名选择器

用于同一个标签实现2个样式类的效果，例如一个类定义字体颜色，一个类定义字体大小

head用'.'声明，标签中用'class'调用

.类名1{

    属性1:属性值1;

    属性2:属性值2

}

.类名2{

    属性1:属性值1;

    属性2:属性值2

}

标签中使用属性class="类名1 类名2"即可

PS：

如果2个类中有同样的样式，则按样式定义的顺序，后来居上（与调用时的顺序无关，只看样式的定义顺序选择最后一个类的冲突的属性）

例3.1

例3.2

例3.1和3.2中无论googleBlue在前还是googleRed在前，G都显示红色，因为在例2.1中.gooleRed是后定义的

2.4 id选择器*

定义和使用方法和类选择器非常类似

head用'#'声明，标签中用'id'调用

#id名1{

    属性1:属性值1;

    属性2:属性值2

}

#id名2{

    属性1:属性值1;

    属性2:属性值2

}

标签中使用属性id="id名1 id名2"即可

例4.1 id选择器定义

例4.2 id选择器调用

2.5 id选择器和类选择器区别

理论上id选择器和类选择的定义和使用区别不大。

但是，规范上类选择器可以被重复使用，id选择器只能使用一次。

例4中我们虽然重复使用了id选择器（例如id2、id3）没有出错，是因为google浏览器兼容性比较好（也许未来所有浏览器都能做到兼容性），但是应该避免违反规范的使用

2.6 通配符选择器*

将所有标签都选择了，应该避免使用，常用于设置页面整体的字体

3. CSS字体样式属性

3.1 font-size

单位一般只使用px和em， px最常用

现在普遍使用14~16px为页面的font-size，而且尽量使用偶数

旧版本页面一般字体都很小，因为分辨率很高

3.2 font-family

一般中文网站常用字体有：宋体、微软雅黑、Arial。但最好使用系统默认字体

如果有些浏览器不支持某些字体，可以多定义几个字体，字体间间用逗号',' 隔开。字体选择顺序就是定义的顺序，如果定义的字体都没有，就选择系统默认字体

字体不是一个单词的需要加双引号，字体是一个单词则不用加双引号。例如：font-family:"Times New Roman", Arial

有些页面样式中定义了unicode字体，只需要查表就知道使用的是什么字体：

unicode字体表

3.3 font-weight字体加粗

查询CSS手册

HTML是使用b或者strong标签，而CSS可通过样式实现加粗效果

设置字体粗细时，建议用数字

3.4 font-style：字体风格

查表，略

*4. 字体连写

字体连写语法：

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

顺序是严格的，不能更换顺序，各个属性以空格隔开！

其中不需要隔开的可以省略（省略的将会取默认值），但必须保留font-size和font-family属性，否则font选择器将不起作用

个人不建议使用，除非加上注释，否则代码可读性不好

一般连写只是选择size和family就够了：font: 25px "宋体"

5. CCS外观属性

5.1 color文本颜色

查CSS颜色表

1. 预定义颜色值：red、green、blue、yellow......

2. 十六进制：如#ff0000 #00ff00 #0000ff等（常用）

可简写为            #f00     #0f0      #00f

                            红         绿        蓝

#fd0a00则不能简写

可使用FSCapture软件获取颜色的十六进制值

3. RGB表示   rgb(255,0,0) rgb(100%,0%,0%)

5.2 line-height行高

一般建议比font-size大7，8个像素

5.3 text-align:水平对齐

默认左对齐 left

在CSS中没有垂直对齐方式

5.4 text-indent首行缩进

例：段落首行缩进2个字

text-indent: 2em;

1em是一个字的距离

5.5 文本装饰text-decoration

查表

属性有：none underline blink overline line-through

*5.6 总结HTML样式标签 和 CSS样式属性

6. CSS复合选择器

面试笔试常见

6.1 后代选择器 与 子代选择器

使用较少

6.1.1 后代选择器（包含选择器）

又称为包含选择器

例1：只希望修改test5、test6的样式

定义一个样式，test5和test6实际上都是div中的p

例2：在修改了div里的p的基础上，修改test6的效果

例3：常用场景：ul里的li，ol里的li

6.1.2 子代选择器

看一个例子即可：

只希望1级菜单改变样式

如果使用后代选择器，ul li a{color: red} 这样的话2级菜单也会改变颜色

使用子代选择器语法，实现只有子代才能改变样式

6.1.3 后代、子代选择器对比

都是选择后代

后代选择器是选择所有后代，子代选择器只能选择亲儿子

子代使用较少，后代使用较多

*6.2 交集选择器 与 并集选择器

6.2.1 交集选择器

使用较少，特殊情况使用

需求：只希望交集选择器3改变样式。可以使用类选择器

‘交集选择器3、6’ 改变样式

使用类选择器实现

使用交集选择器后，只会将交集选择器3改变样式

使用交集选择器样式，只会让交集选择器3改变样式

*6.2.2 并集选择器

需求：希望将并集选择器1，3，5改变样式

使用并集选择器

语义：将div、span、a都改样式

6.3 符合选择器总结

7. 链接伪类选择器

伪类选择器用于向某些选择器添加特殊效果。比如给链接添加特殊效果，例如鼠标移上去改变颜色

语法：

为了和类选择器相区别，类选择器是一个点.className

伪类选择器使用2个点:link等

链接伪类选择器：

:link        -未访问的链接

:visited    -已访问过的链接

:hover    -鼠标移动到链接上

:active    -鼠标选定的链接，点击但未松开

链接伪类选择器例子

PS：

lvha的顺序非常重要！！！

可以用LoVe HAte两个单词来记忆

PS2:

实际开发中的应用：

1. 如果是文章链接，可以走上面标准流程

*2. 如果是淘宝的导航栏，则需要省略link/visited/active，只需要定义a和a:hover样式因为访问过，样式不需要改变，见下例：

导航栏效果的做法

8. 6和7综合练习（面试题）

例题

需求：在不该body里代码的情况下

1. 登录链接为红色，主导航栏里所有链接为蓝色

2. 主导航栏和侧导航栏里面文字都是14px 且是 微软雅黑

3. 主导航栏里面的一级菜单链接文字颜色为绿色