样式表总结资源-CSDN文库

2星需积分: 3 164 浏览量 2012-10-27 09:32:39 上传评论收藏 4KB TXT 举报

根据给定文件的信息，我们可以总结出以下关于CSS样式表的重要知识点： ### 一、CSS样式的引入方式 #### 1. 内联样式 (Inline Style) - **使用方法**：通过HTML元素中的`style`属性来直接指定样式规则。 - **示例**： ```html <div style="font-size:22px;border:solid 1px #F00;"></div> ``` #### 2. 内部样式 (Internal Style) - **使用方法**：将CSS代码放在HTML文档的`<head>`部分的`<style>`标签内。 - **示例**： ```html <head> <style> div { font-size: 22px; border: solid 1px #F00; } </style> </head> <body> <div></div> </body> ``` #### 3. 外部样式 (External Style) - **使用方法**：将CSS代码保存为一个单独的.css文件，并在HTML文档中使用`<link>`标签引用该文件。 - **示例**： ```html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div></div> </body> ``` 其中，`styles.css`为外部样式文件。 ### 二、选择器类型 #### 1. 元素选择器 (Element Selector) - **描述**：根据HTML元素名称来选取元素。 - **示例**： ```css div { background-color: #390; } ``` #### 2. 类选择器 (Class Selector) - **描述**：通过元素的类名来选取元素。 - **示例**： ```css .houdun { background-color: #390; } ``` #### 3. ID选择器 (ID Selector) - **描述**：通过元素的ID名称来选取元素。 - **示例**： ```css #top1 { background-color: #390; } ``` #### 4. 子选择器 (Child Selector) - **描述**：选取作为某个元素的直接子元素的元素。 - **示例**： ```css .div1 p { font-size: 22px; border: solid 1px #F00; } ``` #### 5. 组合选择器 (Combined Selectors) - **描述**：可以组合多个选择器来选取元素。 - **示例**： ```css .c1, p { font-size: 22px; border: solid 1px #F00; } ``` ### 三、文本样式 #### 1. 文本对齐方式 (Text Alignment) - `text-align: center;`（居中对齐） - `text-align: right;`（右对齐） - `text-align: left;`（左对齐） - `text-align: justify;`（两端对齐） #### 2. 垂直对齐方式 (Vertical Alignment) - `vertical-align: sub;`（下标） - `vertical-align: super;`（上标） - `vertical-align: top;`（顶部对齐） - `vertical-align: middle;`（居中对齐） - `vertical-align: bottom;`（底部对齐） - `vertical-align: 10px;`（垂直偏移量） #### 3. 字母间距 (Letter Spacing) - `letter-spacing: 2px;`（字母之间增加2像素的间距） #### 4. 单词间距 (Word Spacing) - `word-spacing: 3px;`（单词之间增加3像素的间距） #### 5. 行高 (Line Height) - `line-height: 1.5;`（设置行高的倍数） #### 6. 首行缩进 (Text Indent) - `text-indent: 2em;`（首行缩进2个字符宽度） #### 7. 白空间处理 (White Space) - `white-space: normal;`（默认换行） - `white-space: pre;`（保留空格和换行） - `white-space: nowrap;`（不换行） ### 四、边框样式 #### 1. 边框宽度 (Border Width) - `border-width: 2px;`（设置边框宽度） #### 2. 边框颜色 (Border Color) - `border-color: #F00;`（设置边框颜色） #### 3. 边框样式 (Border Style) - `border-style: solid;`（实线） - `border-style: dashed;`（虚线） - `border-style: dotted;`（点线） #### 4. 边框综合设置 (Border Shorthand) - `border: 2px solid #F00;`（同时设置宽度、样式和颜色） ### 五、背景样式 #### 1. 背景颜色 (Background Color) - `background-color: #00cc00;`（设置背景颜色） #### 2. 背景图片 (Background Image) - `background-image: url('logo.jpg');`（设置背景图片） #### 3. 背景重复 (Background Repeat) - `background-repeat: no-repeat;`（背景图片不重复显示） #### 4. 背景位置 (Background Position) - `background-position: bottom right;`（设置背景图片的位置） #### 5. 背景固定 (Background Attachment) - `background-attachment: fixed;`（背景图片固定在浏览器窗口） #### 6. 背景简写 (Background Shorthand) - `background: #00cc00 url('logo.jpg') no-repeat bottom right;`（同时设置背景颜色、图片及其属性） ### 六、表格样式 #### 1. 表格布局 (Table Layout) - `table-layout: fixed;`（表格列宽固定） #### 2. 表头位置 (Caption Side) - `caption-side: bottom;`（表头位于表格下方） #### 3. 边框合并 (Border Collapse) - `border-collapse: collapse;`（合并表格边框） #### 4. 边框间距 (Border Spacing) - `border-spacing: 10px;`（设置单元格之间的距离） #### 5. 空单元格 (Empty Cells) - `empty-cells: show;`（显示空单元格） #### 6. 表格颜色 (Table Color) - `table { color: red; }`（设置表格文字颜色） ### 七、伪类和伪元素 #### 1. 链接伪类 (Link Pseudo-Class) - `a:link`（未访问过的链接） - `a:visited`（已访问过的链接） - `a:hover`（鼠标悬停的链接） - `a:active`（激活状态的链接） #### 2. 第一行伪元素 (First Line Pseudo-Element) - `p::first-line`（选择段落的第一行） #### 3. 第一个字母伪元素 (First Letter Pseudo-Element) - `p::first-letter`（选择段落的第一个字母） #### 4. 第一个子元素伪类 (First Child Pseudo-Class) - `h1:first-child`（选择父元素下的第一个`<h1>`元素） #### 5. 直接子元素伪类 (Child Pseudo-Class) - `div.d1 > h1:first-child`（选择类名为`d1`的`<div>`元素下的第一个`<h1>`元素） ### 八、滚动条样式 #### 1. 滚动条面部颜色 (Scrollbar Face Color) - `SCROLLBAR-FACE-COLOR: #333;`（滚动条面部的颜色） #### 2. 滚动条高亮颜色 (Scrollbar Highlight Color) - `SCROLLBAR-HIGHLIGHT-COLOR: #666;`（滚动条高亮颜色） #### 3. 滚动条阴影颜色 (Scrollbar Shadow Color) - `SCROLLBAR-SHADOW-COLOR: #999;`（滚动条阴影颜色） #### 4. 滚动条3D亮色 (Scrollbar 3D Light Color) - `SCROLLBAR-3DLIGHT-COLOR: #CCC;`（滚动条3D亮色） #### 5. 滚动条箭头颜色 (Scrollbar Arrow Color) - `SCROLLBAR-ARROW-COLOR: #000;`（滚动条箭头颜色） #### 6. 滚动条轨道颜色 (Scrollbar Track Color) - `SCROLLBAR-TRACK-COLOR: #FFF;`（滚动条轨道颜色） #### 7. 滚动条暗影颜色 (Scrollbar Dark Shadow Color) - `SCROLLBAR-DARKSHADOW-COLOR: #333;`（滚动条暗影颜色） #### 8. 滚动条基本颜色 (Scrollbar Base Color) - `SCROLLBAR-BASE-COLOR: #AAA;`（滚动条的基本颜色） ### 九、溢出样式 (Overflow) #### 1. 自动处理 (Auto) - `overflow: auto;`（自动处理溢出内容，当内容超过容器尺寸时显示滚动条） #### 2. 水平滚动 (Scroll Horizontal) - `overflow-x: scroll;`（水平方向上始终显示滚动条） #### 3. 垂直滚动 (Scroll Vertical) - `overflow-y: scroll;`（垂直方向上始终显示滚动条） ### 十、列表样式类型 (List Style Type) #### 1. 实心圆 (Disc) - `list-style-type: disc;`（列表项目符号为实心圆） #### 2. 圆形 (Circle) - `list-style-type: circle;`（列表项目符号为圆形） #### 3. 方块 (Square) - `list-style-type: square;`（列表项目符号为方块） #### 4. 数字 (Decimal) - `list-style-type: decimal;`（列表项目符号为数字） #### 5. 小罗马数字 (Lower Roman) - `list-style-type: lower-roman;`（列表项目符号为小写罗马数字） #### 6. 大罗马数字 (Upper Roman) - `list-style-type: upper-roman;`（列表项目符号为大写罗马数字） #### 7. 小写字母 (Lower Alpha) - `list-style-type: lower-alpha;`（列表项目符号为小写字母） #### 8. 大写字母 (Upper Alpha) - `list-style-type: upper-alpha;`（列表项目符号为大写字母） #### 9. 无标记 (None) - `list-style-type: none;`（列表项目无任何标记）以上就是根据提供的内容总结出的CSS样式表的关键知识点。这些知识点涵盖了CSS中常用的样式设定方法以及各种选择器的应用，对于学习和掌握CSS具有重要的指导意义。

资源推荐

资源详情

资源评论

三种样式表：
1.内联式(style属性)
2.嵌入式
3.引用式(link引用)

CSS选择器：
1.HTML选择器:定义html标签
<style>
div{font-size:22px;border:solid 1px #F00;}
body { background-color:#FF0; padding-left:100px; padding-top:80px;}
</style>

2.Class选择器:以.开始
<style>
.houdun { background-color:#390;}
</style>
3.ID选择器:以#开头
<style>
#top1 { background-color:#390;}
</style>
<div id='top1'>
</div>
4.关联选择器:
<style>
.div1 p{font-size:22px;border:solid 1px #F00;}
</style>
<div class="div1">
<p></p>
</div>
5.组合选择器:中间用,号