原创力文档
第 PAGE \* MERGEFORMAT
第 PAGE \* MERGEFORMAT 15 页
Css基础入门
第1天课堂笔记（本课程共6天）
第一天内容
Css初识：
Css的存放位置：放在title标签下面
所有的样式都放在同一个标签中：style/style
在标签中放入对应的样式。
了解css
Css:cascading style sheets层叠样式表。
作用：用来给页面添加样式的（给人穿衣服，化妆）。
代码：（放在title下面）
style type=”text/css”
选择器 {
属性名1： 属性值1;
属性名2： 属性值2;
。。。
}
/style
type的含义，用来申明style标签只能用来存放css格式的文本。
一个属性名加一个属性值，一般我们称作键值对。
特点：css中跟html一样也对空格，换行，缩进不敏感
使用开发人员工具查看元素的样式：
css注释.
作用：加入对代码的描述。
代码：
/* 注释代码 */
快捷键:ctrl+/;
请说出下面哪个是html中的注释
工具的使用：
与文本相关的那些属性：
Font-size:设置文本的大小。
Font-style:文本的样式
Italic:倾斜
Normal:正常的
Font-family:字体的格式
取值范围就是下拉菜单中的内容。
Font-weight:文本的粗细。
取值：
如果是数值：100-900（都是整百）
如果是关键字：
bold:加粗
bolder:比加粗更粗
lighter：细线
字体属性的连写：
格式
font: font-style font-weight font-size font-family;
注意：
这些属性中有两个属性是必写的font-size和font-family其它可选，注意不管怎么写，font-size font-family必须处于最后两个属性。
width,height,background
与颜色相关的内容：
Color:
注意：没有font-color属性。
赋值：
1.0使用具体的颜色来赋值：
Color: red;
Color: blue;
Color: yellow;
2.0十六进制表示法：
Color: #ff8400;
Color:#00CC33;
3.0rgb表示法：
rgb(0,0,0);(第一个对应的是红，第二个是绿，第三个是蓝)
注意：每个的取值是0-255;
4.0rgba表示法。
选择器：
标签选择器：
作用：根据指定的标签名给对应标签的元素设置样式。
代码：
style type=”text/css”
标签名 { 属性名1：属性值1
属性名2：属性值2
。。。。。
}
/style
缺点：只能给某一种标签的元素设置属性。
Class(类)选择器：
作用：根据类名来给对应的标签设置样式
代码：
style type=”text/css”
.class名 { 属性名1：属性值1
属性名2：属性值2
。。。。。
}
/style
Id选择器：
作用：根据id名来给对应的标签设置样式
代码：
style type=”text/css”
#id名 { 属性名1：属性值1
属性名2：属性值2
。。。。。
}
/style
类名：
每一个标签都可以设置一个属性，这个属性的属性名叫做：class，后面跟的属性值叫做class名（类名）。
Id名：
每一个标签都可以设置一个属性，这个属性的属性名叫做：id，后面跟的属性值叫做id名。
注意点：
认清类名和id名
类名：相当于是标签的一个名字（可以重复）。
Id名：相当于是标签的身份号码（不可以重复）。
一般情况一个类名可以被多个标签使用，一个id名只能被一个标签使用。
总结：1.0不要在页面上写无用的样式。
2.0一个类名可以给多个标签，一个标签也可以多个类名。
3.0一个id名只可以给一个标签使用，一个标签也只可以有一个id名。
4.0命名的规范：命名的范围只能是英文字母，数字，下划线(“_”)，连接符（“-”），并且数字不能出现在名称的开头部分以及连接符加数字也不能出现在名称的开头部分。
其它选择器：
通配符：
作用：用于作用于页面上所有的标签.
代码：
style
* {
属性名1：属性值1;
属性名2：属性值2;
}
/style
注意：通配符在进行选择的时候，会去遍历页面上所有的标签，并且给这些标签设置对应的属性。
缺点：性能太低。一般情况不建议使用。
基础班中有很长一段时间用这个选择器来做css的reset.
后代选择器：
作用：选择一个标签中所有后代标签里满足条件的标签。
代码：
选择器 选择器 选择器 ｛
文档评论（0）