一、概念：
级联样式表（cascading style sheet）简称“css”，通常又称为“风格样式表（style sheet）”，它是用来进行网页风格设计的
二、常见用法
1. 可给页面中所有同一标签元素进行加样式如：
<div>div区域1</div>
<div>div区域1</div>
姓名：<input type="text" />成绩：<input type="text" />
可在此页面的 head标签中，加入标签
<style type="text/css">
div{
border:#f90 dashed 2px;
height:200px;
width:400px;
}
input {
border:none;
border-bottom:#000 1px solid;
}
.haha{ /* 样式名前加了一个点.号， 代表这个样式是给网页中特定的元素 元素是定义是 class属性， class="haha" */
border:none;
}
#userbirth{ /* 样式名前加了一个井#号，代表这个样式是给页面中特定的元素 元素是定义了id属性，且id="userbirth" 一样这种用法比较少，因id给js用的多。没必要一个id就是一个样式的，很多多情况下用class，多个标签一起用一个样式， 扩展性高。修改方便。 */
border:none;
border-bottom:#000 1px solid;
}
</style>
二、css文件可以，单独写到一个普通文本文件保证起来，用到时可在<head>标签中加载出来如：
<head>
<style type="text/css">
<link rel="stylesheet" href="http://www.php1.cn/"> @import import url(2.css); /* 将外边的2.css文本导入进来 */
</style>
</head>
三、超链接的几种样式
超链接有四种状态可指定，分别是a:link(未访问前)、a:hover(鼠标放入未点击前)、a:active(鼠标放入点击中未松开鼠标)、a:visited(访问后)四种。 其中一般是建议
a:link与a:active是一组，用一个样式。a:hover,a:active是一组用另一个样式。如：
a:link{
background-color:#06f;
color:#fff;
text-decoration:none; /* text-decoration 为none 下划线没了 */
font-size:18px;
}
a:hover{
background-color:#fff;
color:#f00;
font-size:24px;
} ...等等。
四、标签 css中的优先级
可以为标签div ，指定一个id，class，或直接用style来搞，如下面：
<div class="haha" id="qq">这是一个div区域2</div>
那么优先顺序是什么呢：：标签选择器<类选择器<id选择器<style属性
五、简单div样式介绍
#div_1{
/*border-bottom:#f60 2px dashed;*/ /* border-botton，可以对div的下边框单据进行设置样式，一般是颜色、字体大小(如2px 2个像素)、边框线形(如 dashed 虚线吧) */
background-color:#f90;
/*padding:20px 100px 200px 300px;上 右 下 左
margin:0px;*/ /* padding 内容与边框距离， margin此边框与外面的div或body的距离 */
float:left; /* float是浮动着，原位置移动后，下面的标签会顶过来。如这个float:left，将把标签内部浮动在左边，那原来的下面的文本可直接流向右边了，下面的div会挤进来. position 是定位，可绝对来定位掉，定位后原来的位置会被其它的标签占用掉，因为一旦被position了那就被从文本流中拉出去了，不属于普通文本流不占用普通文档流的位置。 */
}
图文混排，就用要到css 样式中的 float:left，这样原本图片下面的文本，就自动流向了图片右边了。
0
0
css入门
高洛峰
发布时间：2016-11-24 10:21:29
|1780人浏览过
|来源于php中文网
原创
相关文章
CSS伪元素在响应式表格中的应用_在手机端显示Data标题
CSS工具如何自动抽取并归并大量代码库中的同义重复CSS
CSS如何实现带有定位标志的地图热点_利用absolute在图片上打点css
CSS如何让Grid内容项根据图片宽度自然排布
CSS如何选中相邻的下一个同级兄弟_使用加号的相邻兄弟选择器
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。
1
2026.03.13
本专题围绕 Python 异步编程模型展开，深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例，帮助开发者掌握 Python 在高并发场景中的高效开发方法，并提升系统资源利用率与整体运行性能。
39
2026.03.12
本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。
140
2026.03.11
本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。
47
2026.03.10
本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。
90
2026.03.09
本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。
102
2026.03.06
本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。
226
2026.03.05
本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。
506
2026.03.04
2026最全AI工具安装教程专题：包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好，附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新，收藏这一篇就够了，让AI安装不再报错！
170
2026.03.04
热门下载
精品课程
最新文章
