您现在的位置是：首页 > 技术教程 正文

CSS基础（超详解）

admin 阅读： 2024-04-01
后台-插件-广告管理-内容页头部广告（手机）

目录

1 css基础知识

1.1基础知识

1.1 概述

1.2 优势

1.3应用css的步骤

1.2 css基本语法

1.3 css使用方法

1.3.1 内嵌样式

1.3.2 内部样式

1.3.3 外部样式

1.3.4 使用@import引入外部样式文件

1.3.5 叠层样式优先级

1.3.6 注释

2 CSS选择器

2.1 元素选择器

2.2 类选择器 

2.3 ID选择器

2.4 包含选择器

2.5 组合选择器

 2.6 父子选择器

2.6 相邻选择器

2.8 属性选择器

2.9   通用选择器

3 CSS基本属性

 3.1 字体属性

 3.2 文本属性

3.3 背景属性

3.3.1 常见背景属性

3.3.2 css3背景渐变属性

 3.4边框属性

3.5 列表属性

 3.6 鼠标属性

4 伪类和伪元素

4.1伪类

4.2 伪元素

1 css基础知识

1.1基础知识

1.1 概述

Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

1.2 优势

  • 格式和结构分离：有利于格式的重用以及网页的修改与维护。
  • 精确控制页面布局：对网页实现更加精确的控制，如网页的布局，字体，颜色，背景等。
  • 实现多个网页同时更新。

1.3应用css的步骤

（1）定义css样式表

（2）将定义好的css样式在HTML文档中应用

1.2 css基本语法

CSS的定义是由三部分组成的，包括选择符( selector)、属性( properties)、属性值（value）语法如下：

  1. 选择器{
  2. 属性1:属性值1;
  3. 属性2:属性值2;
  4. ……
  5. }

注意：每个属性有一个值，属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时，需要用分号将每个声明分开，最后一条声明规则可以不加分号（建议每条声明的末尾都加上分号，会减少出错的可能。）


例如：

  1. h1{ /*标记选择器h1选中网页的所有<h1>标记*/
  2. color :red; /*设置文字的颜色属性为红色*/
  3. font-size:14px; /*设置文字的大小属性为14像素*/
  4. }

注意：css中/* */是注释。

如果属性值由多个单词组成是 需要用引号括起来，例如：

  1. h2{
  2. font-family: 'New Century Schoolbook' ;
  3. }

注意：

  • 包含空格不会影响CSS在浏览器中的工作效果
  • CSS对大小写是不敏感的
  • 如果涉及与HTML文档一起工作， class类选择器和id选择器对名称的大小写是敏感的。

需要使用几个属性值进行定义，每个属性值之间用逗号隔开，例如：

  1. h2{
  2. font-family: Times, ' New Century Schoolbook' ，Georgia;
  3. }

1.3 css使用方法

主要有四种方法：内嵌样式、内部样式、使用标记链接外部样式表、使用CSS的@import标记导入外部样式文件。

1.3.1 内嵌样式

内嵌样式指将CSS规则混合在HTML标记中使用的方式。CSS规则作为HTML标记style属性的属性值。例如:

<a style="color:red; font-size: 28px;">淘宝a>
  1. html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>样式使用title>
  7. head>
  8. <body>
  9. <a href="http://www.taobao.com" style="color:red; font-size: 28px;">淘宝a> <br>
  10. <a href="http://www.taobao.com" >淘宝a>
  11. body>
  12. html>

注意：内嵌样式只対其所在的标记起作用，其他的同类标记不受影响。不建以使用这种方法。

1.3.2 内部样式

内嵌样式只能定义某一个标记的样式，如果要对整个网页文档的某个标记进行特定样式定义时，就需要使用内部样式。内部样式一般是在标记中并使用