CSS基础1

第一天内容

一. Div和span默认显示特点：

Div默认占一整行（根据浏览器的显示大小），div的高度是由div中的内容来决定的。

Span的宽度和高度都是由内容来决定。（行内元素，块级元素。）

二. 总结：

html:超文本标记语言。可以表示图片，音频，视频，超连接（a）.

html的作用：用来页面的内容添加语义，用来确定html页面的结构。

html：决定页面的结构（给内容添加语义） 骨骼

Css: 决定页面的样式（使用页面更好看） 穿着

Javascript:决定页面的行为（使页面动起来） 行为

 

三. 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:文本的粗细。

取值：

1.如果是数值：100-900（都是整百）

2.如果是关键字：

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名。

６ 注意点：

６.1 认清类名和id名

类名：相当于是标签的一个名字（可以重复）。

Id名：相当于是标签的身份号码（不可以重复）。

一般情况一个类名可以被多个标签使用，一个id名只能被一个标签使用。

总结：1.0不要在页面上写无用的样式。

2.0一个类名可以给多个标签，一个标签也可以多个类名。

3.0一个id名只可以给一个标签使用，一个标签也只可以有一个id名。

4.0命名的规范：命名的范围只能是英文字母，数字，下划线(“_”)，连接符（“-”），并且数字不能出现在名称的开头部分以及连接符加数字也不能出现在名称的开头部分。

九. 其它选择器：

１ 通配符：

作用：用于作用于页面上所有的标签.

代码：

<style>

 * {

属性名1：属性值1;

属性名2：属性值2;

.......

}

</style>

注意：通配符在进行选择的时候，会去遍历页面上所有的标签，并且给这些标签设置对应的属性。

缺点：性能太低。一般情况不建议使用。

基础班中有很长一段时间用这个选择器来做css的reset.

２ 后代选择器：

作用：选择一个标签中所有后代标签里满足条件的标签。

代码：

 选择器 选择器 选择器 ｛

属性名1：属性值1;

属性名2：属性值2;

.......

 

｝

 

 

解读：去.father下面找.son元素，再找.son下面所有的p标签。

３ 子代选择器（子元素选择器）

作用：得到 当前标签中的直接子元素（直接放在标签下面没有经过任何标签的嵌套）

代码：

选择器>选择器｛

属性名1：属性值1;

属性名2：属性值2;

.......
｝

具体代码：

 

注意：上面的代码中只有与羊相关的标签才会变色。

４ 并集选择器：

作用：将两种类型的元素全部选择出来。

代码：

选择器 ，选择器｛

属性名1：属性值1;

属性名2：属性值2;

.......

｝

具体代码：

==》

.son p {

Color: red;

}

.mao p {
color: red;

}

 

 

 

５ 交集选择器：

作用：从两个集合中选择中它们相同部分：

代码：

选择器选择器
{
属性名1：属性值1;

属性名2：属性值2;

.......

}

注意：两个选择器之间是没有空格的。

 

P标签中不能放div。