CSS学习笔记
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,不过其包含块是视窗本身。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。