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. vue项目实例-常用标签

    感谢:https://www.jianshu.com/p/5d9b341d650f 总结: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到pat ...

  2. FastJson的学习之JSON互相转Map集合，List集合，JavaBean

    https://blog.csdn.net/weixin_36910300/article/details/79182120 创建两个实体类 一个是部门类,一个是部门员工类 部门员工类 public ...

  3. 吴裕雄--python学习笔记：os模块的使用

    在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件),经常要对大量文件和大量路径进行操作,这就依赖于os模块. 1.当前路径及路径下 ...

  4. Python学习笔记（四）函数式编程

    高阶函数(Higher-order function) Input: 1 abs Output: 1 <function abs> Input: 1 abs(-10) Output: 1 ...

  5. array-2

    数组的基本操作 JS随机操作数组元素 Math.random() 结果为0-1间的一个随机数[0,1) Math.round(num) 参数num为一个数值,函数结果为num四舍五入的整数 Math. ...

  6. Pwnable.tw start

    Let's start the CTF:和stdin输入的字符串在同一个栈上,再准确点说是他们在栈上同一个地址上,gdb调试看得更清楚: 调试了就很容易看出来在堆栈上是同一块地址.发生栈溢出是因为:r ...

  7. Seeing AI：计算机视觉十年磨一剑，打造盲人的“瑞士军刀”

    Mary Bellard(左)和AnneTaylor(右)是Seeing AI开发团队的成员,SeeingAI成果的背后是计算机视觉数十年研究的支持. 当Anne Taylor走进一个房间时,她像其 ...

  8. 理解 Java 内存模型的因果性约束

    目录 理解 Java 内存模型的因果性约束 欢迎讨论 规范理解 例子练习 例子1 例子2 总结 理解 Java 内存模型的因果性约束 欢迎讨论 欢迎加入技术交流群186233599讨论交流,也欢迎关注 ...

  9. Git pull 卡在Unpacking objects

    今天在拉取远程仓库的时候在Unpacking objects阶段 进度条卡住,不知道什么原因. 翻取相关资料搜索后得知:在拉取大型二进制对象(如Adobe Illustrator文件等)可能会使整个拉 ...

  10. sql--测试商品的重要度,是否需要及时补货

    表1:商品表 表2:商品售卖表 需求:算出商品的平均点击率.平均销售.商品受欢迎度 1.使用inner join查出每件商品的点击率和销售额度 ) as selas from test a left ...