css是什么
层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码
置换元素和非置换元素
-置换元素：其内容是从浏览器外部引用而来。
-非置换元素：其内容是有编程人员编写。
元素的显示方式
-块级元素：独占一行
-行内元素：并列排在一行
-行内块级元素：并列排在一行但是 可以设置宽高。一般是置换元素
display
-可以通过修改style=”display:属性”来控制元素的显示类型
常用属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | inling |
默认样式：行内元素 |
| 2 | block |
块级元素 |
| 3 | inling-block |
行内块级元素 |
| 2 | list-item |
块级：列表元素 |
| 2 | table |
块级：表格元素 |
| 2 | flex |
弹性元素 |
| 2 | grid |
网格元素 |
css应用
- 一个css文件可以引用在多个文件中，可以使代码看起来更加简洁.
- 内部样式仅在当前文件有效
| 序号 | 属性 | 描述 |
|---|---|---|
| 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
媒体描述符
- 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
- 媒体描述符的语法与 css 样式声明非常类似,如
min-width: 500px - 与 css 声明的不同之处在于,媒体描述符允许没有值,如
print and (color) - 多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如
and和not and表示多个”媒体描述符”必须同时满足,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 |
设备显示区域最大高度 |
代码示例
htnl
<!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;}
效果图
