CSS2 从入门到精通 (2)

可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important

4. 长度单位 1.像素 px

像素是我们在网页中使用的最多的一个单位,一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的但是这些像素点,是不能直接看见。不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。

2. 百分比 %

也可以将单位设置为一个百分比的形式,这样浏览器将会根据其父元素的样式来计算该值使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变在我们创建一个自适应的页面时,经常使用百分比作为单位

3. em

em和百分比类似,它是相对于当前元素的字体大小来计算的 1em = 1font-size 使用em时,当字体大小发生改变时,em也会随之改变当设置字体相关的样式时,经常会使用em

4. 行间距

在CSS并没有为我们提供一个直接设置行间距的方式, 我们只能通过设置行高来间接的设置行间距,行高越大行间距越大 使用line-height来设置行高 行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高, 网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示。
行间距 = 行高 - 字体大小

通过设置line-height可以间接的设置行高,
可以接收的值:
1.直接就收一个大小
2.可以指定一个百分数,则会相对于字体去计算行高
3.可以直接传一个数值,则行高会设置字体大小相应的倍数

p{ line-height: 200%; line-height: 20px; line-height: 2; }

对于单行文本来说,可以将行高设置为和父元素的高度一致, 这样可以是单行文本在父元素中垂直居中

5. 文本样式 1. text-transform可以用来设置文本的大小写

可选值:

none 默认值,该怎么显示就怎么显示,不做任何处理

capitalize 单词的首字母大写,通过空格来识别单词

uppercase 所有的字母都大写

lowercase 所有的字母都小写

2.text-decoration可以用来设置文本的修饰 可选值:

none:默认值,不添加任何修饰,正常显示

underline 为文本添加下划线

overline 为文本添加上划线

line-through 为文本添加删除线

超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline如果需要去除超链接的下划线则需要将该样式设置为none

3.letter-spacing可以指定字符间距 4. word-spacing可以设置单词之间的距离

实际上就是设置词与词之间空格的大小

5.text-align用于设置文本的对齐方式

可选值:

left 默认值,文本靠左对齐

right , 文本靠右对齐

center , 文本居中对齐

justify , 两端对齐通过调整文本之间的空格的大小,来达到一个两端对齐的目的

6.text-indent用来设置首行缩进

当给它指定一个正值时,会自动向右侧缩进指定的像素 如果为它指定一个负值,则会向左移动指定的像素, 通过这种方式可以将一些不想显示的文字隐藏起来 这个值一般都会使用em作为单位

6. 盒模型

使用width来设置盒子内容区的宽度,使用height来设置盒子内容区的高度。width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定。 内联元素不能设置 height 和 width ,如果非要设置必须修改 display 。**

1. 为元素设置边框

要为一个元素设置边框必须指定三个样式

1. border-width:边框的宽度

使用border-width可以分别指定四个边框的宽度如果在border-width指定了四个值,则四个值会分别设置给 上 右 下 左,按照顺时针的方向设置的
如果指定三个值,则三个值会分别设置给 上 左右 下
如果指定两个值,则两个值会分别设置给 上下 左右
如果指定一个值,则四边全都是该值

2.border-color:边框颜色

和宽度一样,color也提供四个方向的样式,可以分别指定颜色

3. border-style:边框的样式

none,默认值,没有边框

solid 实线

dotted 点状边框

dashed 虚线

double 双线

2. 内边距(padding)

指的是盒子的内容区与盒子边框之间的距离* 一共有四个方向的内边距,内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距.

3. 外边距

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxdwz.html