微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 后端开发 > php教程 > 正文

PHP笔记（CSS篇）

php中文网
发布： 2016-06-23 13:38:45
原创
915人浏览过

html常用于在网页中显示内容，当然，还可以是布局，但是比较不方便，所以，引进了css

CSS全称Cascading Style Sheets，中文名：层叠样式表

帮助文档：CSS.chm

作用:布局和美化网页

特点：

立即学习“PHP免费学习笔记（深入）”；

  • 和HTML一样，是一种标记语言，可以由浏览器直接执行
  • 大小写不敏感
  • CSS文件是一个文本文件，后缀名为css
  • 嵌套在HTML中使用

    •  

    侧栏菜单模块化响应式模板
    侧栏菜单模块化响应式模板

    响应式网站设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该

    侧栏菜单模块化响应式模板 58
    查看详情 侧栏菜单模块化响应式模板

    Css规则

  • 语法
  • CSS定义由选择器（selector）、属性（property）及属性值（value）组成；
  • 格式：selector{property:value;}
  • 选择器包括
  • 类型选择器：
  • 定义：HTML标签
  • 使用：直接使用标签

    • 　　　　　　　　

    定义　　　　　　　　　　　　　　　　　　　　　　　　　　使用

  • class选择器：
  • 定义：标记名.类名 或 .类名
  • 使用：class="类名"
  • 标记名为html标签，“标记名.类名”表示只有使用该标签并class值为该类名时，才使用该选择器；
  • “.类名”表示只要class值为该类名，就会使用该选择器

    • 　　　　　　　　

    定义　　　　　　　　　　　　　　　　　　　　　　　　使用

  • id选择器：
  • 定义：标记名#id值 或 #id值
  • 使用：id="id值"
  • 标记名为html标签，“标记名#id值”表示使用该标签并id为该值时，才使用该选择器
  • “#id值”表示只要id为该值，就会使用该选择器
  • 同一页面id值是唯一的（是的，如果同一页面有两个相同的id，样式也能显示出来，但是这样有违逻辑，并且 将来使用js调用id时，会出现混乱）

    • 　　　　　　　　　　　　　　　

    定义　　　　　　　　　　　　　　　　　　　　　　　　使用

  • 包含选择器：
  • 多种选择器的层次组合，选择器用空格隔开，各选择器由左到右，为包含关系
  • 定义：各选择器符组合，用空格隔开
  • 使用：各选择器嵌入使用
  • 层数不限，但建议不要太多，影响维护和seo

    • 　　　　　　　　　　　　

    定义　　　　　　　　　　　　　　　　　　　　　　使用

  • 群组选择器：
  • 同时定义多个选择器为同一属性
  • 定义：各选择器组合，用","分隔开
  • 使用：各分隔符直接使用

    • 　　　　　　　　　　

    定义　　　　　　　　　　　　　　　　　　　　使用

  • 伪元素选择器：
  • 对html元素不同状态的一种定义方式
  • 定义：标签:伪元素
  • 使用：该标签的不同状态使用不同属性

    • 　　　　　　　　

    定义　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　使用

  • 属性与属性值用":"分隔开，多个属性值用";"分隔
  • 注释
  • 格式：/*.......*/
  • 长度单位
  • 相对单位（常用）
  • px：像素
  • em：相对于当前对象内文本的字体尺寸
  • %：百分比
  • 绝对单位（不常用）
  • pt：点
  • cm：厘米
  • mm：毫米
  • 颜色单位和URL值
  • 颜色：
  • #rrggbb
  • #rgb
  • rgb(x,x,x)（不常用，浏览器不兼容）
  • rgb(x%,x%,x%)（不常用，浏览器不兼容）
  • URL
  • 表示：url(address)

    •  

    HTML中使用CSS的方式

  • 内联样式表
  • 直接在标签中使用
  • 使用style属性，嵌入css键值对
  • 使用灵活，但失去了CSS的作用

    •  

  • 内嵌样式表
  • 在标签中，使用
  • 将要使用的CSS样式写在
  • 或者

    •  

  • 外部链接样式表
  • 外部链接css文件，文件中直接输入css内容
  • 优点：
  • 使用外接的css文件，浏览器带有缓存功能，不用每次都下载
  • 多个文件共享
  • 使用标签引入HTML中，格式为

    •  

    三种格式的优先级，就近原则：内联式>内嵌式>外链式

    内联元素与块级元素

  • 内联元素
  • 标签中的内容都在同一行，不会自动换行
  • 不可设置宽和高
  • 块级元素
  • 标签中的内容会自动换行
  • 可设置宽和高

    • CSS字体属性

  • 多属性写在同一行，用复合属性，顺序必须为 [[ || || ]? [ / ]? ],和为必选项。
  • 单属性分开写
  • 属性：设置字体是否为斜体，默认值为normal；
  • 属性：设置字体是否为小型的大写字母，默认值为normal；
  • 属性：设置字体粗细，默认值为normal；
  • 属性：设置字体大小，常用单位为"px"或"%"，默认值为normal；
  • 属性：设置字体，可设置多种字体，用“,”隔开，浏览器会按顺序检索是否存在该字体以显示，字体名称为中文时，要用单引号引起。默认值根据浏览器选择。
  • 属性：设置字体宽度，默认值为normal；

    •  

     

    CSS背景属性

  • 多属性写在一行，使用复合属性，属性值为[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]，其他参数不填时，默认无条件覆盖。
  • 单属性分开写
  • ：设置背景色，默认为transparent；
  • ：设置背景图片，用"url()"设置图片路径；
  • ：设置背景图片填充效果，默认为repeat；
  • ：设置背景图片的填充位置，默认值为"0% 0%"，常用单位"%"和"px"。
    小技巧：可设置一个区域的和属性，属性可填充该区域，如作为导航条等；属性可分别截取图片一部分，分开现实，减少网页加载时间。

    • CSS文本属性

  • ：设置字符间距，允许使用负值，默认值为normal
  • ：设置单词间距，允许使用负值，默认值为normal
  • ：向文本添加修饰，underline下划线，overline上划线，line-through删除线
  • ：水平对齐方式，centen居中，right右对齐，left左对齐
  • ：设置对象行高，当行高与区域高度相同，文本垂直居中
  • ：设置文本缩进，单位可为em（字符）、px（像素）、%（百分比）
  • ：设置字体颜色

    • CSS边框属性

  • 多属性合并写，使用复合属性，属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
  • 、、、：设置左线、右线、上线、下线的属性，属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
  • 单属性分开写
  • ：设置边框样式，常用dotted（点状）、dashed（虚线）、solid（单实线）
  • ：设置边框宽度，不允许为负数，属性设为none，本属性失去作用
  • ：设置边框颜色

    • CSS列表属性

  • :设置列表项的标记为预设标记
  • ：设置列表项的标记为自选标记，“url()”设置标记的地址
  • ：设置表项在文本的位置，outside表示标记放置在文本以外，inside表示标记放置在文本以内

    • DIV+CSS页面布局

  • 优势：
    1. 内容与布局分离
    2. 代码简洁，提高页面浏览速度
    3. 易于维护和修改
    4. 提高搜索引擎对页面的索引效率
  • div和span
  • div：块级元素，会自动换行，能设置宽高
  • span：内联元素，不会自动换行，不能设置宽高

    • W3C盒子模型

  • maigin：外补白（盒子四边的外延申边距）
  • maigin：可使用1~4个参数来设置外补白大小
  • maigin-top、maigin-right、maigin-bottom、maigin-left：分别设置盒子上、右、下、左外补白大小
  • border：边框
  • border：可使用1~4个参数来设置边框宽度
  • border-top、border-right、border-bottom、border-left：分别设置盒子上、右、下、左边框大小
  • padding：内补白（盒子内容与边框的距离）
  • padding： 可使用1~4个参数设置内补白大小
  • padding-top、padding-right、padding-bottom、padding-left：分别设置盒子上、右、下、左内补白大小

    • DIV定位

  • position：设置定位方式，参数为static、absolute、relative、fixed
  • absolute：绝对定位，位置相对于文档流，会脱离文档流
  • relative：相对定位，位置相对于自己原来的位置，不会脱离文档流
  • fixed：固定定位，位置相对于浏览器窗口
  • 绑定模式：父层使用"relative"定位，子层使用"absolute"定位，子层将于父层“绑定”，子层的位置不再相对于文档流，而是相对于父层
  • top：盒子与顶部的距离
  • right：盒子与右边的距离
  • bottom：盒子与底部的距离
  • left：盒子与左边的距离
  • z-index:设置层叠顺序，默认以0开始，可为负数
  • text-align：水平对齐方式，centen居中，right右对齐，left左对齐
  • line-height：设置对象行高，当行高与区域高度相同，文本垂直居中
  • float：设置对象为浮动效果
  • 只会水平浮动，不会不会垂直浮动
  • 会脱离文档流
  • 多个对象同时设置为浮动时，各对象并排显示
  • left：左浮动
  • right：右浮动
  • clear：清除浮动
  • right：清除右浮动，对象右边不能存在浮动对象
  • left：清除左浮动，对象左边不能存在浮动对象
  • both：清除两边浮动，对象两边不能存在浮动对象

    • DIV的显示

  • display：设置元素显示发方式
  • block：以块级元素方式显示
  • inline：以内联元素方式显示
  • none：隐藏该元素，隐藏后，不占用位置
  • visibility：设置嵌套关系的显示
  • inherit：显示属性与父层相同，父显子显，父隐子隐
  • visible：无论父层是否显示，子层依然显示
  • hidden：无论父层是否显示，子层均隐藏且占用位置
  • overflow：内容超出边界时的显示方式
  • auto：自动处理，超出时显示滚动条，未超出则不显示
  • scroll：始终显示滚动条，无论是否超出
  • visible：超出也直接显示，不做处理
  • hidden：超出部分隐藏，不显示滚动条

    • 大家都在看：

    PHP速学教程(入门到精通)
    PHP速学教程(入门到精通)

    PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：php -str_replace无法遍历替换 下一篇：PHP中通过返回值进行页面跳转的问题！
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    如何解决Red Hat PHP服务重启失败的解决办法？ 首先检查PHP-FPM服务状态，确认是否运行异常；接着验证php.ini等配置文件语法正确性；然后确保依赖的Web服务器如Apache正常运行；若存在残留进程需手动终止；最后排查SELinux或防火墙限制，必要时调整策略以允许服务启动。
    2025-11-21 06:23:34
    944
    PHP获取网页内容怎么抓取_PHP抓取网页HTML内容的几种方法 答案：PHP中获取远程网页HTML可通过file_get_contents、cURL、Guzzle或DOM解析实现。首先使用file_get_contents需开启allow_url_fopen；其次cURL支持更多请求配置；再者Guzzle适合现代PHP项目；最后可用DOMDocument与DOMXPath解析内容。
    2025-11-21 01:41:08
    176
    php程序怎么部署到laravelapi_php程序laravelapi接口部署与运行配置方法 首先完成Laravel环境配置，包括PHP、Composer、Web服务器和数据库；接着创建项目并配置.env文件，生成应用密钥；然后在routes/api.php中定义路由，可绑定控制器处理请求；随后配置Nginx指向public目录，并重启服务；最后设置文件权限，运行phpartisanserve测试接口，生产环境关闭调试模式即可稳定提供API服务。
    2025-11-21 01:11:23
    284
    php源码怎么调试_php源码错误排查与调试方法指南 开启错误报告是PHP调试的第一步，需设置error_reporting(E_ALL)并启用display_errors；结合var_dump()和print_r()可直观查看变量状态；使用Xdebug扩展配合IDE实现断点调试与流程控制；通过PHP及Web服务器日志文件分析隐藏错误；综合运用这些方法能高效定位并解决PHP源码问题。
    2025-11-20 20:00:39
    612
    Laravel中间件是什么_Laravel中间件功能与实现原理 Laravel中间件用于拦截HTTP请求并执行预处理逻辑，如权限验证、日志记录等。1、请求进入后先经全局中间件，再按路由或分组应用的中间件顺序执行；2、通过Artisan命令可创建自定义中间件，并在handle方法中编写过滤逻辑；3、中间件需在Kernel.php中注册，支持全局、路由别名和分组绑定；4、可通过middleware(‘name:param’)方式传递参数，实现灵活控制；5、中间件按嵌套结构依次调用next($request)推进流程，确保请求有序流向最终控制器。
    2025-11-20 20:00:01
    237
    如何设置php网站内容草稿保存_编辑草稿自动保存与恢复配置方法 通过前端与后端协同实现PHP网站内容草稿自动保存与恢复：一、利用LocalStorage定时存储编辑内容，页面加载时提示恢复；二、通过AJAX每60秒将数据发送至save_draft.php接口，存入数据库drafts表，用户再次进入时由load_draft.php返回草稿；三、使用uniqid()生成UUID标识草稿，绑定user_id确保隔离与安全，提交后删除草稿；四、提供“保存草稿”按钮触发手动保存，成功后提示并更新状态栏显示最后保存时间；五、网络异常时将数据暂存LocalStorage并
    2025-11-20 19:58:02
    635
    PHP环境故障排除_PHP环境故障排除详细教程 首先通过php-v检查PHP安装，若未识别需添加环境变量或重装；2.创建info.php验证Web服务器是否成功集成PHP，否则检查配置文件模块加载；3.使用php-m查看已启用扩展，对照项目需求在php.ini中启用缺失扩展并重启服务；4.开发时设置error_reporting=E_ALL和display_errors=On以显示错误，生产环境应关闭display_errors；5.检查文件权限与路径，确保PHP进程用户对项目目录、upload_tmp_dir、session.save_pa
    2025-11-20 19:57:45
    937
    php代码网页版转换器入口 php代码网页版在线转换器运行入口 推荐使用paiza.IO、OnlinePHP.io、3v4l.org或Replit等在线平台运行PHP代码，操作简便，无需本地配置，只需输入代码并点击执行即可查看结果。
    2025-11-20 19:57:07
    463
    怎么用php表白_PHP表白网页或程序开发与实现方法 使用PHP开发表白网页可通过HTML结构、动态内容、表单互动、CSS美化及服务器部署实现。首先创建index.html并设置标题与欢迎语；随后改扩展名为.php，用echo输出个性化语句，并定义变量增强针对性；接着添加form表单收集“愿意”或“再想想”等反馈，由submit.php处理$_POST数据并回应；再通过CSS设置渐变背景、心形图案与文字动画提升视觉体验；最后将文件上传至支持PHP的服务器，测试功能确保页面正常访问与交互。
    2025-11-20 19:55:47
    387
    如何配置php网站数据迁移_网站数据迁移与导入导出方法教程 答案：迁移PHP网站需先导出原数据库为SQL文件，再导入新服务器并同步文件系统。具体步骤：①用mysqldump导出数据；②上传备份文件至新服务器；③创建数据库并导入SQL；④同步网站文件；⑤更新配置连接新库，确保数据一致性和最小停机。
    2025-11-20 19:55:02
    816
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部