CSS3基础
文章平均质量分 80
北川Alex
好好学习,天天向上。
展开
-
[12]CSS 其他样式
一.颜色和透明度HTML5 中 CSS 其他剩下几个常用的样式,包括颜色、透明度、盒子的阴影轮廓以及光标的样式。颜色我们之前其实已经用的很多了,比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过,字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。 属性 值 说明 CSS 版本 color 颜色值 设置文本前景色 1p { colo原创 2017-01-01 09:50:40 · 379 阅读 · 0 评论 -
[19]CSS3 过渡效果
一.过渡简介HTML5 中 CSS3 的过渡效果,通过这个功能可以不借助JavaScript 来实现简单的用户交互功能。 过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能,比如::hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能,主要属性如下表: 属性 说明 transition-property原创 2017-01-07 00:31:53 · 581 阅读 · 0 评论 -
[07]CSS 盒模型 (上)
欢迎使用马克飞象@(示例笔记本)[马克飞象|帮助|Markdown]马克飞象是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验。特点概述:功能丰富 :支持高亮代码块、LaTeX 公式、流程图,本地图片以及附件上传,甚至截图粘贴,工作学习好帮手;得心应手 :简洁高效的编辑器,提供桌面客户端以及离线C原创 2016-12-28 00:41:08 · 350 阅读 · 0 评论 -
[10]CSS 边框与背景 (下)
一.设置背景HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观。盒模型的尺寸可以通过两种方式实现可见性,一种就是之前的边框,还有一种就是背景。CSS 背景设置的样式表如下: 属性 值 说明 CSS 版本 background-color 颜色 背景的颜色 1 background-image none 或 url 背景的图片原创 2016-12-31 00:31:18 · 359 阅读 · 0 评论 -
[20]CSS3 动画效果
一.动画简介HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行。CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation属性实现。那么之前的 transition属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性。 animation 实现动画效果主要由两个部分组成: 1.通过类似 Flash 动画中的关键帧原创 2017-01-08 18:35:01 · 542 阅读 · 0 评论 -
[21]CSS 传统布局(上)
一.布局模型HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的。在早期没有平板和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么,从这种比例上来看,长度总是大于宽度的。从最低分辨率 1024 * 768 设原创 2017-01-08 19:02:43 · 312 阅读 · 0 评论 -
[23]CSS3 多列布局
一.早期多列问题HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局。我们有时想布局成报纸、杂志那样的多列方式(至少两列,一般三列以上),但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局,那么使用浮动或定位布局都可以完成。但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制。因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力。/原创 2017-01-10 22:20:22 · 410 阅读 · 0 评论 -
[24]CSS3 弹性伸缩布局(上)
一.布局简介CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中,可能还有各种改动,浏览器的兼容性还存在问题。所以,本节作为初步了解即可。首先,我们来看下旧版本的浏览器兼容情况:Flexbox原创 2017-01-11 00:53:03 · 424 阅读 · 0 评论 -
[11]CSS 表格与列表
一.表格样式HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化。 表格有五种独有样式,样式表如下: 属性 值 说明 CSS 版本 border-collapse 边框样式 相邻单元格的边框样式 2 border-spacing 长度值 相邻单元格边框的间距 2 caption-side 位置名称 表格标原创 2017-01-01 09:14:14 · 338 阅读 · 0 评论 -
[22]CSS 传统布局(下)
一.定位布局在使用定位布局前,我们先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。 属性 说明 static 默认值,无定位。 absolute 绝对定位,使用 top、right、bottom、left进行位移。 relative 相对定位,使用 top、right、bottom、left进行位移。 fixed原创 2017-01-12 22:25:18 · 312 阅读 · 0 评论 -
[25]CSS3 弹性伸缩布局(中)
一.混合过渡版混合版本的 Flexbox 模型是 2011 年提出的工作草案,主要是针对 IE10 浏览器实现的伸缩布局效果,其功能和旧版本的属性大同小异。我们还是采用上一节课的文件,然后使用混合过渡代码,实现 IE10 的伸缩布局。首先,设置伸缩盒的 display 有如下两个属性值: 属性值 说明 flexbox 将容器盒模型作为块级弹性伸缩盒显示(混合版本) inline-f原创 2017-01-12 22:38:57 · 379 阅读 · 0 评论 -
[26]CSS3 弹性伸缩布局(下)
一.新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现了统一。首先,设置伸缩盒的 display 有如下两个属性值: 属性值 说明 flex 将容器盒模型作为块级弹性伸缩盒显示(新版本) inline-flex 将容器盒模型作为内联级弹性伸原创 2017-01-12 22:47:27 · 481 阅读 · 0 评论 -
[18]CSS3 变形效果(下)
一.3D 变形简介HTML5 中 CSS3 的变形效果,主要接着上节课的 2D 平面变形转换到 3D立体变形。之前的元素的平移、旋转、缩放和倾斜等功能。这些效果只是单纯在二维平面图上的,我们称之为 2D。那么其实 CSS3也提供了三维立体的一些功能效果,并且目前较新的主流浏览器都比较支持,只不过比 2D 晚一些,对浏览器的版本要求也要高一些。由于 3D 是立体三维,在 x、y 轴的基础上一般会多出原创 2017-01-06 23:39:30 · 366 阅读 · 0 评论 -
[09]CSS 边框与背景 (上)
一.声明边框HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观。边框的声明有三个属性设置,样式表如下: 属性 值 说明 CSS 版本 border-width 长度值 设置边框的宽度,可选 1 border-style 样式名称 设置边框的样式,必选 1 border-color 颜色值 设置边框的颜色,可选原创 2016-12-30 01:52:33 · 488 阅读 · 0 评论 -
[17]CSS3 变形效果(上)
一.transformHTML5 中 CSS3 的变形效果,通过变形效果,可以平移、缩放和旋转元素的功能。 CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform和 transform-origin。 属性 说明 transform 指定应用的变换功能 transform-origin 指定变换的起点对于 trans原创 2017-01-06 00:23:28 · 755 阅读 · 0 评论 -
[13]CSS3 前缀和rem
一.CSS3 前缀HTML5 中 CSS 在发展中实行标准化的一些问题,重点探讨 CSS3 中新属性前缀问题和新的单位 rem。在 CSS3 的很多新属性推出时,这些属性还处在不太稳定的阶段,随时可能被剔除。而此时的浏览器厂商为了实现这些属性,采用前缀方法。各大厂商前缀列表如下: 浏览器 厂商前缀 Chrome、Safari -webkit- Opera -o- Fire原创 2017-01-04 07:26:34 · 338 阅读 · 0 评论 -
[14]CSS3 文本效果
一.文本阴影HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性。CSS3 提供了 text-shadow文本阴影效果,这个属性在之前用过,只是没有涉及浏览器支持情况。 属性 Opera Firefox Chrome IE Safari text-shadow 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点:原创 2017-01-04 08:21:35 · 431 阅读 · 0 评论 -
[01]CSS 入门
一.使用 CSSHTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化。CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。<p style="color:red;font-size:50px;">这是一段文本</p> 解释:style是行内样式属性。color 是颜色属性,red 是颜色属性值;font-size原创 2016-12-18 23:48:36 · 632 阅读 · 0 评论 -
[03]CSS 选择器(下)
一.伪类选择器总汇HTML5 中 CSS 选择器中的伪类选择器,和伪元素选择器一样,面向某种共同特征来选择元素。 伪类选择器分为四种类型:结构性伪类、UI 伪类、动态伪类和其他伪类选择器,具体如下:** 选择器 名称 说明 CSS 版本 :root 根元素选择器 选择文档中的根元素 3 :first-child 子元素选择器 选择元素中第一个子元素 2原创 2016-12-26 23:21:42 · 412 阅读 · 0 评论 -
[04]CSS 颜色与度量单位
一.颜色表方案HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式、相对长度和绝对长度等。颜色的表现形式主要有三种方式:颜色名称、十六进制代码和十进制代码。p { color: red;} 解释:这是将一个段落内的文字设置为红色,采用的是英文颜色名称。问题是,其他各种颜色我们将如何设置?在古老的 HTML4 时,颜色名称只有 16 种。 颜色名称 十六进制代码原创 2016-12-27 00:14:48 · 424 阅读 · 0 评论 -
[02]CSS 选择器(上)
一.选择器汇总CSS 选择器,通过选择器定位到想要设置样式的元素。目前CSS 选择器的版本已经升级至第三代,即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式,主要分为三大类。本文主要涉及到三种选择器:基本选择器、复合选择器和伪元素选择器,具体如下: 选择器 名称 说明 CSS 版本 * 通用选择器 选择所有元素 2 <type> 元素选择器原创 2016-12-19 22:53:02 · 443 阅读 · 0 评论 -
[15]CSS3 渐变效果
一.线性渐变HTML5 中 CSS3 背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变。 CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能。在以前,这种效果必须采用图片才能实现的。首先,我们先看一下它的样式表,如下: 属性值 linear-gradient(方位, 起始色, 末尾色) 方位 可选参数,渐变的方位。可以使用的值有:to top、原创 2017-01-05 01:20:45 · 1560 阅读 · 0 评论 -
[06]CSS 文本样式(下)
一.文本汇总HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小、样式以及文本的方位。 重点了解一下 CSS 文本样式中文本内容的一些设置方法,样式表如下: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线。 1 text-transform 将英文文本转换大小写。 1 text-shadow 给文本添加阴影原创 2016-12-27 23:30:02 · 384 阅读 · 0 评论 -
[08]CSS 盒模型 (下)
一.元素可见性HTML5 中 CSS 盒模型,了解元素的外观配置以及文档的整体布局。使用 visibility 属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果。样式表如下: 属性 值 说明 CSS 版本 visibility visible 默认值,元素在页面上可见。 2 ~ hidden 元素不可见,但会占据空间。 2原创 2016-12-28 01:12:01 · 320 阅读 · 0 评论 -
[16]CSS3 边框图片效果
一.属性解释HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩。CSS3 提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框。这样,边框就可以自定义了。 1.border-image-source //引入背景图片地址 2.border-image-slice //切割引入背景图片 3.border-image-width //边框图片的宽度原创 2017-01-05 23:08:40 · 3093 阅读 · 0 评论