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