CSS学习笔记

最新推荐文章于 2025-08-22 15:07:29 发布

原创最新推荐文章于 2025-08-22 15:07:29 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #div #border #table #html #文档

CSS 专栏收录该内容

1 篇文章

订阅专栏

rel="File-List" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"> rel="themeData" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"> rel="colorSchemeMapping" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml">

CSS学习笔记：

属性：

Writing-mode：可以支持汉字的竖行显示，只支持IE

Direction:可以配合unicode-dibi使用，来支持firefox和IE的文字的方向。

White-space：normal文本到了文末自动换行，nowrap显示 和<br>，而pre则显示所有的空格和回车，不做清理。需要IE6以上支持。

Clear：可以清除float对象的left，right或者两者都清除。

Float：如何浮动，有left和right属性。

Clip：用来对对象进行剪切，rect属性的四个数字分别是图片的上边、右边、下边、左边相对左上角的偏移量。

Overflow：默认是visible，但是如果显示声明，则这个对象将以包含这个对象的window或者frame的尺寸进行剪裁，此时clip的设置没有用了。如果设置称hidden，则不显示超过对象尺寸的内容。如果设置成scroll，则总是显示滚动条。

Display：用来显示。其中块对象的默认是block属性，将对象强制成为块对象，为对象之后添加新行。而none属性则是隐藏对象，但是他为对象保留其物理空间，而visibility中的hidden则不会对想保留物理空间。内联对象的默认值是inline，将对象强制成为内联对象，从对象中删除行。List-item使用来将块对象指定为列表项目，并可以添加可选项目标志。Inline-block是讲一个对象当做块对象来看，同事旁边的内联对象也会归结到同一行里面。

Visibility：其中collapse对象ie不支持，其和hidden的差别是隐藏的行或者列能够被其他内容实用，而hidden则是完全的隐藏，visible则是是对象可见，默认是inherit，继承父对象的可见性。

Cursor：指定鼠标的形状，可以使十字键什么的。

和table有关的：

Border-collapse：相邻表格之间的border是否独立显示还是合并，有separate和collapse属性，前者默认。后者合并。

Border-spacing：两个表格之间的border的距离

Caption-side：设置表格的说明。

Empty-cells当表格里面的内容为空的时候，如果设置的是show（默认）则表格的边框依旧显示，否则不显示边框（设置称hide）

Table-layout：默认是auto，机会根据里面的内容改变table的宽度，如果设置成fixed，则会变成固定宽度，对于很长的表格，设置成fixed可以提高性能。

选择符：

通配选择符：

例如*.div{text-decoration:none}所有的div属性都设置。

类型选择符：

例如td{ font-size:14px}

a{text-decoration:none}

属性选择符：
E [ attr ] { sRules } 选择具有attr属性的e

E [ attr = value ] { sRules } 选择具有attr属性且属性等于value的e

E [ attr ~= value ] { sRules }选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E

E [ attr |= value ] { sRules }选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E

例如：div[speed=”fast”] {color:red}

包含选择符：

例如：table td{ font-size:20px};

div.sub a{font-size:14px}

子对象选择符：

例如: body > p{font-size:40px;}所有作为body的子对象的p对象字体尺寸为40px

类选择符：

div.note{font-size:14px;}所有class属性值等于或者包含‘note’的div对象字体设置成14px

选择符分组：

.td1,div a,body{font-size:14px}即他们几个用同样一个属性

伪类及伪对象选择符：

伪类有：

:link

:hover

:active

:visited

:first-child第一个子对象

伪对象：

:after

:first-letter第一个字母

:first-line第一行

:before

一些常用规则：

@import url导入外部样式文件

例如：@import url(“foo.css”);

@charset设置字符集

例如：charset “UTF-8”;

@font-face设置潜入html文档的字体，这样可以能够在网页上使用客户端本地系统上可能没有的字体。

例如：@font-face{font-family:comic; src:url(http://valid_url/some_font_file.eot);

@fontdef 设置嵌入到html文档的字体

例如：@fontdef url(http://www.example.com/sample.pfr);

@page 设置页面容器的版本，方向，补丁等。

@media指定设备类型

例如: @media screen{ body {font-size:12pt;}}设置显示器用字体的尺寸

声明：

!important提升制定样式规则的应用优先权

例如：div{color:red!important}

模式	含义	定义在
*	匹配任意元素。	全局选择子
E	匹配任意E元素（即类型为E的元素）。	类型选择子
E F	匹配E元素后代的任意F元素。	派生选择子
E > F	匹配E元素子元素的任意F元素。	子选择子
E:first-child	当元素E是其父元素的第一个子元素时，匹配E元素。	:first-child伪类
E:link E:visited	当元素E是一个超连接的链时，如果目标还未被访问（:link）或已经访问（:visited）时，匹配元素E。	连接伪类
E:active E:hover E:focus	在特定的用户行为时，匹配E。	动态伪类
E:lang(c)	匹配E类型的元素，如果它以（人类）语言c写成（文档语言规定如何确定语言）。	:lang()伪类
E + F	匹配任意F元素，如果紧接在前的是E元素，且他们的父亲节点相同	相邻选择子
E[foo]	匹配任意E元素，如果它设置了"foo"属性（不管值是什么）。	属性选择子
E[foo="warning"]	匹配任意E元素，如果它设置了"foo"属性，并且属性值为"warning"。	属性选择子
E[foo~="warning"]	匹配任意E元素，如果它的"foo"属性值是一个以空格分割的列表，且其中之一为"warning"。	属性选择子
E[lang\|="en"]	匹配任意E元素，它的"lang"属性值是一个以连字号分割的列表，并且以"en"开头（从左到右算）。	属性选择子
DIV.warning	仅对HTML适用。和DIV[class~="warning"]。	类选择子
E#myid	匹配任何其ID为"myid"的E元素。	ID选择子