CSS简洁使用与说明
1. 什么是CSS?
| 序号 |
术语 |
描述 |
| 1 |
css |
层叠样式表Cascading Style Sheets缩写(CSS),可用于修饰html的标签,还可以配合js语言对元素动态样式操作 |
| 2 |
样式 |
利用css代码可以为网页的所有元素美化和元素定位布局 |
| 3 |
文档 |
可在html中的style标签内编写css代码,也可以用link标签引入*.css后缀文件,让网页的元素达到可观 |
2. CSS代码实例
<!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="./style.css"> <!-- 2. 以下是包含在style标签的css代码 --> <style> /* 绘制一个div作为画板 */ div { width: 270px; height: 500px; position: relative; padding: 10px; background-color: #f2f2f2; border: 3px dashed red; } /* 机器人头部的天线 */ div::before, div::after { content: ""; width: 6px; height: 50px; background-color: lightgreen; position: absolute; top: 6px; border-radius: 6px; } div::before {transform: rotate(30deg);right: 80px;} div::after {transform: rotate(-30deg);left: 80px;} /* 为机器人头部添加css样式 */ header { background-color: lightgreen; width: 200px; height: 100px; border-radius: 100px 100px 0 0; margin: 0 auto; } header::before, header::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; position: absolute; top: 60px; } header::before {right: 90px;} header::after {left: 90px;} /* 为机器人身体添加css样式 */ main { width: 200px; height: 200px; background-color: lightgreen; margin: 5px auto; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } main::before, main::after { content: ""; width: 30px; height: 140px; border-radius: 80px 80px; background-color: lightgreen; position: absolute; top: 132px; } main::before {right: 10px;} main::after {left: 10px;} /* 为机器人双腿添加样式 */ footer { width: 200px; height: 130px; margin: 0 auto; margin-top: -10px; } footer::before, footer::after { content: ""; width: 40px; height: 120px; background-color: lightgreen; border-radius: 0px 0px 80px 80px; position: absolute; } footer::before {right: 70px;} footer::after {left: 70px;} /* 媒体查询 当屏幕宽度缩放到400px时 改变背景颜色 */ @media screen and (max-width: 400px) { /* 以下利用css选择器选中需要改变的元素 */ div { background-color: lightseagreen; margin: 0 auto; } } </style></head><body> <div> <!-- 头部 --> <header></header> <!-- 身体 --> <main></main> <!-- 脚 --> <footer></footer> </div></body></html>
效果图:
3. 总结
- 标签名 {}: 选中文档中的元素
- 通过css的标签选择器选中并写入css代码可以修饰元素的宽高,颜色,定位,旋转,圆角,内边距,外边距,边框,伪元素
| 序号 |
属性 |
说明 |
| 1 |
宽高 |
可以利用width和height属性来定义元素的宽高 如: 标签名{width:100px; height:100px;} 单位为: px |
| 2 |
颜色 |
background-color与background两个属性都可以为元素加上颜色 如: 标签名{background-color或background: red;}两者的区别是: background可以设置背景颜色、背景图片、定位等, background-color只能单纯地设置颜色 |
| 3 |
定位 |
常用的就是float属性将元素脱离文档流,定位到左/右 如: 标签名{float:left或right;},还一个常用position属性有三个值: absolute绝对定位, relative相对定位, fixed固定定位,这三个属性都可以用top, left, right, bottom 属性来移动元素的位置 允许使用负值, 单位为: px例如: 标签名{position: absolute; top left right bottom: 100px;} |
| 4 |
圆角 |
可以设置元素4个角为圆角 标签名{border-radius: 20px;} 表示4个角都是20像素的圆角 单位为: px 也可以写入4个值 标签名{border-radius: 左上角 右上角 右下角 左下角;} 例如: 标签名{border-radius: 10px 20px 30px 40px;} |
| 5 |
内边距 |
使用padding属性可以改变元素上下左右的内边距,内边距清除时释放的区域会受到元素背景颜色/内容填充,单位为: px 标签名{padding:上 下 左 右;},标签名{padding:10px 10px 20px 20px;} |
| 6 |
外边距 |
可以改变元素的 上 下 左 右边距 单位为: px 标签名{margin: 上 下 左 右;},标签名{margin: 10px 10px 20px 20px;}可以使用负值,也可以为4个边距单独设置 margin-left, margin-right, margin-top, margin-bottom |
| 7 |
边框 |
border属性可以为元素添加上边框,有常用的4个值: none无边框, dotted点线边框, dashed虚线边框, solid实线边框具体用法 border: 边框的大小(px), 边框类型, 边框颜色; 标签名{border: 2px solid dotted dashed red;} |
| 8 |
伪元素 |
每个标签都有2个默认伪元素分别是 before和after 在元素之前或之后加上内容, 标签名::before{conent: "";}其中content属性可以为自定义的内容content:’php.cn’;, 也可以为空, 支持定义宽高,定位等操作几乎和普通的div元素一样 |
| 9 |
媒体查询 |
@media screen and (max-width: 400px) {}, 当屏幕缩放到400px时,改变某个元素的样式 @media类型有: all用于所有设备, print用于打印机/打印预览, screen用于电脑屏幕/平板电脑/智能手机等 @media功能有: max-width页面最大可见宽度, min-width页面最小可见宽度, max-height页面最大可见高度, min-height页面最小可见高度 @media screen and (max-width: 400px) { div{background-color: red;margin: 0 auto;} }: 当我的屏幕缩放到400像素改变div的背景颜色并且居中 |
