css 知识点总结

css知识点总结

1.从css样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部链接式三种。

a.内联式css样式：

 <p style="color:red;font-size:12px">这里文字是红色。</p>

b.嵌入式css样式：

<style type="text/css">
    span{
         color:red;
    }
</style>

c.外部链接式css样式：

<link href="base.css" rel="stylesheet" type="text/css" />

2.样式的优先级：

基本选择器之间：ID选择器>类选择器>标签选择器；

样式表之间:行内样式>内嵌样式>外部样式；

css样式之间:在同一个选择器中，两条相同的声明，后一条会覆盖前一条样式；

3.设置最高优先级：

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高优先级，我们可以使用!important来解决。

p{color:red!important;}

注意：!important要写在分号的前面。

4.文字的一些特殊属性：

a.font-style属性 normal - 文本正常显示； italic -文本斜体显示； oblique - 文本倾斜显示。

b.font-variant 属性设置小型大写字母 font-variant:small-caps;

c.font-size-adjust属性设置不同的字体大小 font-size-adjust:0.60;

5.段落的一些属性：

a.缩进 text-indent:2em; 注意：2em的意思就是文字的2倍大小；

b.文字间隔、字母间隔设置 letter-spacing:5px;

c.单词间距设置 word-spacing:5px;

d.文字两端对齐 text-align:justify；

e.删除文本修饰 text-decoration:none;

f.设置文本中间划线 text-decoration:line-through;

g.文本阴影 text-shadow: x y shadow color; 该属性可以有4个值，其中前2个是必需的值，用来指定阴影的延伸距离，值为长度值，并且允许负值，其中 x 是水平阴影的偏移值，y 是垂直阴影的偏移值。最后2个值都是可选的，shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。color 指定阴影的颜色。

h.文本转换:text-transform:capitalize; 定义文本中的每个单词以大写字母开头。

text-transform:uppercase; 定义文本仅有大写字母;

text-transform:lowercase; 定义文本仅有小写字母;

6.背景属性：

a.背景图像是否固定或者随着页面的其余部分滚动 background-attachment:fixed;

b.设置背景的起始位置 background-position:10% 10%;

c.设置背景图像显示一次 background-repeat:no-repeat;

7. css布局模型

在网页中，元素有三种布局模型：流动模型、浮动模型、层模型；

a.流动模型：流动（Flow）是默认的网页自上而下的布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动模型的两个特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。内联元素标签a、span、em、strong都是内联元素。

b.浮动模型：任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

c.层模型：像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。

层模型有三种形式：

绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)

猜你喜欢