CSS 基础

子柒s2025-07-24 22:08

标题目录

基本概念
[CSS 的三种位置](#CSS 的三种位置)
常用值
字体处理
元素的显示模式
盒子模型
浮动
页面版心
定位
- [静态定位（默认值） position:static](#静态定位（默认值） position:static)
- [相对定位 position:relative](#相对定位 position:relative)
- [绝对定位 position:absolute](#绝对定位 position:absolute)
- [固定定位 position:fixed](#固定定位 position:fixed)
- 布局方式总结
元素的放大与过渡
溢出处理
- 元素溢出
- 溢出文本替换为省略号
CSS属性总结表

基本概念

CSS（Cascading Style Sheet）级联样式表，用来控制页面布局与页面样式
可以修改颜色、大小、位置、层级、动画等等
CSS3 中多种颜色模式/阴影/边框圆角/渐变/动画/过渡/响应式/弹性布局/多列布局都是 CSS3 的新特性

CSS 的三种位置

行内样式

写在 HTML 元素的开始标签里，只对当前行生效

特点：只能给一个元素使用，复用性差

复制代码

<h4 style="color:red;">我是标题</h4>

内部样式

写在 head 标签中的 style 标签里，对当前页面所有元素生效

特点：随着当前页面加载而加载，加载速度快，首页常用

复制代码

<head>
  <style>
     /* 标签名选择器 */
     h1 {
          color:red;
        }
  </style>
</head>

外部样式

写在独立的.css 文件中，在html 文件中引入外部的.css 文件

rel：必写属性，表示引入文件是什么类型 stylesheet 样式表
href：要引入 CSS 文件的路径
特点：可以被多个页面共享，复用性强，常用于二三级页面

优先级

渲染同一个元素，样式不同会叠加生效,比如背景色和文字颜色会同时生效
如果渲染的样式相同，按照如下优先级排序：
!important > 行内样式>（内部样式=外部样式）>浏览器自带的样式
内部样式与外部样式优先级一样，后写的样式会把之前的样式覆盖掉

选择器

标签名选择器：选中指定标签的所有元素，写法：标签名 { CSS 样式 }
类选择器：选中指定的一类元素，写法： .class值 { CSS 样式 }
id 选择器：选中指定的一个元素，写法： #id值 { CSS 样式 }
伪类选择器：
- 选中超链接未被访问时时的状态，写法：a:link{ CSS 样式 }
- 选中超链接已被访问时的状态，写法：a:visited{ CSS 样式 }
- 选中元素的悬停状态（非超链接独有），写法： div:hover{ CSS 样式 }
- 选中超链接激活时的状态，写法：a:active{ CSS 样式 }
- 注意：a 标签伪类的顺序： :link :visited :hover :active
并列选择器：选中满足所有选择器条件的元素,是"与"的关系，写法： #d1:hover { CSS 样式 }
群组选择器：选中多种不同的元素,是"或"的关系，，写法： #id 值，.class 值，标签名{ CSS 样式 }
通用选择器：选中所有元素，写法： *{ CSS 样式 }
后代选择器：选中祖先元素中包含的所有后代元素，写法： div span{ CSS 样式 }
子代选择器：选中父元素中下的直接子元素，写法： div>span{ CSS 样式 }
02_CSS选择器