css的学习:第一天
1 css的初体验:
1.0
所有与css相关的设置都放在style标签中,style标签是一个双标签,它放在head标签之中,在title标签下面。
2.0结构:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
……
}
总结:css是用来给页面上的结构“穿上衣服”(设置样式)。
2 css相关的属性:
color:设置字体的颜色。
font-size: 设置字体的大小。
background:设置背景颜色。
width:设置宽
3 css(Cascading Style Sheets):层叠样式表
html标签
css 属性
4 与字体相关的属性:
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:是可选属性
5 如何通过浏览器查看页面元素的样式:
1.0在浏览器中右键:查元素。
2.0在开发人员工具中选当前元素的标签:
3.0查看开发人员工作右侧的样式部分:
6 与颜色的赋值:
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:属性值1;
属性名2:属性值2;
…….
}
会将所有的这类标签都加上相同的属性。
2 类选择器:
给要设置的标签添加一个类名:class
例如:<p class=”maike”>麦壳</p>
结构:
.类名(选择器) {
属性名1:属性值1;
属性名2:属性值2;
.......
}
效果:会将所有拥有这个类名的那些标签都加上相同的属性。
3 id选择器:
与类选择基本上相同:
结构:
<style>
#id名(选择器) {
属性名1:属性值1;
属性名2:属性值2;
.......
}
</style>
效果:会将所有拥有这个id名的标签加上相同的属性。
4 id选择器与类选择器之间区别:
类名:相当于是人的姓名。(可以重复)
特点:
1.0一个类名可以设置给多个标签
2.0一个标签可以有多个类名
id名:相当于是身份证号码。(必须唯一)
特点:
1.0只能给一个标签设置这个id名
2.0一个标签只能有一个id名。
**id不是给css使用的,而是javascript来使用的
5id与类名命名的规则:
**命名的取值范围只能是:
0-9,a-z,A-Z,_,-并且不能以数字开头。**
六. 其它选择器:
1 通配符:
代码:
<style>
* {
属性名1:属性值;
....
}
<style>
作用:会将页面上所有的标签都设置这个属性。会去页面上一个一个的遍历页面的标签,然后给他们进行设置(效率低)。
2 并集选择器:
3 交集选择器:
交集选择书写的时候一定要注意:选择器的名称组成中如果有标签名那么标签必须写在最前面。
4 后代选择器:
5 子代选择器:
作用:找到一个标签的直接子元素来设置样式。
七. 注释:
效果:可以将页面上的一段代码让它失去作用。
应用:使用注释将页面的结构标注出来。
:html中的注释。
这个注释不能嵌套。
/**/:css中的注释。
快捷键:不管是html,还是css它们注释的快捷键都是ctrl+/;
八. css样式的三种类型:
1.0嵌套样式
2.0行内样式
3.0外联样式
新建一个文件,后缀叫.css,在这个文件中直接写样式(不需要加上style标签).在另一个页面引用的时候用加上:
<link rel=”stylesheet” href=”外联样式的路径”>