CSS标签

Dear 丶 2022-12-08 15:58 228阅读 0赞

1.  CSS 语法由三部分构成：选择器、属性和值：

selector \{property: value\}

2.CSS的基本写法

h1,h2,h3,h4,h5,h6 \{

color: green;

font-family: Verdana, sans-serif;

color: \#000;

background: \#fff; margin: 0; padding: 0;

3.派生选择器=上下文选择器

li strong \{

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

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。

</strong></li>

4.id选择器，用\#号+选择器名称

\#study \{

font-family:sans-serif;

background:fff;

\#blue p\{

font-family:Verdana;

margin:0;

padding:0;

\#blue tr\{

font-family:Verdana;

margin:0;

padding:0;

**即使被标注为 blue的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：**

\#pashen li strong\{

color:\#00ff11;

font-style:italic;

5.类选择器用.号+类选择名

.color \{

color:\#009988;

.color td\{

color:\#009993;

6.id选择器和类选择器可以被元素选择。

那些以 color标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 color的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 color的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 color的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 color的表格单元（即使用 td 元素来选择 color类）。

div\#blue\{

margin:1px;

padding:23px;

td.color\{

color:\#009988;

7.样式的关联关系：

0.游览器缺省值

1.外部样式表：

<head>

</head>

mystyle.css文件：

hr\{color:sienna;\}

p\{ margin-left:20px;\}

body\{background-image:url("images/back.gif");\}

2.内部样式：

hr\{color:sienna;\}

p\{ margin-left:20px;\}

body\{background-image:url("images/back.gif");\}

</style>

3.内联样式：

权重依次增大。

8.内部样式取代外部样式，继承自己没有的样式。

9.background的属性color、image、repeat、position、attachment

background-position：关键字、百分百、像素

10.文本样式：color、direction、line-height、text-indent、text-align、text-transform、text-shadow、text-decoration、word-spacing、letter-spacing、white-space、unicode-bidi、font-family、font-size、font-size-adjust、font-stretch、font-style、font-variant、font-weight

11.列表属性：list-style、image、position、type、marker-offer

12.表格属性：border-collapse、border-spacing、caption-side、empty-cells、table-layout

13.轮廓：outline

14.盒模型:border、margin、padding、element

p \{

border-style: solid; border-color: blue rgb(25%,35%,45%) \#909090 red; \}

16.

17.float、clear

18.改变光标 cursor

19.伪类，鼠标

20.伪元素

选择器 : 伪元素 \{ 属性: 值 \}

选择器 . 类: 伪元素 \{ 属性: 值 \}

21.css的权重

css的权重决定了哪个样式被优先使用。

![Center][]

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

1.  第一等：代表内联样式，如: style=””，权值为1000。
2.  第二等：代表ID选择器，如：\#content，权值为100。
3.  第三等：代表类，伪类和属性选择器，如.content，权值为10。
4.  第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

22.游览器类型和版本的兼容

单独定义css文件来兼容

<!--\[if IE 7\]>  
<link href="/resources/css/ie7?v=86ePElR7UGgMPCGa93Tj8TDCDyA2e5Mk\_pmjbjNbiKU1" re

l="stylesheet"/>  
<!\[endif\]-->

在css文件中控制样式兼容

如透明度

*  **opacity: 0.5;** 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
 *  **filter:alpha(opacity=50);** 这个是为IE6设的，可取值在0-100，其它三个0到1.
 *  **-moz-opacity:0.5;** 这个是为了支持一些老版本的Mozilla浏览器。
 *  **-khtml-opacity: 0.5;** 这个为了支持一些老版本的Safari浏览器。

23.定位

postion：absolute relative static fixed none

float：left right none

注意事项：

1.是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

2.CSS元素属性继承

3.不可以在内联元素 <span> 中嵌入 <p>

4.类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

5.id选择器和类选择器可以被元素选择。你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。

6.background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

7.background-image 也不能继承。事实上，所有背景属性都不能继承。

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

9.您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

10.注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

11.*text-decoration 值会替换而不是累积起来*。

12.您也许已经注意到了，上面的例子中使用了单引号。只有当一个字体名中有一个或多个空格（比如 New York），或者如果字体名包括 \# 或 $ 之类的符号，才需要在 font-family 声明中加引号。

单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号。

13.p \{border-style: solid; border-left-style: none;\}注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

14.first-line 伪元素仅能被用于块级元素

15.margin为负值的时候，可以隐藏底层的边框

16.border-radius用于添加圆角边框，可以做一些圆形按钮，圆形的头像等等

17.auto与100%的区别：auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。

18.relative与absolute的区别：控制样式重叠非常有用。要注意其参照的那个对象来设置其属性的。

一般会有三种情况：

参考：http://wenku.baidu.com/link? url=6CWP6mRKPrFDUMH0FmulOJnDBnHEOEm8s6f6SwN2wY486s23T2Zgr3GrDhWcQvGE R1wgaVI6BjSWj\_hFgF9X85DAugtRbnsGWGVWX3ycgFG

[http://blog.163.com/love\_heartbreaking/blog/static/124561901201211334714800/][http_blog.163.com_love_heartbreaking_blog_static_124561901201211334714800]

19.margin padding border content

设置width与height是设置content。

[http://blog.sina.com.cn/s/blog\_673ee2b50100lxrb.html][http_blog.sina.com.cn_s_blog_673ee2b50100lxrb.html]

[http://www.cnblogs.com/linjiqin/p/3556497.html][http_www.cnblogs.com_linjiqin_p_3556497.html]

20.float：将文本从正常的文档流中独立出来，浮动技术在正常HMTL之上。inherit initial none left right。主要控制模块的横向排列。

[http://www.itxsk.com/show.php?contentid=2125][http_www.itxsk.com_show.php_contentid_2125]

[http://www.chinaz.com/design/2009/0910/91213\_4.shtml][http_www.chinaz.com_design_2009_0910_91213_4.shtml]

[http://www.cnblogs.com/58top/archive/2013/01/09/details\_about\_float\_property.html][http_www.cnblogs.com_58top_archive_2013_01_09_details_about_float_property.html]

21.outline和border的使用

outline是去掉文本框、按钮等被鼠标点击的控件时的出现的提示边框。

而border控制的边框是，控件本来就有的，无需鼠标点击而出现。

两者的属性值都一样，都是控制线的css样式的一些属性值。

22.css中属性与属性之间的关系：inherit 继承

initial 初始值——浏览器的默认定义值

default 默认

none 无

clear 清除

unset 找不到可继承的值，继承了浏览器的默认值

参考: [http://www.oschina.net/translate/css3-inheritance-tips-tricks][http_www.oschina.net_translate_css3-inheritance-tips-tricks]

[http://www.nowamagic.net/csszone/css\_SeletorPriorityRules.php][http_www.nowamagic.net_csszone_css_SeletorPriorityRules.php]

转载地址：[https://blog.csdn.net/jeffsmish/article/details/43612365][background-attachment]

[Center]: /images/20221123/dfa249eda79d4f85adaacddc154b6d2c.png
[background-attachment]: https://blog.csdn.net/jeffsmish/article/details/43612365
[http_blog.163.com_love_heartbreaking_blog_static_124561901201211334714800]: http://blog.163.com/love_heartbreaking/blog/static/124561901201211334714800/
[http_blog.sina.com.cn_s_blog_673ee2b50100lxrb.html]: http://blog.sina.com.cn/s/blog_673ee2b50100lxrb.html
[http_www.cnblogs.com_linjiqin_p_3556497.html]: http://www.cnblogs.com/linjiqin/p/3556497.html
[http_www.itxsk.com_show.php_contentid_2125]: http://www.itxsk.com/show.php?contentid=2125
[http_www.chinaz.com_design_2009_0910_91213_4.shtml]: http://www.chinaz.com/design/2009/0910/91213_4.shtml
[http_www.cnblogs.com_58top_archive_2013_01_09_details_about_float_property.html]: http://www.cnblogs.com/58top/archive/2013/01/09/details_about_float_property.html
[http_www.oschina.net_translate_css3-inheritance-tips-tricks]: http://www.oschina.net/translate/css3-inheritance-tips-tricks
[http_www.nowamagic.net_csszone_css_SeletorPriorityRules.php]: http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php