CSS3 自学笔记（一）

HTML只关注内容的语义，做样式时非常繁琐且不美观。

CSS（Cascading Style Sheets）称为CSS样式表或级联样式表，主要用于设置HTML页面中文本内容，段落设置，版面布局等。

让HTML专注于结构呈现，样式交给CSS，实现结构和样式的相分离。

一. CSS语法规范

        CSS规则由两个主要部分构成：选择器以及一条或多条声明       

        属性和属性值之间以键值对形式存在，并且用冒号分隔，一定要加分号！

p {
    color: red;
    font-size: 12px;
}

二. CSS代码风格：不强制规范，只是方便开发

        1. 样式格式书写

                （1）紧凑型：一串 （2）展开型：如上代码

        2. 样式大小写风格：小写字母，特殊情况除外

        3. 样式空格风格：属性值前面，冒号后面保留一个空格；选择器和大括号之间保留空格

三. CSS基础选择器

        分为：基础选择器，复合选择器。

        基础选择器：标签选择器，类选择器，id选择器和通配符选择器

        1. 标签选择器：将HTML标签名作为选择器

标签 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

        不能设计差异化样式，只能统一设置。

        2. 类选择器：单独选择其中的一个或某几个标签

.red（类名）{
    属性1: 属性值1;
    ...
}

<p class="red">yes</p>

        多类名：一个标签由多个名字。多个类名中必须要用空格隔开。

        3. id选择器

#id名 {
    属性1: 属性值1;
    ...
}
#nav {
    color: red;
}

        id选择器：样式通过#定义，结构id调用，只能调用一次，别人无法使用。

        类选择器像人名，可以多次使用；id选择器像身份证号，唯一的。

        4. 通配符选择器

        用*定义，选取页面中所有标签。

* {
    属性1: 属性值1;
    ...
}

 四. CSS字体属性

        CSS Fonts

        1. 字体系列：font-family

p {
    font-family: '微软雅黑';
}
div {
    font-family: 'Microsoft Yahei', Arial;
}
//多个字体的兼容性好，如果第一个没有，就找第二个，以此类推，找不到就用系统默认字体。

        2. 字体大小：font-size: 20px;  px 为像素

        可以给body指定整个页面文字的大小，其中标题的大小需要特定指定。

        3. 字体粗细：

        font-weight: normal/bold/bolder/lighter/number(number后不需要跟单位）

        number=700为加粗。number=400为正常。

        4. 文字样式：font-style

        normal：正常值；italic：斜体值。

        5. 复合属性：

body {
    //font: font-style font-weight font-size/line-height font-family;
    font: italic 700 16px 'Microsoft yahei';
}
//不能随意换位置

        不需要设置的属性可以省略，但必须保留size和family的，不然font不起作用。

五. CSS文本属性

        颜色，对齐文本，装饰文本，文本缩进，行间距等。

        1. 颜色：color 

        2. 对齐文本：text-align: center 水平居中对齐。

div {
    text-align: center;
}
//可以为left,right,center

        3. 装饰文本：text-decoration 下划线，删除线，上划线

div {
    text-decoration: underline;
}
//none, overline, line-through

        4. 文本缩进：text-indent 段落首行缩进

        em是一个相对单位，就是当前元素一个文字的大小。

p {
    text-indent: 2em;
}

        5. 行间距：line-height 单位也为px

六. CSS的引入方式

        1. CSS的三种样式表：行内样式表，内部样式表（嵌入式），外部样式表（链接式）

        2. 内部样式表：放在HTML页面的style标签里，理论上可以放在任何地方，但一般放在head标签中，可以控制整个页面的样式。代码结构清晰，结构与样式相分离，但没完全分离。

        3. 行内样式表：在行内操作。适合简单样式修改。

<p style="color: pink;">...</p>

        4. 外部样式表：单独写到CSS文件中，再引入CSS文件到HTML页面中使用。

        新建一个后缀名为.css的样式文件，将css样式放入。        

        在HTML页面中，使用link标签引入文件。

<link rel="stylesheet href="css文件路径">

七. Chrome调试工具