day01_CSS基础

2018-03-07 本文已影响0人 Threejs开发者

一、 CSS的书写位置

CSS(Cascading Style Sheets) 层叠样式表,主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

1.1 行内样式

格式：

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

示例：

<div style="color: red; font-size: 12px;">我爱我的祖国</div>

注意：

style其实就是标签的属性
属性和值中间是冒号。
多组属性值之间用分号隔开。

1.2 内部样式

格式：

<head>
<style type="text/CSS">
    选择器 { 
      属性1:属性值1;
      属性2:属性值2; 
      属性3:属性值3;
    }
</style>
</head>

示例：

<style>
     div {
        color: red;
        font-size: 12px;
     }
</style>

注意

style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。

1.3 外部样式

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

二、CSS选择器的种类

css的语法如下：

选择器 {
    属性名1: 值1;
    属性名2: 值2;
    ...
    }

选择器的作用：
CSS确定修饰的标签。
选择器的种类：
这里选择器可以是标签名、ID、类名、通配符,下面分别介绍。

2.1 标签选择器

标签名,选中要修饰的内容。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

示例：

<style>
    /* 给段落的字体设置为红色 */
    p {
      color: red;
    }
</style>

2.2 类选择器

“.”+类名，选中要修饰的类。
示例1 单类名:

<style>
    /* 给class="red"的类设置为红色 */
    .red {
      color: red;
    }
</style>
...
<p class="red">我爱祖国</p>

示例2 多类名:

<style>
    /* 给class="red"的类设置为红色 */
    .red {
      color: red;
    }
    /* 给class="center"的类设置为居中 */
    .center {
      text-align: center;
    }
</style>
...
<p class="red center">我爱祖国</p>

2.3 ID选择器

“#” + id,选中修饰的id,间接选中标签。
示例：

<style>
    /* 给id="123"的id设置为红色 */
    #123 {
      color: red;
    }
</style>
...
<p id="123">我爱祖国</p>

** 注意：**

类名相当于身份证的名字,可以出现重名。
id相当于身份证号的身份证号,全局唯一。

2.4 通配符选择器

"*"符号应用于所有标签。
示例：

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如div	不能差异化选择	较多	div { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择全部的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

总结:

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如div	不能差异化选择	较多	div { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择全部的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

三、字体样式

详细参考《Cascading Style Sheet 2.0中文手册》

属性名称	属性值	属性描述
font-size	px(像素)	字体大小
font-family	微软雅黑	字体
font-weight	400(正常字体粗细)	字体粗细
font-style	normal(取消斜体)	字体风格
color	RGB的十六进制	字体颜色
line-height	像素值	行间距
text-align	center(居中)	水平对齐方式
text-indent	em字符数量	首行缩进
text-decoration	none、underline、overline、line-through	线的穿过方式

这里列举几个常用的字体属性。

属性名称	属性值	属性描述
font-size	px(像素)	字体大小
font-family	微软雅黑	字体
font-weight	400(正常字体粗细)	字体粗细
font-style	normal(取消斜体)	字体风格
color	RGB的十六进制	字体颜色
line-height	像素值	行间距
text-align	center(居中)	水平对齐方式
text-indent	em字符数量	首行缩进
text-decoration	none、underline、overline、line-through	线的穿过方式

四、开发者工具(chrome)

功能：

查看标签对应的样式。
根据警告信息(有三角形的警告)，查找出错的行位置。
在线调试字体大小或者颜色,辅助调试。