CSS学习总结：掌握CSS样式规则和使用方式

需积分: 9 188 浏览量更新于2024-07-14 收藏 2.08MB DOCX 举报

CSS学习总结 CSS（Cascading Style Sheets），中文名为“层叠样式表”，是用于表现HTML或XML等文件式样的计算机语言。它可以对网页的布局、字体、颜色、背景和其他效果实现更加精确的控制。 1. CSS简介 CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表。它是一种用来表现HTML或XML等文件式样的计算机语言。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 2. 什么是CSS？ CSS是一种标记语言，用于描述网页的样式、布局和格式。它可以将网页的内容与表现分离，使网页的设计和开发变得更加灵活和高效。 3. CSS的用途 CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。它可以实现： * 布局控制：控制网页的布局、宽度、高度等。 * 字体控制：控制网页的字体、字号、颜色等。 * 颜色控制：控制网页的背景颜色、字体颜色等。 * 背景控制：控制网页的背景图片、背景颜色等。 4. CSS初试 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。例如： h1 { color:red; font-size:14px; } 在上面的例子中，h1是选择器，color:red; font-size:14px; 是声明。 5. CSS注释 CSS注释是用于注释CSS代码的特殊符号。例如： /* h1 { */ /* color:red; */ /* font-size:14px; */ /* } */ 在上面的例子中，/* 和 */ 是CSS注释符号，用于注释CSS代码。 6. CSS样式的三种使用方式 CSS样式可以通过三种方式使用：内链样式表、嵌入式样式表和外链样式表。 6.1 内链样式表内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下： <h1 style="color:red; font-size:28px">码海无际</h1> 6.2 嵌入式样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1 { color:red; font-size:14px; } </style> </head> <body> <h1>码海无际</h1> </body> </html> 6.3 外链样式表外链样式表是将CSS代码写在一个独立的文件中，并将其链接到HTML文档中。其基本语法格式如下： <link rel="stylesheet" type="text/css" href="style.css"> 在上面的例子中，style.css是CSS文件的名称。

%4-

%4-

%5-

%;-

%;./"8/-

%"-码海无际%4"-%&有效果-

%4;-

%;-

%"-码海无际%4"-%&无效果-

%4;-

%"-

%;./"8/-

%"-码海无际%4"-%&无效果-

%4;-

%4"-

%4;-

%45-

%4,-



4）后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写

在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层

标签的后代。

包含孙子、重孙子之类

%&'()*+,-

%,.//-

%-

%,./012/-

%3-%43-

%-

;

5<

$

%4-

%4-

%5-

%;-

%-码海无际%4-

%"-

%-码海无际%4-

%4"-

%4;-

%45-

%4,-



5）伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。

伪类对象要配合  属性一起使用。

一个冒号是  的写法，两个冒号是  的写法，表达的意思一样。

冒号的前面和后面都不允许有空格。

选择器示例示例说明

8 "<8 选择所有选中的表单元素

5 "<5 选择所有禁用的表单元素

," "," 选择所有没有子元素的 " 元素

5 "<5 选择所有启用的表单元素

B" "B" 选择的每个 "元素是其父元素的第一个 "元素

 "< 选择元素指定范围内的值

; "<; 选择所有无效的元素

" 选择所有 " 元素的最后一个子元素

" "" 选择每个 " 元素是其母元素的最后一个 " 元素

?@ ?"@ 选择所有 " 以外的元素

?@ "?@ 选择所有 "元素的父元素的第二个子元素

?@ "?@ 选择所有 " 元素倒数的第二个子元素

"?@ ""?@ 选择所有 " 元素倒数的第二个为 " 的子元素

"?@ ""?@ 选择所有 " 元素第二个为 " 的子元素

" "" 选择所有仅有一个子元素为 " 的元素

 " 选择所有仅有一个子元素的 " 元素

"3 "<"3 选择没有/C</的元素属性

< "<< 选择指定范围以外的值的元素属性

 "< 选择只读属性的元素属性

D "<D 选择没有只读属性的元素属性

C< "<C< 选择有/C</属性指定的元素属性

 选择文档的根元素

 =D 选择当前活动=D 元素?点击 0E 包含锚的名字@

; "<; 选择所有有效值的属性

8 8 选择所有未访问链接

; ; 选择所有访问过的链接

3; 3; 选择正在活动链接

; ; 把鼠标放在链接上的状态

< "<< 选择元素输入后具有焦点

BF "BF 选择每个 " 元素的第一个字母

B "B 选择每个 " 元素的第一行

B "B 选择器匹配属于任意元素的第一个子元素的 "元素

5 "5 在每个 " 元素之前插入内容

G "G 在每个 " 元素之后插入内容

?<@ "?@ 为 " 元素的  属性选择一个开始值

%&'()*+,-

%,.//-

%-

%,./012/-

%3-%43-

%-

;



$

"5

/* 前面/



$

"G

/* 后面/



$

%4-

%4-

%5-

%./F"44DDD5,/-淘宝%4-

%./F"44DDD5<,/-百度%4-

%./F"44DDD5,/-淘宝 %4-

%./F"44DDD5,/-淘宝 %4-

%-

%"-* 元素%4"-

%45-

%4,-

剩余63页未读，继续阅读

土戈

粉丝: 298
资源: 77

CSS学习总结：掌握CSS样式规则和使用方式

CSS 学习总结.docx

CSS学习笔记.docx

HTMLl5+CSS总结笔记.docx

JavaWeb学习总结.docx

客户端学习总结.docx

HTML-JS-CSS 总结.docx

HTML5学习总结.docx

HTML入门学习总结.docx

html和css知识点总结.docx

2022年客户端学习总结.docx

最新资源