css部分总结

css中的一些属性：

1、fond-famliy：选择字体。eg：fond-famliy：方正静蕾简体；

网页显示：



显然不是方正静蕾字体显示的，是以默认的字体呈现的，因为我电脑没装该字体，其中一个解决办法是使用备选字体。

eg：fond-famliy：方正静蕾简体，微软雅黑，宋体；

2、color：字体颜色，其值表示法：英语单词、#十六进制、RGB（极为少用）。

color：rgb(100% 50% 100%);

或 color:rgb(255 128 255);(0~255的数)

3、fond-size：字体大小，新闻的正文一般采用14号字（14px）或者12号。其值表示形式：像素（10px）、百分数（100%相当于16号字）、行长（em,,首行缩进时用）。

4、Fond-style：字体的样式，其值有斜体italic（在设计的情况下，经过柔化变斜）或oblique（没设计的情况下强制使字体变协），normal（正规字体，不倾斜）。

5、fond-weight：粗体，值为bold、normal。

6、text-transform:大小写（英文字母），值有lowercase（小写）、uppercase（大写）。

7、text-decoration:用来设置连接超链后是否带有下划线，它 的值 有underline（有下划线）、none（无下划线）、overline（上划线）、linethrough（删除线）。如果想同时要三种效果text-decoration:underline overline linethrough；

8、letter-spacing:设置字母之间间距的属性，值为正数时（如5px）增加字母间间距，值为负时（如-5px）减少字母间间距。

9、word-spacing：设置单词之间的间距，值为正数时（如5px）增加单词间间距，值为负时（如-5px）减少单词间间距。

10、line-height：控制行与行之间的距离，（word里最合适的行间距是1.5倍行间距）。其值有像素、百分比、行长（em）、小数（eg：1,.5相当于150%）。但虽好使用行间距，因为行间距是根据字体的大小自动调整行间距的。

11、text-align用来设置文本的对齐方式，其值有left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）。

12、text-indent：首行缩进,使用形式 text-indent：2em；（单位em：行长，1em表示一个汉字占的空间大小）

13、list-style-type:列表（分条陈述）前的符号，值分下面2种情形

●列表（分条陈述）前的符号表示法：disc:表示实心圆项目符号；circle：表示空心圆项目符号；square：实心方形项目符号

●列表前的六种数字方案：decimal：十进制；decimal-leading-zero：十进制前面置零（ie浏览器不支持、火狐支持）；upper-alpha：大写字母；lower-alpha：小写字母；upper-roman：大写罗马字母；Lower-roman：小写罗马字母

14、list-style-positin：控制列表前的符号在文档内还是外

它的值有：inside、outside

15、list-style-image：在列表前加图标，其值的组成：url (图片路径)，eg list-style-image：url（../flag.png）；(../表示上级路径),当list-style-image与list-style-type同时存在时，后者不起作用。

16、边框的设置

①当这几个都要设置且值相同时，直接设border：10px；

②border：上值 右值 下值 左值；

③border：10px（上下直） 20px（左右值）；（在上下值相同，左右值相同时用）；

④当要三个边框时，另一个边框（假如下边框）设border-bottom：none；这时边框下线就会消失。

⑤ border-left：10px; border-right:10px;

border-top:10px;border-bottom:10px;

Padding、margin也有top,bottom,left,right的设置，设网页时，距离按左上角开始算，一般设body的margin：0px；（写在head的style标签内，用标签选择器写，标签选择器名为body），这样可以使网页紧挨着地址栏。

●Css的盒模型（box model），它规定了html5中的所有元素（如p、pre、div、tr标签）,每个标签又包括content（内容）、边框（border）、padding、margin这几个元素。这些元素都有边框，边框与边框之间的距离称padding，标签与标签之间距离称为margin。



所有的标签都能设置背景颜色、背景图片；border的值有三部分组成（宽度、样式（实、虚线等）、颜色），值之间的顺序不定，eg： border：2px solid red;

border样式主要有solid、dotted、dashed（虚线）、double、groove、ridge、inset、outset、none、hidden，其实目前只能实现前三种。border、margin可以调其上下左右的值。

●盒模型中的这些元素对像素的影响：

①Border的宽度像素值会影响整个标签的边框大小

Eg：border：1px blue solid;时



当border：10px blue solid；时，明显变宽，



在做网页时，页面的大小设置好后值不会再改变，如果因为border宽度的像素变大引起整个标签框架变大会导致页面的浮动乱码，所以要使标签的边框大小保持和原来一致，这时我们设标签边框的宽=原来的宽 —2*border的宽度，高=原来的高 —2*border的宽度。

设置前的代码：



设置后的代码：



设置后标签边框的变化



②padding也会影响标签边框的大小，和border类似，这里不再多写。但margin不会影响边框的大小。

●有时要设边框的某一边的值（假如右边），我们可以做这些设置



17、background-color：边框背景色

18、Height：10px；边框高 width：10px；边框宽

●当标签间的距离发生碰撞时，距离间不会相加，会以最大的值作为距离。

●给文档中的某些字（如泡芙）加强调：在替换中将要强调的字查找出来，替换为带标签的（如<haha>泡芙</haha>），然后在head中对该标签进行设置。但这些标签元素的padding：10px：时对上下不起作用，margin：20px；对上下不起作用。

未操作前：



加标签后



然后我们设置padding:10px;可以看到对上下不起作用



设置margin：20px；可以看到也对上下不起作用



出现上况的原因在于标签的类别不同，因有下面的划分

●标签元素的划分：块级元素、行内元素；大多数情况下，css对待块级标签和行内标签是相同的，但对margin和padding不同，块级标签margin和padding的上下左右都可用，而行内标签只有左右可用。

块级元素在网页里一占占一行，可以使用padding、margin的上下左右，常用的块级标签有div、p、h1~h6、表格、列表。

行内元素无论有几个在网页上都会连着出现一行占完再占另一行，不会自动换行，它的padding、margin只能使用左右，常见的行内标签有strong（加粗）、span、em、img、超链接及创建表单的各种标签。

19、display：设置块级标签和行内标签，通过设置可使行内标签和块级标签间相互转换。值有inline、block、none，

inline是转换为行内标签，如下图



block是转换为块级标签， 如下图



当值为none时，元素会被隐藏起来不予显示。变成下图



我们经常在网页上看到广告图片不断的变化，其实他就是通过隐藏来实现的。

●溢出

当内容过多超出边框边界时，以边框的宽度为基准自动换行不重叠直到内容结束，不顾边框的存在的现象。（自己的理解，没查到标准的解释,IE6中具有超强纠错戳出的部分不予显示）



20、overflow：在css中解决溢出的属性，它的值有visible、scroll、auto、hidden四个。

①Visible：默认，内容该怎么出现就怎么出现，我行我素。

②Scroll：添加滚动条，可以上下滚动。成下图样子，下边出现左右滚动条但没用



③Auto：根据是否需要滚动条，自动加上。不需要的滚动条不显示。



④hidden：将溢出的部分隐藏起来，可有时会出现半截字，这时通过设置边框高来控制或者对字体进行要求来避免。（每个字的像素默认16px）



⑤我们可以将height这个属性删掉，这样边框会随内容的增加而增加（并不是所有浏览器都会出现岁内容增加而增加的效果）。代码设置如下



结果如下：



⑥当结果不是预期效果时，我们设height：auto； overflow：auto；eg：



21、background-image;给边框加背景图片，默认情况下是平铺。

插入的图片：



代码：记住图片路径写在url后面括号中



出现的效果：



22、background-repeat:设置图片出现的形式，它的值有repeat，repeat-x\repeat-y、no-repeat四个。Repeat是平铺效果；repeat-x是横铺效果；repeat-y是纵铺效果。

①Repeat-x时效果;



②Repeat-y时的效果：



③no-repeat时的效果：



23、background-position：控制图片的位置，它的值有center（居中）、right center（靠右居中）、bottom center（）靠下居中、-50px 70px（精确地定位）、50% 50%等值，这个控制位置与text-align区别在于前者是控制背景后者控制内容中的图片。当设代码为：



此时出现的效果：



其实网页上的图片为了减少请求访问数据带来的字节消耗，将网页上好多图片整在一张图片上，通过backgroud-position配合边框大小的设置，使相应位置出现想要的图片。比如google的logo，原图为：



当我写代码如下时：



将出现下面的效果：



与网页上出现的比比，一样吧，呵呵！



●超链接



其中的a标签是行内标签。

大部分浏览器支持浏览器的四个连接状态：未访问的链接、已经被访问过的链接、鼠标正停在上面的链接、正点击时的链接，这四个状态对应于四个伪类选择器，分别为：link ：visited ：hover ：active



●如何使超链中字体居于边框中部

方法一：设置text-align:center;因超链是行内标签上下不会居中，所以再通过padding来调至于居中。

方法二：将边框的height的像素值和line-heght的像素值设成一样

●当我们利用display将超链变为快标签后，在body中复制成三个超链，会有如下效果：



很明显中间的边框线像素比其他的边框像素要高，我们可做如下处理使各边框线像素相同，从而更加美观。



处理后如下图：



●经常我们在body中写标签div，div没有特殊含义，它只相当一个容器代表一个层，属于块级标签，在该标签内添加内容，以后做网页会经常遇到。

●css的注释：/*……*/