CSS基础

来源：互联网发布：淘宝客贷入口编辑：程序博客网时间：2024/06/15 17:32

1. CSS简介

CSS（Cascading Style Sheets），即层叠样式表。

CSS可以快速维护页面元素（如表格、文本、链接、图像等）的样式（如宽度、高度、字体、字号、颜色等）。

W3C建议尽量使用CSS样式取代HTML属性。

2. CSS的使用方式

外部样式（引入外部的CSS文件）
内部样式（书写于文档的内部，以style标签进行标识）
内联样式（书写于标签的内部）

三种使用方式的优先级为：外部样式最低，内部样式其次，内联样式最高。（前两种的优先级和它们在文件中的位置有关）。

3. 选择器

选择器（Selector）：告诉Web页面，哪些HTML元素将使用规定的样式。

通配选择器： * （自动应用于所有的HTML元素）
标记选择器：标记名称（自动应用于指定的元素）
类选择器： .类名称（添加class=”类名称”，多个类名称之间用空格分隔）
id选择器： #id名称（添加id=”id名称”，只能应用于唯一元素）
群组选择器：选择器1,选择器2,… （具有相同样式的CSS选择器的简写
派生选择器（后代选择器）：选择器1 选择器2 …（选择器1和选择器2至少是父子关系）
子代选择器：选择器1>选择器2>… （选择器1和选择器2必须是父子关系）

伪类/伪元素选择器

:before:after:link:hover:active:visited:focus

4. 常用的尺寸单位

% 百分比
px 像素
em 相较于当前字体大小的倍数
rem 相较于根元素html字体大小的倍数

5. 外边距

margin:value; (只给一个值，表示四个方向的外边距相同)margin:value value;（给两个值，第一个值表示上下，第二个值表示左右）margin:value value value;(给三个值，第一个值表示上，第二个值表示左右，第三个值表示下）margin:value value value vlaue;(给四个值，分别表示上，右，下，左）

小技巧： 块级元素的水平居中 margin:0 auto;

5. display 属性

值描述 none 此元素不会被显示。（不保留所在空间） block 此元素将显示为块级元素，元素前后会带有换行符。 inline 默认。此元素会被显示为行内元素，元素前后没有换行符。 inline-block 行内块元素。 inherit 从父元素继承 display 属性的值。

以下的HTML元素默认为块级元素：

p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd

块级对象的默认宽度为父元素的100%。

6. 首行缩进

语法：text-indent:value

text-indent:2em;  # 首行缩进2个字符。

7. 行高

语法：line-height:value

line-height:1.5em;# 行高一般为字体大小的1.5倍到2倍（1.5em-2em）

8. 文本的水平对齐

语法：text-align:value

text-align:center;# 文本水平居中

9. 浮动

描述：设置对象的浮动

语法：float:none|left|right|inherit

说明：

元素如果存在float:left;样式，那么该对象将尽量向左浮动，直到遇到第一个浮动对象的右边界。
元素左浮动或右浮动时，会脱离标准的文档流，而且该元素的高度已经无法影响到父元素的高度。
浮动元素会生成一个块级框，而不论它本身是何种元素。

10. 清除浮动

语法：clear:left|right|both

常见的清除浮动的代码：

.clear:after{    display:block;    content:".";    height:0;    clear:both;    visibility:hidden;}

11. 定位

position 属性规定元素的定位类型。

语法：position:static|fixed|relative|absolute|inherit

任何元素都可以定位。
绝对或固定定位的元素会生成一个块级框，而不论该元素本身是什么类型。
相对定位的元素会相对于它在正常流中的默认位置进行偏移。

值描述 static 默认值。没有定位，元素出现在正常的文档流中（忽略 top、right、bottom、left和z-index 声明）。 fixed 固定定位。脱离文档流，相对于浏览器窗口进行定位，通过TRBL调整其位置。主要用于设置页面顶端或底部的固定区域，拖动滚动条时，不会随滚动条滚动。 absolute 绝对定位。脱离文档流，相对于非 static 定位的第一个祖先元素进行定位，通过TRBL调整其位置。如果没有的话，就相对于body。主要用于设置遮罩层。 relative 相对定位。没有脱离文档流，相对于该元素在正常文档流中的位置进行定位，通过TRBL调整其位置。 inherit 从父元素继承 position 属性的值。

常常把祖先元素的position属性设置成relative（这样并不会影响祖先元素在页面中的位置），然后把子元素设置成absolute，根据这种技巧来制作下拉菜单或浮动图标。

12. z-index 属性

设置元素的堆叠顺序。拥有更高堆叠顺序的元素会处于堆叠顺序较低的元素的上层。

注意： z-index 属性仅能在定位元素上奏效。

13. 透明度

opacity:value(0-1);# Chrome、Fixfox等浏览器filter:alpha(opacity=value);  # IE浏览器，value的取值范围是0-100

阅读全文

0 0