CSS知识总结

最新推荐文章于 2025-07-22 12:55:01 发布

zerolsy

最新推荐文章于 2025-07-22 12:55:01 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html class border table stylesheet

本文链接：https://blog.youkuaiyun.com/zerolsy/article/details/2184886

CSS基础

一、样式表定义

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法结构： Selector { property: value }
参数说明：
Selector – 选择器
property : value -- 样式表定义。属性和属性值之间用冒号 (:) 隔开。定义之间用分号 (;) 隔开

选择器 可分为 HTML 选择器、类选择器、 ID 选择器。

（1） HTML 选择器：使用 HTML 本来就固有的标签来标识。如 P( 段落 ) 、 SPAN （块）。

语法： HTML 选择器 { property:value; }

< head >

P{ font-family:System;color:red;font-size:25px;}

</style>

</ head >

< body >

< p > 我是中国人</p>

</ body >

（ 2 ）类选择器 (Class) ：
语法： . 类名 { 样式规则 …}
< head >

.test{ font-family:System;color:red;font-size:25px;}

</style>

</ head >

< body >

< p class="test"> 我是中国人</p>

</ body >

</ html >

（ 3 ） ID 选择器 : 使用 HTML 元素的 ID 属性（不常用）。
语法： #ID 名 { 样式规则 …}

< head >

#IDP{ font-family:System;color:red;font-size:25px;}

</style>

</ head >

< body >

< p ID="#IDP"> 我是中国人</p>

</ body >

</ html >

二、样式表的结构
<style> 和</style>标签之间的所有内容都是样式规则。样式表一般位于<head>与</head>之间。

< head >

font-family:System;

color:red;

font-size:25px;

}

</style>

</ head >

三、样式表的分类：按其使用功能为分：行内样式表、内嵌样式表、外部样式表。
（1）行内样式表：使用style属性来定义。如果希望某段文字和其它段落的文字显示风格不一样。可选用行内样式。
<head>

</ head >

< body >

< p style="color:Red; font-style:italic;"> 我是中国人</p>

< p style="color:Blue"> 我是美国人</p>

</ body >

</ html >

（2）内嵌样式表： 内嵌样式只对某张网页起作用。它是写在<head></head>里面的。
<head>

.p1{color:Red; font-size:30px;}

.p2{color:Blue}

</style>

</ head >

< body >

< p class="p1"> 我是中国人</p>

< p class="p2"> 我是美国人</p>

</ body >

</ html >

（3）外部样式表： 如果希望多个页面甚至于整个网站所有页面都采用统一风格，可选用外部样式表。
根据样式文件与网页的关联方式，又分为两种：链接外部样式表和导入样式表。

A 链接外部样式表：
< head >

</ head >

B 导入样式表

< head >

@import mycss.css

</style>

</ head >

注意：
如果有多个样式规则用于现一个页面时，样式规则起作用的优先级别是：行内样式表（写在标签内的）>内嵌样式表（写在文档头部的）>外部样式表（在外部文件中）。

四、常用样式属性
CSS 的属性非常大，庞大的几本书都写不完，这里仅列出常用的且实用的 CSS 属性。

1 字体属性 Font ：
（ 1 ） font-style ：设置字体样式

（ 2 ） font-size ：设置字体大小

（ 3 ） font-family ：设置字体类型如 : 宋体

（4）font-weight : normal | bold | bolder | lighter | number

设置字体粗细

normal : 正常的字体。相当于 number 为 400 。声明此值将取消之前任何设置
bold : 粗体。相当于 number 为 700 。也相当于 b 对象的作用
bolder : 特粗体
lighter : 细体

2 文本属性 Text:

（ 1 ） text-align : 设置文本对齐方式。

（ 2 ） text-decoration : none || underline || blink || overline || line-through

设置文本装饰
none : 　无装饰
blink : 　闪烁
underline : 　下划线品
line-through : 　贯穿线
overline : 　上划线

3 背景属性 Background ：
（ 1 ） background-color ：设置背景颜色。

（ 2 ） background-image ：设置背景图像。 background-image: url( 图像地址 )

（ 3 ） background-repeat ：设置一个指定的背景图像如何被重复显示。

4 定位属性position （1）position : static | absolute | relative
设置对象的定位方式
     static :  默认值。无特殊定位，对象遵循 HTML 定位规则
    absolute : 将对象从文档流中流出，即将其转化为一个 “ 层 ” ，并使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
    relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

（2）z-index : auto | number
设置对象的层叠顺序。
auto : 　遵从其父对象的定位
number : 　无单位的整数值。可为负数

5 方框属性Box:
常用的方框属性有：边界属性Margin、边框属性Border、填充属性Padding。

（1）边界属性Margin：

(1-1)margin-top 设置对象的上边距

(1-2)margin-right 设置对象的右边距

(1-3)margin-bottom 设置对象的下边距

(1-4)margin-left 设置对象的左边距

（2）边框属性Border：
(2-1)border-style 设置对象的样式

(2-2)border-width 设置对象的宽度

(3-3)border-color 设置对象的颜色

（3）填充属性Padding：

(1-1)padding-top 设置对象与上边框之间的距离

(1-2) padding -right 设置对象右边框之间的距离

(1-3) padding -bottom 设置对象下边框之间的距离

(1-4) padding -left 设置对象左边框之间的距离

6 表格属性Table:

（1）border-collapse : separate | collapse

separate : 　边框独立（标准 HTML ）
collapse : 　相邻边被合并
设置或检索表格的行和单元格的边是合并在一起还是按照标准的 HTML 样式分开。

7 特殊样式

超链接样式	说明
A:link{color:red}	未被访问的链接样式
A:visited{color:green}	已被访问的链接样式
A:hover{color:yellow}	Mouse悬停在链接上时的样式
A:active{color:blue}	Mouse正在按下时链接文字的样式