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>
网友评论