欢迎使用优快云-markdown编辑器

css的学习：第一天

１ css的初体验：
1.0
所有与css相关的设置都放在style标签中，style标签是一个双标签，它放在head标签之中，在title标签下面。

2.0结构：

选择器 ｛
属性名1：属性值1;
属性名2：属性值2;
……
｝

总结：css是用来给页面上的结构“穿上衣服”（设置样式）。
２ css相关的属性：

color:设置字体的颜色。
font-size: 设置字体的大小。
background:设置背景颜色。
width:设置宽

３ css（Cascading Style Sheets）：层叠样式表
html标签
css 属性

４ 与字体相关的属性：
font-size（字体的大小）:
font-weight（字体的粗细）:可以设置具体的数值：是整百的数100-900还可以设置一些关键字：
bold:加粗
normal:正常
font-family（字体的类型）:
font-style（字体的样式）:
字体的连写形式：
font: font-style font-weight font-size font-family;
注意： font-style与font-weight:是可选属性

５ 如何通过浏览器查看页面元素的样式：

1.0在浏览器中右键:查元素。
2.0在开发人员工具中选当前元素的标签：
3.0查看开发人员工作右侧的样式部分：

６ 与颜色的赋值：
color:属性的取值可以是：
1.0具体的颜色的英文单词
yellow,pink,red。
2.0使用十六进制颜色表示法：

**#000000=>#000**
**#003300=>#030**

3.0 rgb表示法：

rgb(100,100,100);

4.0 rgba表示法：

rgba(100,100,100,1);

五. 简单选择器

１ 标签选择器：

标签名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
…….
}

会将所有的这类标签都加上相同的属性。

２ 类选择器：
给要设置的标签添加一个类名：class
例如：<p class=”maike”>麦壳</p>
结构：

.类名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
.......
}

效果：会将所有拥有这个类名的那些标签都加上相同的属性。
３ id选择器：
与类选择基本上相同：
结构：

<style>
#id名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
.......
}
</style>

效果：会将所有拥有这个id名的标签加上相同的属性。

４ id选择器与类选择器之间区别：
类名：相当于是人的姓名。（可以重复）
特点：
1.0一个类名可以设置给多个标签
2.0一个标签可以有多个类名
id名：相当于是身份证号码。（必须唯一）
特点：
1.0只能给一个标签设置这个id名
2.0一个标签只能有一个id名。
**id不是给css使用的，而是javascript来使用的

５id与类名命名的规则：

**命名的取值范围只能是：
0-9,a-z,A-Z,_,-并且不能以数字开头。**

六. 其它选择器：
１ 通配符：

代码：
<style>
* {
属性名1：属性值;
....
                }
<style>

作用：会将页面上所有的标签都设置这个属性。会去页面上一个一个的遍历页面的标签，然后给他们进行设置（效率低）。

２ 并集选择器：

３ 交集选择器：

交集选择书写的时候一定要注意：选择器的名称组成中如果有标签名那么标签必须写在最前面。
４ 后代选择器：

５ 子代选择器：
作用：找到一个标签的直接子元素来设置样式。

七. 注释：
效果：可以将页面上的一段代码让它失去作用。
应用：使用注释将页面的结构标注出来。
:html中的注释。
这个注释不能嵌套。
/**/:css中的注释。
快捷键：不管是html,还是css它们注释的快捷键都是ctrl+/;

八. css样式的三种类型：
1.0嵌套样式

2.0行内样式

3.0外联样式
新建一个文件，后缀叫.css，在这个文件中直接写样式（不需要加上style标签）.在另一个页面引用的时候用加上：

<link rel=”stylesheet” href=”外联样式的路径”>