HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 移动互联网 查看内容

hello,前端-CSS篇(二)

2016-8-30 14:27| 发布者: Hyukoh| 查看: 1418| 评论: 0|原作者: 谢盼|来自: GGG 's Blog

摘要: CSS 是 Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

 属性选择器


  属性选择器可以根据元素的属性及属性值来选择元素。

//把包含标题( title) 的所有元素变为红色
[title] { color: red; }

//将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}

//将指向 Web 服务器上某个指定文档的超链接变成红色
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

  如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

p[class~="important"] {color: red;}

  如果忽略了波浪号,则说明需要完成完全值匹配。

  子串匹配属性选择器


  [abc^="def"] 选择 abc 属性值以 “def” 开头的所有元素

  [abc$="def"] 选择 abc 属性值以 “def” 结尾的所有元素

  [abc*="def"] 选择 abc 属性值中包含子串 “def” 的所有元素


  如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

a[href*="w3school.com.cn"] {color: red;}

  特定属性选择类型

  //选择 lang 属性等于 en 或以 en- 开头的所有元素

  *[lang|="en"] {color: red;}

  后代选择器

  后代选择器(descendant selector)又称为包含选择器。

  后代选择器可以选择作为某元素后代的元素。

//只对 h1 元素中的 em 元素应用样式
h1 em { color: red; }

  子元素选择器

  与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

//选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}

  相邻兄弟选择器

  相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

//增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}

  这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。


  伪类


  CSS 伪类用于向某些选择器添加特殊的效果。

  :active 向被激活的元素添加样式。

  :focus 向拥有键盘输入焦点的元素添加样式。

  :hover 当鼠标悬浮在元素上方时,向元素添加样式。

  :link 向未被访问的链接添加样式。

  :visited 向已被访问的链接添加样式。

  :first-child 向元素的第一个子元素添加样式。

  :lang 向带有指定 lang 属性的元素添加样式。

  注意:伪类很容易遭到误解,查看在线实例


  伪元素


  CSS 伪元素用于向某些选择器设置特殊效果。

  :first-letter 向文本的第一个字母添加特殊样式。

  :first-line 向文本的首行添加特殊样式。

  :before 在元素之前添加内容。

  :after 在元素之后添加内容。


  样式

  文本


  通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进等等。

  color 设置文本颜色

  direction 设置文本方向。

  line-height 设置行高。

  letter-spacing 设置字符间距。

  text-align 对齐元素中的文本。

  text-decoration 向文本添加修饰。

  text-indent 缩进元素中文本的首行。

  text-transform 控制元素中的字母。

  white-space 设置元素中空白的处理方式。

  word-spacing 设置字间距。


  列表


  CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

  list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。

  list-style-image 将图象设置为列表项标志。

  list-style-position 设置列表中列表项标志的位置。

  list-style-type 设置列表项标志的类型


  实例


<html>
<head>
<style type="text/css">
ul 
{
list-style: square inside url('/i/eg_arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>

</html>


  表格


  CSS 表格属性可以帮助您极大地改善表格的外观。

  border-collapse 设置是否把表格边框合并为单一的边框。

  border-spacing 设置分隔单元格边框的距离。

  caption-side 设置表格标题的位置。

  empty-cells 设置是否显示表格中的空单元格。

  table-layout 设置显示单元、行和列的算法。


  动画


  动画是使元素从一种样式逐渐变化为另一种样式的效果。

  您可以改变任意多的样式任意多的次数。

  请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。

  0% 是动画的开始,100% 是动画的完成。

  为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

  @keyframes规则用于创建动画。在@keyframes中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。


  Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

  Chrome 和 Safari 需要前缀 -webkit-。

  注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。


  实例

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}


  简写

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}


  边框

  通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框。

  •   border-radius
  •   box-shadow
  •   border-image

  实例

#div1
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:100px;
border-radius:25px;
box-shadow: 10px 10px 5px #888888;
}
#round
{
background:white;
border:15px solid;
-moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;    /* Old Firefox */
-webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;    
/* Safari and Chrome */
-o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;        /* Opera */
border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;
}


  背景


  CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

  CSS 在这方面的能力远远在 HTML 之上。

  background-attachment 背景图像是否固定或者随着页面的其余部分滚动

  background-color 设置元素的背景颜色

  background-image 把图像设置为背景,CSS3 允许为元素使用多个背景图像

  background-position 设置背景图像的起始位置

  background-repeat 设置背景图像是否及如何重复

  background-clip 规定背景的绘制区域 CSS3

  background-origin 规定背景图片的定位区域 CSS3

  background-size 规定背景图片的尺寸 CSS3

  

  字体


  CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

  在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

  通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

  font-family 设置字体系列。

  font-size 设置字体的尺寸。

  font-style 设置字体风格。

  font-variant 以小型大写字体或者正常字体显示文本。

  font-weight 设置字体的粗细。

  在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

  如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):、

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>


  多列


  通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

  column-count 规定元素应该被分隔的列数

  column-gap 规定列之间的间隔

  column-rule 设置所有 column-rule-* 属性的简写属性(颜色,样式,宽度)


  用户界面


  在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

  resize 规定是否可由用户对元素的尺寸进行调整。

  box-sizing 允许您以确切的方式定义适应某个区域的具体内容。

  outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。


  过渡

div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

div:hover
{
width:200px;
}
//添加阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}


来源作者:_GGG 'S BLOG - 谢盼
本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!投稿: admin@html5cn.org
更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-29 17:46

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部