CSS每日学习笔记(3)

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

转载于:https://www.cnblogs.com/zccfrancis/p/11294951.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux-03-Vim使用+账号用户管理

什么是Vim编辑器 Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用。 简单的来说&#xff0c; vi 是老式的字处理器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。 vim 则…

孙正义:未来30年投资趋势【附PPT】

来源&#xff1a;投资家、蓝血研究&#xff08;lanxueyanjiu)作者&#xff1a;孙正义对于今后30年来讲&#xff0c;我认为现在是个很关键的时刻&#xff0c;尤其是在各位的人生当中。而且现在是一整个概念的转变&#xff0c;我们要包容这个概念的转变。我想先给大家看两张照片。…

php 计算指定年份的周总数与及第几周的开始日期和结束日期(从周一开始)

/** * 获取某年第几周的开始日期和结束日期 * param int $year * param int $week 第几周; */ public function weekday($year,$week1){ $year_start mktime(0,0,0,1,1,$year); $year_end mktime(0,0,0,12,31,$year); // 判断第一天是否为第一周的开始 if (intval(d…

linux-04-磁盘命令+进程命令

磁盘管理 概述 Linux磁盘管理好坏直接关系到整个系统的性能问题。 Linux磁盘管理常用命令为 df、du。 df &#xff1a;列出文件系统的整体磁盘使用量du&#xff1a;检查磁盘空间使用量 df df df命令参数功能&#xff1a;检查文件系统的磁盘空间占用情况。可以利用该命令来获…

华人一作统一「视觉-语言」理解与生成:一键生成图像标注,完成视觉问答,Demo可玩...

来源&#xff1a;机器学习研究组订阅这个 BLIP 模型可以「看图说话」&#xff0c;提取图像的主要内容&#xff0c;不仅如此&#xff0c;它还能回答你提出的关于图像的问题。视觉 - 语言预训练 (Vision-Language Pre-training&#xff0c;VLP) 提高了许多视觉 - 语言任务的性能。…

如何做一名优秀的电子工程师[zz]

如何做一名优秀的电子工程师成为一个杰出工程师最重要的因素就是“热爱自己的职业”。毕竟兴趣是最好的老师&#xff0c;许多优秀的电子工程师都是从小作为电子爱好者的。爱好不仅要体现在行动中 更要深入内心甚至深入骨髓。作为工程师和科学家想取得成功并不是比赛谁花的时间最…

2020年9月25日-01-项目启动(团队分工)+带宽,网络速度的计算

此博客用于记录2020年9月25日每日分享&#xff0c; 大概讲讲团队里的分工合作那些事儿。 关于带宽啊&#xff0c;网速啊之类的一些事儿 日期&#xff1a;2020年9月25日 主题&#xff1a; 团队合作怎么合作&#xff1f;有什么人&#xff1f;一般用什么工具&#xff1f;诸如此类…

Python 迭代器,错误、异常处理

迭代器 迭代器可以用来遍历字符串、列表、元组、集合、字典。 myString"hello" myIteriter(myString) ##iter()函数可以获取元素集的一个迭代器 for i in myIter: #遍历每个字符print(i)myList[1,2,3,4] myIteriter(myList) for i in myIter: #遍历列表、元组、…

群体决策是如何误入歧途的

1986年&#xff0c;刚刚升空不久就发生爆炸的挑战者号航天飞机。© Boing Boing来源&#xff1a; 利维坦文&#xff1a;Joshua Holden译&#xff1a;以实马利校对&#xff1a;兔子的凌波微步原文&#xff1a;nautil.us/what-makes-group-decisions-go-wrong-and-right-1340…

2020年9月26日-02-软件工程-工程化思维+瀑布模型+敏捷开发

此博客用于记录2020年9月26日每日分享&#xff0c; 软件工程中的集中常见模式&#xff0c;瀑布模型&#xff0c;敏捷开发等 日期&#xff1a;2020年9月26日 主题&#xff1a; 讨论讨论怎么使用软件工程的思想来解决问题软件工程中的集中常见模式&#xff0c;瀑布模型&#xff…

PowerDesigner15在win7-64位系统下对MySQL 进行反向工程以及建立物理模型产生SQL语句步骤图文傻瓜式详解...

1、安装PowerDesigner15、MySQL5.不详细讲解了。网上一大把。请各位亲参考去。 2、安MyODBC-standard-3.51.0.7-win.msi、mysql-connector-odbc-5.1.5-win.msi两个文件。可以支持odbc在win7下创建连接。 3、安装好之后&#xff0c;最好重新启动系统。不要试图在win7控制面板内找…

转换机器学习:面向多学科问题,构建机器学习新生态

来源&#xff1a; 集智俱乐部作者&#xff1a;Ivan Olier译者&#xff1a;郭瑞东审校&#xff1a;张澳编辑&#xff1a;邓一雪导语机器学习方法在生命、物理、社会经济等复杂系统的应用日渐频繁。如何针对特定任务选取合适的机器学习方法&#xff0c;如何综合利用各类机器学习方…

后端好的文章推荐

文章目录redismysqljava小牛肉笔记杂项vuespringmybatisspringboot运维jenkinslinuxdocker项目计算机四大件计算机网络设计模式好奇心redis 缓存穿透、缓存击穿、缓存雪崩区别和解决方案 Redis、Kafka 和 Pulsar 消息队列对比 mysql MySQL数据库主从同步 java 小牛肉笔记 …

nginx正向代理 反向代理

1、正向代理 1.我访问不了某网站&#xff0c;但是我能访问一个代理服务器&#xff0c;这个代理服务器呢,他能访问那个我不能访问的网站 2.于是我先连上代理服务器,告诉他我需要那个无法访问网站的内容&#xff0c;代理服务器去取回来,然后返回给我。 3.客户端必须设置正向代理…

【综述专栏】从微分几何和代数拓扑的视角来重新探讨图神经网络

来源&#xff1a;知乎—努力努力再努力q地址&#xff1a;https://zhuanlan.zhihu.com/p/435040892在科学研究中&#xff0c;从方法论上来讲&#xff0c;都应“先见森林&#xff0c;再见树木”。当前&#xff0c;人工智能学术研究方兴未艾&#xff0c;技术迅猛发展&#xff0c;可…

2021-07-27-jeesite学习笔记

2021年7月30日 https://blog.csdn.net/weixin_43886319/article/details/102668518 日了狗 2021年7月29日 sqlJenkins充吧 第一天 参考博文 安装jdk https://blog.csdn.net/qq_42815754/article/details/82968464 有关linux环境变量 https://blog.csdn.net/ljheee/articl…

nuxt项目打包上线之二

之前写过一篇nuxt打包上线的文章&#xff0c;请看这里&#xff1a;https://www.cnblogs.com/daisygogogo/p/11218809.html 上一篇文章的部署流程有点不好的地方&#xff0c;就是它适用于只有唯一一个后台接口路径的部署&#xff0c;不适合需要根据多个环境切换后台接口的情况。…

elasticsearch-1

单实例安装 1、官网下载tar压缩包 https://www.elastic.co/downloads/elasticsearch 2、将下载好的压缩包elasticsearch-5.5.2.tar.gz上传到linux服务器&#xff0c;并解压缩 tar -vxf elasticsearch-5.5.2.tar.gz 3、cd进入到elasticsearch-5.5.2目录中&#xff0c;启动ela…

清华博士后用10分钟讲解AlphaCode背后的技术原理,原来程序员不是那么容易被取代的!...

来源&#xff1a;AI科技评论不久前&#xff0c;DeepMind 的团队发布了一个可以自动生成竞赛级代码的人工智能系统——AlphaCode&#xff0c;号称「媲美普通程序员」&#xff0c;一经发表就在国内外的AI圈里引起了巨大轰动。 -论文地址&#xff1a;https://storage.googleapis.c…

(SQLlite3 Source Code 系列之一) 前言

&#xff08;写在前前面&#xff0c; 研究什么都是要 Read the fucking source code ! 否则就是雾里看花。当然分析源码是很痛苦的过程&#xff0c;人都是想走捷径的&#xff0c;但是我的经验告诉我&#xff1a;选择不走捷径才是真正的捷径。记住了&#xff0c;出来混&#xff…