css入门
- 内联样式
<h1 style="color: red;">啦啦啦啦</h1>
- 内嵌样式表
<style> h1{color: red;} </style>
- 外联样式表
<link rel="stylesheet" href="css/style.css" />
css 的五种选择器
- 元素(标签)选择器
p{xxx}
- 类选择器
.myDiv{xxx}
- id选择器
#myId{xxx}
- 属性选择器
[name="haha"] {}
- 通配符选择器
*{}
CSS 常用属性
前景色color: red
背景色background-color:red
宽度width
高度height
CSS字体属性
字体类型
font-family: "微软雅黑", sans-serif;
字号
font-size: 36px
字重
font-weight: 900;
字体阴影效果 text-shadow
无扩散的阴影text-shadow: -1px -3px #ff00de
扩散阴影0 0 20px #ff00de
作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color:gray; } h1{ font-size:68px; color:white; /*此处填写代码*/ text-shadow: #ff00de -1px -3px, 0 0 20px #ff00de; } </style> </head> <body> <h1>imooc</h1> </body> </html>
抖音效果图
image.png
列表标签
ul {list-style-type: circle}
也可以简写为 ul {list-style: circle}
CSS 盒子模型
表框属性
{border: 1px dashed red}
宽度 样式 颜色
实线边框（solid）、虚线边框（dashed）、点线边框（dotted）、双线边框（double）
border-top 可以用来设置为上边框
其他三个方向的边框为 right, bottom, left
{padding: 像素值} 内边距
{margin: 像素值} 外边距
超链接
<a href="http://www.soso.com">lalala</a>
超链接设置样式
文本对齐方式 text-align: center
行高 line-height: 20px
设置超链接样式 text-decoration: underline
文章列表效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文章列表效果</title> <style> aside { width: 200px; height: 300px; } h3 { font-size: 18px; /* 设置字体大小 */ font-weight: 600; /* 设置字体粗细 */ text-align: center; /* 设置字体水平方向居中对齐 */ } ul { list-style: none; /* 去掉无序列表的项目符号 */ padding: 0; /* 去掉无序列表的项目符号所在空间 */ } ul>li { padding: 10px; border-top: 1px dashed lightgrey; /* 处理文本内容溢出后的情况 */ overflow: hidden; text-overflow: ellipsis; } ul>li>a { color: black; text-decoration: none; /* 去掉链接元素文本内容的下划线 */ white-space: nowrap; /* 强制文本内容在一行显示 */ } </style> </head> <body> <!-- <aside>元素实现HTML页面侧边栏容器 --> <aside> <!-- 定义侧边栏的标题 --> <h3>文章列表</h3> <!-- 定义文章列表 --> <ul> <li><a href="#">设计与构建静态网站</a></li> <li><a href="#">JavaScript基础核心语法</a></li> <li><a href="#">DOM编程艺术</a></li> <li><a href="#">锋利的jQuery</a></li> <li><a href="#">Ajax异步交互技术</a></li> <li><a href="#">HTTP网络协议</a></li> </ul> </aside> </body> </html>
