码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习笔记

时间:2014-08-26 20:01:06      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   os   java   使用   io   strong   ar   

1、最近看看一些CSS的东西,发现每次看过就忘记,做起东西来就会非常的慢,所以有时间的话可以抽空多看看别人的网站,然后想想自己能不能做出这种效果。
2、有哪几种设置样式的方式:

浏览器缺省设置

外部样式表

内部样式表(位于 标签内部)

内联样式(在 HTML 元素内部)

This is a paragraph

多重样式
根据优先级得到最后的结果

3、不受继承影响

//元素选择器
body {

font-family: Verdana, sans-serif;
 }

//分组选择器
td, ul, ol, ul, li, dl, dt, dd {

font-family: Verdana, sans-serif;
 }

p {

font-family: Times, "Times New Roman", serif;
 }

p再设置一次值就不会受到body属性的影响

//通配符选择器

  • {color:red;}
    类选择器一样与ID 选择器中可以忽略通配选择器。

//多类选择器

.important.urgent {background:silver;}

这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此,如果一个 p 元素的 class 属性中只有词 important 和 warning,将不能匹配。不过,它能匹配以下元素:

This paragraph is a very important and urgent warning.

4、ID选择器

同一个文档中不能有相同的ID

red {color:red;}

5、类选择器

.center {text-align: center}

6、派生选择器

li strong {

font-style: italic;
font-weight: normal;

} //会选择后代只有有strong标记的元素

h1 > strong {color:red;} //只会选择h1的子节点是strong的元素

table.company td > p //这种是结合后代选择器和子选择器

h1 + p {margin-top:50px;} //这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

sidebar p {

font-style: italic;
text-align: right;
margin-top: 0.5em;
}

.fancy td {

color: #f60;
background: #666;
}

td.fancy {

color: #f60;
background: #666;
}

7、属性选择器

[title]
{
color:red;
}

[title=W3School]
{
border:5px solid blue;
}

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

属性与属性值必须完全匹配

This paragraph is a very important warning.

如果写成 p[class=“important”],那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素,必须这样写:

p[class=“important warning”] {color: red;}

可以把多个属性链接在一起选择文档:

a[href=“http://www.w3school.com.cn/“][title=“W3School”] {color: red;}

8、需要记住的最常见的使用

margin 属性值的规律:

margin: top right bottom left

如果缺少左外边距的值,则使用右外边距的值。

如果缺少下外边距的值,则使用上外边距的值。

如果缺少右外边距的值,则使用上外边距的值。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

9、定位

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow 设置当元素的内容溢出其区域时发生的事情。

clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。

vertical-align 设置元素的垂直对齐方式。

z-index 设置元素的堆叠顺序。

其中position 属性值的含义:

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

CSS学习笔记

标签:style   http   color   os   java   使用   io   strong   ar   

原文地址:http://my.oschina.net/u/933915/blog/306895

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!