一, CSS 介绍和语法
二, CSS 引入方式
三, 基本选择器
四, 高级选择器
五, 伪类选择器
六, 伪元素选择器
1?? CSS 介绍和语法
1, CSS 的介绍
(1) 为什么需要 CSS?
使用 css 的目的就是让网页具有美观一致的页面, 另外一个最重要的原因是内容与格式分离 在没有 CSS 之前,
我们想要修改 html 元素的样式需要为每个 HTML 元素单独定义样式属性, 当 HTML 内容非常多时, 就会定义很多重复的样式属性,
并且修改的时候需要逐个修改, 费心费力. 而此时 CSS 就出现了.
CSS 的出现解决了以下问题:
首先, 将 HTML 页面的内容与样式的分离; 其次, 提高了 web 开发的效率.
(2) 什么是 CSS?
CSS 是指层叠样式表 (Cascading Style Sheets), 样式定义如何显示 HTML 元素, 样式通常又会存在于样式表中.
也就是说把 HTML 元素的样式都统一收集起来写在一个地方或一个 CSS 文件里.
(3)CSS 的优势
一是内容与表现分离; 二事网页的表现统一, 容易修改; 三是丰富的样式, 使页面布局更加灵活;
四是减少网页的代码; 五是运用独立页面的 CSS, 有利于网页被搜索引擎收录.
(4) 如何使用 CSS?
通常会把样式规则的内容都保存在 CSS 文件中, 此时该 CSS 文件被称为外部样式表, 然后在 HTML 文件中
通过 link 标签引用该 CSS 文件即可. 这样浏览器在解析到该 link 标签的时候就会加载该 CSS 文件, 并按照该
文件中的样式规则渲染 HTML 文件.
2,CSS 语法
(1)CSS 基础语法
CSS 语法分为两部分:
选择器和声明
声明由属性和值组成, 多个声明之间用分号隔开.
语法:
选择器{
声明 1;
声明 2;
声明 3;
}
例如:
- h2{
- color:green;
- font-size:20px;
- }
(2) 代码注释
方法:/* 代码注释写在这里 */
2?? CSS 引入方式
网页中引入 CSS 样式有三种:
1, 内联样式
2, 行内样式表
3, 外部样式表
链入式
导入式
(1) 内嵌方式
style 标签
例如:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css 的引入方式 1</title>
- <!--CSS 引入的方式一 -->
- <style>
- h2{
- color:green; /* 这是注释 */
- font-size: 20px;
- }
- </style>
- </head>
- <body>
- <div>
- <h2 > 这是二号标题 </h2>
- </div>
- </body>
- </html>
(2) 行内样式
示例如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css 的引入方式 2</title>
- </head>
- <body>
- <div>
- <p style="font-size: 30px;color:red"> 这是一个段落标签 </p>
- </div>
- </body>
- </html>
(3) 外联样式表 -- 链接式
link 标签
例如: index.css 为 css 样式表文件
index.css 文件如下
- p{
- color:pink;
- font-size:30px;
- }
然后在 HTML 文件中通过 link 标签引入, 语法: index.css"/>
示例如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css_1</title>
- <link rel="stylesheet" type="text/css" href="index.css">
- </head>
- <body>
- <div>
- <p > 这是一个段落标签 </p>
- </div>
- </body>
- </html>
(4) 外联样式表 --@import url() 方式 导入式
同样导入 index.css
语法如下:
- <style>
- @import url(index.css);
- </style>
注意:@import url() 必须写在文件最开始的位置
示例如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css_1</title>
- <style>
- @import "index.css";
- </style>
- </head>
- <body>
- <div>
- <p > 这是一个段落标签 </p>
- </div>
- </body>
- </html>
链接式与导入式的区别:
,<link/> 标签属于 XHTML,@import 是属性 css2.1
, 使用 < link/> 链接的 css 文件先加载到网页当中, 再进行编译显示
, 使用 @import 导入的 css 文件, 客户端显示 HTML 结构, 再把 CSS 文件加载到网页当中
,@import 是属于 CSS2.1 特有的, 对于不兼容 CSS2.1 的浏览器来说就是无效的
来源: http://www.bubuko.com/infodetail-2676470.html