收藏
天蓬老师批改状态：合格
老师批语：这次就算了, 下次再不写总结 , 就退回了
层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码
-置换元素：其内容是从浏览器外部引用而来。
-非置换元素：其内容是有编程人员编写。
-块级元素：独占一行
-行内元素：并列排在一行
-行内块级元素：并列排在一行但是 可以设置宽高。一般是置换元素
-可以通过修改style=”display:属性”来控制元素的显示类型
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | inling |
默认样式：行内元素 |
| 2 | block |
块级元素 |
| 3 | inling-block |
行内块级元素 |
| 2 | list-item |
块级：列表元素 |
| 2 | table |
块级：表格元素 |
| 2 | flex |
弹性元素 |
| 2 | grid |
网格元素 |
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | link标签 |
引用样式 |
| 1 | @import指令 |
引用样式 |
| 1 | <style>...</style> |
内部样式 |
| 1 | style="" |
内部样式 |
| 序号 | 场景 | 描述 |
|---|---|---|
| 1 | <link> |
<link media="screen,print"> |
| 1 | <style> |
<style media="screen,print"> |
| 1 | @import |
@import url(...) screen,print; |
| 1 | @media |
@media screen,print {...} |
媒体类型是不同媒体的标识符
| 序号 | 类型 | 描述 |
|---|---|---|
| 1 | all |
所有媒体类型,即不限制 |
| 2 | print |
打印机,预打印预览使用 |
| 3 | screen |
屏幕,如浏览器等用户代理 |
| 4 | projection |
幻灯片 |
多种媒体类型之间使用逗号分隔:
@media screen, print
min-width: 500pxprint and (color)and 和 notand表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面常用 “媒体描述符”(显示区域相关)
| 序号 | 媒体描述符 | 描述 |
|---|---|---|
| 1 | width |
显示区域宽度 |
| 2 | min-width |
显示区域最小宽度 |
| 3 | max-width |
显示区域最大宽度 |
| 4 | device-width |
设备显示区域宽度 |
| 5 | min-device-width |
设备显示区域最小宽度 |
| 6 | max-device-width |
设备显示区域最大宽度 |
| 7 | height |
显示区域高度 |
| 8 | min-height |
显示区域最小高度 |
| 9 | max-height |
显示区域最大高度 |
| 10 | device-height |
设备显示区域高度 |
| 11 | min-device-height |
设备显示区域最小高度 |
| 12 | max-device-height |
设备显示区域最大高度 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 外部样式引用方式 --><link rel="stylesheet" href="anli.css" /><style>@import "anli2.css";/* 内部样式使用方式 */img {width: 500px;height: 500px;}</style></head><body><!-- 行内样式使用方式 --><p style="color: hotpink;">php中文网</p><img src="1.jpg" alt="汽车" title="汽车" /><h1>css基础知识</h1><ul><li>张三</li><li>李四</li><li>王五</li></ul></body></html>
linkcss文件
h1 {color: aqua;}
@import文件
ul li {background-color: gray;display: inline;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
