慕课网 Web 1元体验课(上)

acc8226

发布于 2022-05-17 18:04:52

9040

发布于 2022-05-17 18:04:52

文章被收录于专栏：叽叽西

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-17，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度