CSS学习笔记

最新推荐文章于 2024-09-21 23:59:03 发布

心中有燕

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量297

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u010670280/article/details/49256633

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.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#背景定位

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right right	center 或 center right
left	left 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	设置字间距。