CSS样式表详解：从基础到高级应用

需积分: 3 52 浏览量更新于2024-09-13 收藏 4KB TXT 举报

"层叠样式表（CSS）是用于控制网页元素呈现方式的样式语言，主要功能包括元素的布局、颜色、字体、尺寸等。本文将对CSS的一些基本概念和用法进行总结，帮助读者更好地理解和应用CSS进行网页设计。" 在CSS中，有多种方式来添加样式： 1. **内联样式** (style)：直接在HTML元素内部使用`style`属性定义样式，如`<div style="font-size:22px;border:solid 1px #F00;">`。这种方式只会影响当前元素。 2. **内部样式表** (head内的style)：在HTML文档的`<head>`部分定义`<style>`标签，可以为整个页面或指定的HTML元素设置样式，例如： ```html <head> <style> div { font-size: 22px; border: solid 1px #F00; } body { background-color: #FF0; padding-left: 100px; padding-top: 80px; } </style> </head> ``` 3. **外部样式表** (link引用CSS)：通过`<link>`标签链接外部CSS文件，可以实现样式复用和页面间的样式统一，例如： ```html <link rel="stylesheet" type="text/css" href="styles.css"> ``` 在选择器方面，CSS提供了多种方法定位和应用样式： - **类选择器** (.class)：通过`.`前缀指定类名，如`.houdun`，可应用于多个具有相同类名的元素。 - **ID选择器** (#id)：通过`#`前缀指定ID名，如`#top1`，每个ID在页面中只能出现一次。 - **元素选择器** (element)：直接使用元素名称，如`div`，会影响到所有该类型的元素。 - **后代选择器** (space)：使用空格分隔，如`.div1 p`，表示选择`.div1`元素内的所有`p`元素。 - **子元素选择器** (>)：使用`>`分隔，如`div > p`，仅选择直接子元素。 - **通配符选择器** (*)：`*`可以匹配任何元素，常用于全局样式重置。此外，CSS还支持属性选择器，例如： ```css .c1, p { font-size: 22px; border: solid 1px #F00; } ``` 以及伪类选择器，如： ```css a { font-size: 12px; } a:hover { color: #ccc; } ``` 伪类选择器如`:hover`、`:active`、`:focus`等，可以改变元素在特定状态下的样式。 CSS中的文本样式包括： - `text-align`：设置文本水平对齐，如`center`、`right`、`left`、`justify`。 - `vertical-align`：控制元素的垂直对齐，如`sub`、`super`、`top`、`middle`、`bottom`或指定像素值。 - `letter-spacing`：调整字符间距。 - `word-spacing`：调整单词间距。 - `line-height`：设置行高，影响多行文本的排列。 - `text-indent`：首行缩进。 - `white-space`：处理空白字符，如`normal`、`pre`、`nowrap`等。边界样式包括： - `border-width`：设置边框宽度。 - `border-color`：设置边框颜色。 - `border-style`：设置边框样式，如`solid`、`dashed`、`dotted`。 - `border-radius`：圆角边框。 - `border`：简写属性，一次性设置边框的宽度、样式和颜色。尺寸属性： - `width` 和 `height`：分别设置元素的宽度和高度。背景属性： - `background`：简写属性，可以设置背景颜色、图像、重复方式等。以上只是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.组合选择器:中间用,号

剩余5页未读，继续阅读

lan1412

粉丝: 0
资源: 11

CSS样式表详解：从基础到高级应用

CSS层叠样式表

CSS3样式表- 层叠样式表种类.pptx

多媒体技术-----层叠样式表CSS

css样式表，css滤镜，层叠样式表

CSS层叠样式表手册

CSS 层叠样式表手册

CSS层叠样式表.pdf

javascript 动态修改样式和层叠样式表代码

CSS层叠样式表帮助文当

CSS 层叠样式表手册 v1.10

最新资源