12.13课堂笔记、课后作业、学习心得

12.13课堂笔记、课后作业、学习心得

1.CSS基础使用

1.1CSS样式规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

1.2CSS加载的方式

1.2.1引入外部文件

<link href="outer.css" rel="stylesheet" type="text/css"></link>

例：<link rel="stylesheet" type="text/css" href="./css/main.css"></link>

1.2.2导入外部样式单

<style type="text/css">

@import "../outer.css";
@import url('outer.css');

</style>

1.2.3使用内联CSS样式
内联样式只对单个标签有效，不会影响整个文件。
在 HTML 元素中使用 style 属性定义内联样式。

<div style="property1:value1;property2:value2;"/>

1.3内联元素和区块元素简介

1.3.1区块元素

1）总是在新的一行上显示。

2）高度、行高、宽度、内边距、外边距等都是可控制的。

3）高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显示在一行上。

4）实例: <h1>,<p>, <ul>,<table>。

例：

1.3.2内联元素

1）内联元素和其他的元素显示在一行上。

2）上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。

3）实例: <b>, <td>, <a>, <img>。

例：

1.4选择器

1.4.1通配符选择器
使用"*"表示通配符，用来选择页面所有元素的样式。
*{ margin:0;
padding:0;}

1.4.2类选择器

类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任意。

.myclass{...}

1.4.3选择器

ID选择器中的样式会对具有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。

需要注意的是id在HTML文档中具有唯一性，是不可以重复的。

#idValue{ ...}

1.4.4包含选择器

包涵选择器用于指定处于某个选择器对应的内部元素。
h1 em {color:red;}

1.4.5子选择器

子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。
parent>child{width: 200px; height: 35px;}

1.4.6群组选择器

群组选择器使用逗号对选择符进行分隔。
h1,p,myClass,#main{
 font-size:20px;
}

例：

1.5伪类

a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

例：

学习心得：

今天开始学习了CSS图层样式，CSS可以使之前HTML做出来的页面颜色更加丰富，样式更加多样，当然也比HTML稍微复杂点，后面CSS还有很多要学习，所以前面的基础一定要打好，不能学了后面忘了前面。