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

用于小的手持的设备。

print

用于打印机。

projection

用于方案展示，比如幻灯片。

screen

用于电脑显示器。

tty

用于使用固定密度字母栅格的媒介，比如电传打字机和终端。

tv

用于电视机类型的设备。

12.尽量避免使用的东西：behaviors，behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。只有 Internet Explorer 支持 behavior 属性。使用JavaScript 和 HTML DOM 替代。

复习CSS相关内容，准备开始学习JavaScript

CSS每日学习笔记（3）的更多相关文章

  1. CSS每日学习笔记（2）

    7.31.2019 1.CSS定位:允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. CSS 有三种基本的定位机制:普通流.浮动和绝对定位.除非专 ...

  2. CSS每日学习笔记（1）

    7.30.2019 1.CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. t ...

  3. CSS每日学习笔记（0）

    7.29.2019 1. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  6. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  7. 【干货】Html与CSS入门学习笔记1-3

    从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...

  8. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  9. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

随机推荐

  1. Beautiful Soup的用法（五）：select的使用

    原文地址:http://www.bugingcode.com/blog/beautiful_soup_select.html select 的功能跟find和find_all 一样用来选取特定的标签, ...

  2. Python---4字符串与编码

    字符编码 字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个 ...

  3. module in JavaScript

    JavaScript 在ES6之前没有给出官方模块的定义,因此社区自己搞了两个模块加载方案: CommonJS (node) AMD (browser) 本文略 CommonJS规范 module定义 ...

  4. Java中间件之RMI及实例介绍 · zijian's blog

    RMI介绍   远程方法调用(Remote Method Invocation)是Sun公司规定的允许在不同的JAVA虚拟机之间进行对象间通信的一种规范.在RMI中,JVM可以位于一个或多个计算机上, ...

  5. 《AndroidStudio导入安卓源码-idegen》---可方便查看安卓源代码

    idegen是Android源码中的一个模块,需要编译一下.生成一个jar包.然后再进行构建生成AndroidStudio配置相关文件. > 什么是idegen 要将Android系统源代码工程 ...

  6. java反序列化-ysoserial-调试分析总结篇(5)

    前言: 这篇文章继续分析commonscollections5,由如下调用链可以看到此时最外层的类不是annotationinvoke,也不是priorityqueue了,变成了badattribut ...

  7. Glide源码解析一，初始化

    转载请标明出处:https:////www.cnblogs.com/tangZH/p/12409849.html Glide作为一个强大的图片加载框架,已经被android官方使用,所以,明白Glid ...

  8. 7-1 jmu-python-汇率兑换 (10 分)

    7-1 jmu-python-汇率兑换 (10 分)   按照1美元=6人民币的汇率编写一个美元和人民币的双向兑换程序 输入格式: 输入人民币或美元的金额,人民币格式如:R100,美元格式如:$100 ...

  9. vue 实现 裁切图片 同时有放大、缩小、旋转功能

    实现效果: 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 大概原理: 利用h5 FileReader 对象, 获取 <input ty ...

  10. 用vue开发一个公众号商城SPA——1.前期准备和写页面

    使用vue开发公众号商城 第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新 公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很 ...