CSS

huangyongxing310

浏览: 481660 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

CSS

CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)

CSS 语法

selector {declaration1; declaration2; ... declarationN }

h1 {color:red; font-size:14px;}

以分号结束
CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

CSS 属性选择器

[title~=hello] { color:red; }

[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

CSS 框模型

元素框的最内部分是实际的内容
直接包围内容的是内边距
内边距呈现了元素的背景
内边距的边缘是边框
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

行框和清理
行框就是以块级标签定义的元素,内容可以是一个多行显示的内容

块级标签定义的元素在文档流中是独占一行的,就是说如果内容不足以占完一行(一块),后面的内容也不会占用剩下的空间

行内块级元素是会占用剩余空间进行内容显示的

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

伪类和伪元素的区别
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

伪类种类

伪元素种类

伪类就是一个你能通过为一个元素加入一个类就可以解决的
如:
:first-child

<p>
    <i class="first-child">first</i>
    <i>second</i>
</p>

伪元素就是你要通过定义一个元素的方式才可以进行完成的(增加一个类是不能够完成的)
如:
:first-letter

<p><span class='first-letter'>I</span> am stephen lee.</p>

行高
置行间的距离

属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，
你就可以通过更改一个文件来改变整个站点的外观。

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过
<style> 标签定义内部样式表。

<head>
	<style type="text/css">
	body {background-color: red}
	p {margin-left: 20px}
	</style>
</head>

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。

<p style="color: red; margin-left: 20px">
	This is a paragraph
</p>

样式的优先级
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

查看图片附件

分享到：

URI和URL的区别、URL编码 | java 运行顺序、注意事项总结、基础概念

2016-09-04 14:43
浏览 323
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS

评论

发表评论

相关推荐

前端格式化工具与检测工具选择与使用

background-position

CSS 总结

最近访客更多访客>>