8.1.2019
1.CSS伪类:用于向某些选择器添加特殊的效果。
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
2. first-child 伪类可以用来选择元素的第一个子元素。
提示:最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。(实际会选取第一个该元素—p)
注释:必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效。
3. :lang 伪类使你有能力为不同的语言定义特殊的规则。
在下面的例子中,:lang 类为属性值为en的 q 元素定义引号的类型:
q:lang(en)
{
quotes: '"' '"' "'" "'";
}
<html lang="en">
<head>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>
输出:"This is a 'big' quote"
4. CSS伪元素:用于向某些选择器添加特殊的效果。
伪元素的语法:
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用:
selector.class:pseudo-element {property:value;}
属性 | 描述 | CSS |
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |
5. CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。
height设置元素的高度; line-height设置行高; max-height设置元素的最大高度;max-width设置元素的最大宽度; min-height设置元素的最小高度; min-width设置元素的最小宽度; width设置元素的宽度。
6. CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。
属性 | 描述 |
clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
cursor | 规定当指向某元素之上时显示的指针类型。 |
display | 设置是否及如何显示元素。 |
float | 定义元素在哪个方向浮动。 |
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility | 设置元素是否可见或不可见。 |
7.导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的。以下例子中的代码是用在垂直、水平导航栏中的标准代码。
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
从列表中去掉圆点和外边距:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
注释:list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
7.1若需构建垂直导航栏,添加
a
{
display:block;
width:60px;
}
解释:
display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。
7.2若需构建水平导航栏,两种方法,使用行内或浮动列表项。如果希望链接拥有相同的尺寸,就必须使用浮动方法。
行内列表项:规定<li>元素为行内元素
li
{
display:inline;
}
浮动列表项:为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度:
li
{
float:left;
}
a
{
display:block;
width:60px;
}
8.创建透明图像:使用opacity属性
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。
9. :hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器可用于所有元素,不只是链接。
10.在图像中创建透明框并加入文本:首先,我们创建一个 div 元素 (class="background"),它有固定的高度和宽度、背景图像,以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部,我们在 p 元素中加入了一些文本。
11. 媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。
媒介类型名称对大小写不敏感。
媒介类型 | 描述 |
all | 用于所有的媒介设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
| 用于打印机。 |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |
12.尽量避免使用的东西:behaviors,behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。只有 Internet Explorer 支持 behavior 属性。使用JavaScript 和 HTML DOM 替代。
复习CSS相关内容,准备开始学习JavaScript