HTML+CSS学习笔记（五）

一、CSS样式初步

       从今天开始我开始学习另一个大块——CSS。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。通俗点讲CSS就是把网页中内容的格式分离出来，这样有益于网站的修改与维护。

1.一个简单的CSS样式

h1 {
    color: red;
    text-align: center;
}
a {
    color: green;
    text-align: right;
}
p {
    color: blue;
}

      这些代码看着很熟悉，没错，这些代码就相当于把HTML中的属性等给提出来集中到一起。h1{}设置大标题的样式；a{}设置链接的样式；p{}设置段落的样式。

这段代码可以放在html代码里，这需要使用<style></style>标签，也可以放在单独的文件中，即CSS文件中，这就是外部样式表。

2.布局属性

布局属性包括影响网页中元素位置的属性。比如，布局属性可以控制内容的宽度、高度、边距、填充和对齐方式，甚至可以控制内容在网页中的准确位置。

①display
▶ block：另起新行显示
▶ list-item：另起新行显示，前面有列标记元素（这个目前我用好像没有标记）

▶ inline：紧接着前面内容显示

▶ none：隐藏且不占用空间②width和height 控制元素矩形区域的大小，单位用像素、厘米都行，尽量统一。

③margin 控制元素矩形区域以外的大小，比如margin-left=10px，将设置左边距为10个像素

3.格式化属性

格式化属性用于控制网页内容的外观，比如外边框，字体等等

①border border-width;border-color;border-style;border-left;这些不用解释一看就懂。

②font 这里不再详细说，只强调一下，font-family指的是字体；font-style指的是斜体字的使用，

另外，可以使用text-indent控制首行缩进量，可以使用2em表示缩进两个中文或四个英文字符。

 

二、样式类

样式类就是将同一种类型的内容设置成不同的格式。比如说，设置两个h1，一个字体用红色，一个字体用蓝色，使用一个h1样式是没法实现的。

这样我们可以使用样式类实现，只需要在原样式后面加个“.”和类名就行，然后使用时添加class=“样式类名”，如下：

h1.red {color:red;}

 h1.blue {color:blue;}

<h1 class="red">这里是红字标题</h1>

<h1 class="blue">这里是蓝字标题</h1>

◇通用类

可以设置不同类型的内容样式相同，去掉类型只保留点和类名，那用到就可以用

.bold {font-weight:bold}

 <h1 class="bold">标题<h1>

<h3 class="bold">标题<h3>

◇一次设置相同样式，使用逗号分隔h1.text,p.text {color:red;}

 

三、格式化文本高级技巧

1.使用小型大写字母：font-variant:samll-caps

 2.增加字母间距：letter-spacing:5px

3.增加单词间距：word-spacing:5px

4.大小写转换：text-transform:uppercase(大写)，lowercase(小写)，capitalize(首字母大写)

 

四、修改链接的外观链接

一般默认的会设置为蓝色下划线文本，打开链接后变为紫色。

设置连接的样式使用伪类，要使用冒号（:）,而不是点，使用时不用加class=""CSS包含根据链接状态修改链接外观的机制，

链接包括link（链接未访问）、hover（指向链接）、active（单击链接）、visited（访问过的链接）四种状态。

比如我可以设置鼠标指向链接时的样式

a:hover { font-weight:bold;color}

五、代码注释

/* 注释 */

练习结果点击打开链接
______________________________________________________