十一月三日课堂笔记

来源：互联网发布：手机解锁的软件编辑：程序博客网时间：2024/04/29 13:18

1.3 CSS样式规则和CSS加载的方式
1.CSS样式规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）希望设置的样式属性（style attribute）。

CSS加载的方式
1.引入外部文件

HTML文档中使用元素引入外部样式文件，引入外部样式文件应在元素中增加
子元素。

2.导入外部样式单

<style type="text/css">@import "../outer.css";@import url('outer.css');</style>

导入外部样式表单需要在元素中执行@import进行导入。
3.使用内部CSS样式
一般来说我们不建议使用内部CSS样式：
复用性小。
导致HTML文档过大，会导致网络负载严重。
修改整站风格时，需要对每个网页文件进行样式修改。
CSS样式规则和CSS加载的方式8

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

CSS样式规则和CSS加载的方式
9
1.2 DIV和SPAN标签简介
我们在之前的练习中发现，HTML标签具有不同的特性。
实际上，我们可以将HTML元素分为两大类：区块元素和内联元素。
1.内联元素和区块元素
区块元素
总是在新的一行上显示。
高度、行高、宽度、内边距、外边距等都是可控制的。
高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css
控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显
示在一行上。

实例:

 <h1>, <p>, <ul>, <table>。 ```内联元素内联元素和其他的元素显示在一行上。上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。实例: ```css<b>, <td>, <a>, <img>。<div class="se-preview-section-delimiter"></div>

DIV和SPAN标签介绍
10
1.

元素
HTML

元素是块级元素，它可用于组合其他HTML元素的容器。

元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示换行。
如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。
DIV和SPAN标签介绍

<title>三列布局</title><style>body{ margin:0; padding:0; font-size:30px; font-weight:bold}div{ text-align:center; line-height:50px}.left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0}.main{ height:600px; margin:0 240px; background:#9CF}.right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#FCC;}</style></head><body><div class="left">left</div><div class="main">main</div><div class="right">right</div></body><div class="se-preview-section-delimiter"></div>

元素
HTML 元素是内联元素，可用作文本的容器
元素也没有特定的含义。
当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。
DIV和SPAN标签介绍
12
1.5 选择器
装修队CSS已经进场了，但是我们要小心控制装修队，可不能让装修队在家里胡作非
为。
所以我们要使用选择器精准的选择网页中需要装修的地方。
1.通配符选择器
使用”*”表示通配符，用来选择页面所有元素的样式。

*{ margin:0;padding:0;}<div class="se-preview-section-delimiter"></div>

2.类选择器
类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任
意。
.myclass{…}
3.ID选择器
ID选择器中的样式会对具有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以”#”来定义。
需要注意的是id在HTML文档中具有唯一性，是不可以重复的。

<div class="se-preview-section-delimiter"></div>#idValue{ ...}<div class="se-preview-section-delimiter"></div>

4.包含选择器
包涵选择器用于指定处于某个选择器对应的内部元素。

h1 em {color:red;}<div class="se-preview-section-delimiter"></div>

5.子选择器
子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。
选择器
13

parent>child{width: 200px; height: 35px;}<style></style><div class="a"><p>A smooth, mild <span class="b">blend of coffees</span> from Mexico, </p><div>A smooth, <p>mild</p>mild</div></div><div class="se-preview-section-delimiter"></div>

6.群组选择器
群组选择器使用逗号对选择符进行分隔。
我们可以将逗号读成“和”。

h1,p,myClass,#main{font-size:20px;}<div class="se-preview-section-delimiter"></div>

选择器
14
1.6 伪类
CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如， :hover 将在用户
悬停在选择器指定的元素上时应用样式。
1.anchor伪类
链接的不同状态都可以以不同的方式显示。

<style>a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */</style><body><div class="se-preview-section-delimiter"></div>

这是一个链接

注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，a:active必须被置于
a:hover之后，才是有效的。伪类的名称不区分大小写。
2.first-child伪类
:first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元
素。
element:first-child { style properties }
上面的CSS作用于下面的HTML:

span:first-child {background-color: lime;}<div><span>This span is limed!</span><span>This span is not. :(</span></div><div class="se-preview-section-delimiter"></div>

伪类
15
3.first-line伪类
“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对p元素的第一行文本进行格式
化：

<style>p:first-line {color:red;}</style><body><p>A smooth, mild blend of coffees from Mexico, A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees fromMexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffeesfrom Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,</p></body><div class="se-preview-section-delimiter"></div>

注意：”first-line” 伪元素只能用于块级元素。
下面的属性可应用于 “first-line” 伪元素：

font propertiescolor propertiesbackground propertiesword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear<div class="se-preview-section-delimiter"></div>

伪类
16
4.:before伪类
“:before” 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个

元素前面插入一幅图片：

<style>p:before{content:"台词：-";background-color:yellow;color:red;font-weight:bold;}</style><body><p>The :before pseudo-element inserts content before an element.</p><p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p></body><div class="se-preview-section-delimiter"></div>

大家应该想到了，既然有:before伪类，自然就有:after伪类，大家可以自行学习。
在css中实际上提供了非常多的伪类可以使用，我们指数选择了一些常用的进行介绍，其
他伪类的学习，需要大家自主学习。
伪类
17
1.7 CSS颜色
颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。
CSS的颜色可以通过以下等方法指定：十六进制颜色、RGB颜色、RGBA颜色、颜色名等值
指定。
1. 十六进制颜色值
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和
BB（蓝色）。所有值必须介于0和FF之间。
例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。
p
{
background-color:#ff0000;
}
2.RGB颜色值
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，
可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。
此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。
p
{
background-color:rgb(255,0,0);
}
3.RGBA颜色值
RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。
CSS颜色
18
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）
和1.0（完全不透明）之间的参数。
p
{
background-color:rgba(255,0,0,0.5);
}
CSS颜色
19
1.8背景图片

1.背景颜色background-color 属性定义了元素的背景颜色。页面的背景颜色使用在body的选择器中:body {background-color:#b0c4de;}2.背景图片background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。background:url(img_flwr.gif);3.背景平铺重复设置background-repeat属性控制背景图像的平铺重复效果。4.背景图片固定在默认情况下，组件里的背景图片会随着滚动条的滚动而自动滚动，我们要把backgrounattachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移动。body{background-attachment: fixed;}背景图片205.背景图片的定位可以利用 background-position 属性改变图像在背景中的位置。6.背景图片大小background-size属性指定背景图片大小。div{background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;}7.背景的简写属性背景图片21为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.背景颜色的简写属性为 "background":当使用简写属性时，属性值的顺序为：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

阅读全文

0 0