您的位置：首页 > Web前端 > CSS

CSS学习笔记

2015-10-19 22:49 549 查看
一.CSS基础语法
1.CSS规则由两个部分构成：选择器，以及
一条或多条声明。

selector {declaration1:declaration2;....declarationN}


通常表示在HTML元素
每条声明由一个属性和一个值组成。
![这里写图片描述](http://www.w3school.com.cn/i/ct_css_selector.gif)

2.ID选择器

ID选择器以“＃”来定义
id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}


3.CLASS选择器

CLASS选择器以“.”来定义
#注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器：

.fancy td {
color: #f60;
background: #666;
}


在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）
元素也可以基于它们的类而被选择：

td.fancy {
color: #f60;
background: #666;
}


4.属性选择器

[title] {
color:red;
}


5.属性和值选择器

[title=aaa]{
color:red;
}


属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
“`[title~=hello] { color:red; }“`

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
“`[lang|=en] { color:red; }“`

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


外部样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
#不要在属性值与单位之间留有空格。


内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>


内联样式

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


多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
color: red;
text-align: left;
font-size: 8pt;
}
```
而内部样式表拥有针对 h3 选择器的两个属性：


h3 {
text-align: right;
font-size: 20pt;
}
“`
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red;
text-align: right;
font-size: 20pt;


即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

background-color#背景颜色
3种方式

body
{
background-color:yellow;
background-color:#00ff00;
background-color:rgb(255,0,255);
}
值  描述
color_name  规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number  规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number  规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
inherit 规定应该从父元素继承 background-color 属性的设置。


background-image#背景图片
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
“`body {background-image: url(/i/eg_bg_04.gif);}“`
大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
“`p.flower {background-image: url(/i/eg_bg_03.gif);}“`
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
“`a.radio {background-image: url(/i/eg_bg_07.gif);} “`
background-repeat＃背景重复

body
{
background-image: url(stars.gif);
background-repeat: repeat-y;
}

值  描述
repeat  默认。背景图像将在垂直方向和水平方向重复。
repeat-x    背景图像将在水平方向重复。
repeat-y    背景图像将在垂直方向重复。
no-repeat   背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。


background-position#背景定位
单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
right rightcenter 或 center right
leftleft center 或 center left
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
#如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。


背景图关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body {
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
#background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。}
属性描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
文本缩进
p {text-indent: 5em;}

可能的值

值描述
length定义固定的缩进。默认值：0。
%定义基于父元素宽度的百分比的缩进。
inherit规定应该从父元素继承 text-indent 属性的值。
水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值描述
left把文本排列到左边。默认值：由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
inherit规定应该从父元素继承 text-align 属性的值。
值 justify

最后一个水平对齐属性是 justify，它会带来自己的一些问题。

值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。不过在 CSS 中，还需要多做些考虑。

要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

CSS 也没有指定应当如何处理连字符（注1）。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于 CSS 没有定义连字符行为，用户代理不太可能自动加连字符。因此，在 CSS 中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。

注1：CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

标准间隔

word-spacing

值描述
normal默认。定义单词间的标准空间。
length定义单词间的固定空间。
inherit规定应该从父元素继承 word-spacing 属性的值。
字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

字符转换

text-transform 属性处理文本的大小写。

值描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母，仅有小写字母。
inherit规定应该从父元素继承 text-transform 属性的值。
作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

h1 {text-transform: uppercase}


使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

文本修饰

text-decoration

值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。
属性值：

属性描述
color设置文本颜色
direction设置文本方向。
line-height设置行高。
letter-spacing设置字符间距。
text-align对齐元素中的文本。
text-decoration向文本添加修饰。
text-indent缩进元素中文本的首行。
text-shadow设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform控制元素中的字母。
unicode-bidi设置文本方向。
white-space设置元素中空白的处理方式。
word-spacing设置字间距。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航