当前位置：首页 > 行业知识 > CSS基础（超详解）

行业知识

CSS基础（超详解）

2026-11-08 15:50:09 来源：互联网转载

��录

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:属性值1;    属性2:属性值2;    ……    }

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

在CSS3中可以通过border-radius属性为元素增加圆角边框，语法如下:

border-radius :像素值|百分比

例如：

边框样式#circle{width: 110px;height: 110px;border-radius: 50%;          border: 10px solid red;background: yellow;}#circle2{width: 110px;height: 110px;border-radius: 30px;   border: 10px solid red;background: yellow;}

结果：

3.5 列表属性

常用的列表属性:list-style-type 、list-style-image、 list-style-position以及list-style

其中，list-style-type属性用于设置列表项标记的类型，主要有disp (实心圆)、circle (空心圆)、square (实心方块)、none (不使用项目符号) ;list-styl-image属性用于设置使用什么图像作为列表符号;list-style-position属t用来指定列表符号的显示位置，当值为outside时，表示将列表符号放在文本块之外，该值为默认值，当值为inside时，表示将列表符号放在文本块之内。

例:制作一个横向导航菜单

列表样式#box{background-color: pink;           /*设置背景颜色*/margin: 0 auto;                  /*设置p块的标记自动水平居中*/height: 40px;                   /*  设置高度属性为40像素*/}#box ul{list-style: none;                     /*   设置列表显示风格为无，即不显示类表标记*/}#box ul li{width: 80px;height: 40px;text-align: center;    /* 设置列表元素内的文字水平方向居中*/line-height: 40px;     /* 设置列表元素内的文字垂直方向居中*/float: left;           /* 设置列表元素浮动，目的是把列表元素水平排列*/}#box ul li.strong{font-weight: bold;     /*设置选中列表元素内的文字加粗显示*/}#box ul li:hover{          /*  鼠标指针放到li标记时Li所显示的样式*/background-color: red;      cursor: pointer;         /*设置鼠标指针为手性*/ }#box ul li a{            /*选中#BOX内的ul内的所有a标记*/text-decoration: none;    /*超链接指针文字无下划线*/}#box ul li:hover a{          /*选中鼠标所在的li元素上的a标记*/text-decoration: underline;       /*超链接指针文字有下划线*/}

机票
火车票
汽车票
船票

结果：

3.6 鼠标属性

CSS中可以通过鼠标指针的cursor属性设置鼠标指针的显示图形，语法格式如下：

cursor:鼠标指针样式;

cursor属性的取值和说明
crosshair	十字准线	s-resize	向下改变大小
pointer \| hand	手形	e-resize	向右改变大小
wait	表或沙漏	w-resize	向左改变大小
help	问号或气球	ne-resize	向上右改变大小
no-drop	无法释放	nw-resize	向上左改变大小
text	文字或编辑	se-resize	向下右改变大小
move	移动	sw-resize	向下左改变大小
n-resize	向上改变大小

4 伪类和伪元素

4.1伪类

CSS引入伪类和伪元素的概念是为了实现基于文档树之处的信息的格式化。

伪类和伪元素的区别是:

为类的操作对象是文档树中已有的元素，而伪元素创建了一个文档树之外的元素。
CSS3规范中要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类。
IE8及以版本的一些浏览器不兼容双冒号(::)表示方法、所以除了少部分伪元素:其余伪元素既司使用单冒号(:)，也可以使用双冒号(::)。
伪类是一种特殊的类选择符，是能够被支持CSS的浏览器自动识别的特殊选择符.

最大的用途是为超链接定义不同状态下的样式效果。

伪类的语法是在原有选择符后加一个伪类，格式如下:
```
选择器:伪类{    属性:属性值;    属性:属性值;    ......}
```
注意：伪类是在CSS中已经定义好的，不能像类选择符那样使用其他名字。

常用的伪类如下:

1. 表示状态
- :link: 选择未访问的链接。
- :visited: 选择已访问的链接。
- :hover:选择鼠标指针移人链接。
- :active: 被激活的链接，即按下鼠标左键但未松开。
- :focus: 选择获取焦点的输人字段。
  2. 结构化伪类
  - :not:否定伪类，用于匹配不符合参数选择器的元素。
  - :first-child: 匹配元素的第一个子元素。
  - :last-child: 匹配元素的最后一个子元素。
  - :first-of-type:匹配属于其父元素的首个特定类型的子元素的每个元素。
  - :last-of-type: 匹配元素的最后一个子元素。
  - :nth-child: 根据元素的位置匹配一个或者多个元素，并接受一个an+b形式的参数( an+b最大数为匹配元素的个数)。
  - :nth-last-child:与:nth-child相似，不同之处在于是从最后一个子元素开始计数的。
  - :nth-of-type:与nth-child相似，不同之处在于只匹配特定类型的元素。
  - :nth-last-type:与nth-of-type相似，不同之处在于是从最后一个子元素开始计数的。
  - :only-child: 当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。
  - :only-of-type: 当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹C配该元素。
  - :target: 当URL带有锚名称，指向文档内某个具体元素时，:target匹配该元素。
    3. 表单相关伪类
    - :checked:匹配被选中的input元素，这个input元素包括radio和checkbox。
    - :default:匹配默认选中的元素，例如，提交按钮总是表单的默认按钮。
    - :disabled:匹配禁用的表单元素。
    - :empty: 匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。
    - :enabled: 匹配没有设置disabled属性的表单元素。
    - :valid:匹配条件验证正确的表单元素。
    - :invalid: 与:valid相反，匹配条件验证错误的表单元素。
    - :optional: 匹配具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。
    - :required: 匹配设置了required属性的表单元素。
      例如：
```
伪类a:link{               /*未访问链接*/color: #000000;}a:visited{            /*已访问链接*/color: #00FF00;    }    a:hover{               /* 鼠标移动到连接上*/    color: #FF00FF;    }    a:active{               /*鼠标单击时*/    color: #0000FF;    }    input:focus{          /* input标记获得焦点时*/    background-color: yellow;    }    p:last-child{          /* p标记的最后一个标记*/    font-size: 24px;    }这是一个链接
注意：a:hover必须在a:link和a:visited之后，需要严格按顺序才能看到效果
注意： a:sctive必须在a:hover之后
你可以使用"frist-letter"伪元素向文本的首字母设置特殊样式：
First name:This is some text.
This is some text.
```
      结果：
      
      4.2 伪元素
      
      CSS的伪元素之所以被称为伪元素，是因为其不是真正的页面元素，即没有对应的HTML元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用如页面元素一样的CSS样式，
      
      常用的伪元素：
      - :before:在某个元素之前插人一些内容。
      - :after: 在某个元素之后插人一-些内容。
      - :first-letter:为某个元素中文字的首字母或第一个字使用样式。
      - :first-line:为某个元素的第一行文字使用样式。
      - :selection:匹配被用户选中或者处于高亮状态的部分。
      - :placeholder:匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。
        例如：
        
        伪元素p.f1:first-line{color: #ff00ff;font-size: 24px;}p.myClass:first-letter{color: #ff0000;font-size: xx-large;}p.youClass:before{content: "hello";}p.youClass:after{content: "world";}
        向文本的首行设置特殊样式
        可以使用"first-line"伪元素
        可以使用"first-line"伪元素向文本的首字母设置特殊样式
        hello