CSS总结

玉米会开花
219 阅读7分钟

1.0 CSS语法

Snipaste_2021-03-29_12-49-07.png

1.1 外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

2.0 id选择器和calss选择器

<style>
#box {
text-center
}
</style>
<body>
<div id="box">
</div>
</body>

<style>
.box {
text-center
}
<body>
<div class="box">
</div>
</body>

id选择器通常指定特定的元素 class选择器通常指定多个元素

2.0 background背景

Snipaste_2021-03-29_13-50-04.png

body
{
/*图像设为背景*/
background-image:url('gradient2.png');
/*背景颜色*/
background-color:yellow
/*图像向x方向平铺*/
background-repeat:repeat-x;
/*图像不平铺*/
background-repeat:no-repeat;
/*图像起始位置右上角*/
background-position:right top;

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        body {
            /* 复合写法：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */

            background-image: url(image/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>


<body>

</body>

</html>

css的三大特性：层叠性，继承性，优先级，优先级的叠加

Snipaste_2021-03-29_14-57-43.png

Snipaste_2021-03-29_14-59-36.png

Snipaste_2021-03-29_15-00-19.png

Snipaste_2021-03-29_15-01-46.png

css网页布局的本质

Snipaste_2021-03-29_15-04-18.png

3.0 text 属性

Snipaste_2021-03-29_14-00-16.png

3.1：删除下划线

a {text-decoration:none;}

3.2：文本可居中或对齐到左或右,两端对齐.

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

4.0 fonts字体

p {
font-family:"Times New Roman";
font-size:15px;
font-weight:400;
}

Snipaste_2021-03-29_14-18-15.png

css属性总结

5.3css属性书写顺序.png

5.0 link 链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

6.0 盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

Snipaste_2021-03-29_14-23-53.png

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

6.1 盒子阴影

Snipaste_2021-03-29_15-10-32.png

6.2 文字阴影

Snipaste_2021-03-29_15-11-55.png

6.3 css 边框属性

Snipaste_2021-03-29_14-26-16.png

6.4 圆角边框

Snipaste_2021-03-29_15-12-17.png

Snipaste_2021-03-29_15-14-47.png

    <title>边框小练</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* border-top:1px solid red;
            border-right:1px solid blue;
            border-left:1px solid blue;
            border-bottom:1px solid blue; */
            border: 1px solid blue;
            border-top: 1px solid red;
            /* padding-top：5px;
            padding-right：5px； 
            padding-bottom: 5px;
            padding-left: 5px； */
            /* 复合写法：padding:5px 10px 20px 30px; 4个值，上是5像素 右10像素 下20像素 左是30像素 顺时针*/
            padding: 5px 10px 20px 30px;
        }
    </style>

<body>
    <div>举杯邀明月，对饮成三人
    </div>
</body>

7.0 css尺寸

Snipaste_2021-03-29_14-34-24.png

8.0 复合选择器总结

Snipaste_2021-03-29_14-46-48.png

9.0 css的元素显示模式（元素可以水平摆放）

转化为块元素 display:block;
转化为行内元素 display:inline; 转化为行内块元素 display:inline-block;

<!DOCTYPE html>
<html lang="en">！

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏</title>
    <style>
        a {
            display: block;
            width: 300px;
            height: 40px;
            background-color: #55585a;
            text-decoration: none;
            font-size: 14px;
            color: #fff;
            text-indent: 2em;
            line-height: 40px;
        }

        a:hover {
            background-color: #f0b000;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">出行 穿戴</a>
    <a href="#">出行 穿戴</a>
    <a href="#">出行 穿戴</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
    <a href="#">耳机 音响</a>
    <a href="#">耳机 音响</a>
</body>

</html>+

渲染效果：

Snipaste_2021-03-29_14-54-14.png

9.1浮动

img
{/*右浮*/
    float:right;
}

9.1 彼此相邻的浮动元素

.thumbnail 
{
/*其余的子级盒子也要跟着浮动*/
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

学成在线综合案例

/* 清除内外边距 */

* {
    margin: 0;
    padding: 0;
}

/* 给头部盒子外边距居中 */

/* 版心 */

.w {
    width: 1200px;
    margin: auto;
}

/* 背景颜色 */

body {
    background-color: #f3f5f7;
}

/* 清除无序列表小圆点 */

li {
    list-style: none;
}

/* 清除链接中下划线 */

a {
    text-decoration: none;
}

/* 清除浮动,固定盒子 */

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* 头部盒子外边距居中 */

.header {
    height: 42px;
    margin: 30px auto;
}

/* logo左浮 */

.logo {
    float: left;
    width: 198px;
    height: 42px;
}

/* 导航栏部分左浮 */

.nav {
    float: left;
    margin-left: 60px;
}

/* li标签左浮,外边距15 */

.nav ul li {
    float: left;
    margin: 0 15px;
}

.nav ul li a {
    /* 转换为行内块元素 */
    display: block;
    height: 42px;
    /* 左边距为10 */
    padding: 0 10px;
    /* 行高=高度,居中 */
    line-height: 42px;
    font-size: 18px;
    color: black;
}

/* 伪链接 */

.nav ul li a:hover {
    /* 下边框 2像素 实线 蓝色 */
    border-bottom: 2px solid blue;
    color: #00a4ff;
}

.search {
    /* 左浮 */
    float: left;
    width: 412px;
    height: 42px;
    /* 外边距左移70 */
    margin-left: 70px;
}

.search input {
    float: left;
    width: 345px;
    height: 40px;
    /* border 边框 */
    border: 1px solid blue;
    /* 右边框为0 */
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    /* 左内边距15 */
    padding-left: 15px;
}

/*search 搜索 button按钮 */

.search button {
    /* 左浮 */
    float: left;
    width: 50px;
    height: 42px;
    /* button默认有个边框,手动去除,边框为0 */
    border: 0;
    /* 背景位置 */
    background: url(images/btn.png);
}

/* user用户 */

.user {
    float: right;
    line-height: 42px;
    /* 右外边框 */
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

.banner {
    height: 421px;
    background-color: #1c036c;
}

.banner .w {
    height: 421px;
    background: url(images/banner2_20190819_210028.png) no-repeat top center;
}

.subnav {
    float: left;
    height: 421px;
    width: 190px;
    background: rgba(0, 0, 0, 0.3);
}

.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.subnav ul li a {
    font-size: 14px;
    color: #fff;
}

.subnav ul li span {
    float: right;
}

.subnav ul li a:hover {
    color: #00a4ff;
}

/* course 课程 */

.course {
    /* 右浮 */
    float: right;
    /* 上外边距50 */
    margin-top: 50px;
    width: 230px;
    height: 300px;
    /* 背景颜色 */
    background-color: #fff;
}

.course h2 {
    height: 48px;
    background-color: #9bceea;
    /* 文本居中 */
    text-align: center;
    /* 字体行高 */
    line-height: 48px;
    color: #fff;
    font-size: 18px;
}

.bd {
    padding: 0 20px;
}

.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}

.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}

.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}

.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}

/* 精品推荐模块 */

.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
    line-height: 60px;
}

.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul {
    float: left;
    margin-left: 30px;
}

.goods ul li {
    float: left;
}

.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}

.mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}

/* box核心部分 */

.box {
    margin-top: 30px;
}

.box .head {
    height: 50px;
}

.box .head h3 {
    float: left;
    font: size 16px;
    color: blue;
    padding-left: 30px;
}

.box .head a {
    float: right;
    font-size: 16px;
    color: #a5a5a5;
    padding-right: 30px;
    padding-top: 10px;
}

.box .box-bd li {
    height: 270px;
    width: 228px;
    background-color: #fff;
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}

.box .box-bd .hh {
    margin-right: 0;
}

/* 图片充满盒子 */

.box .box-bd li img {
    width: 100%;
}

.box .box-bd li h4 {
    font: size 16px;
    color: black;
    padding: 20px 20px 20px 25px;
    font-weight: normal;
}

.box .box-bd li em {
    font-size: 12px;
    color: blue;
    padding-left: 25px;
}

.box .box-bd li span {
    font-size: 12px;
    color: black;
}

/* 页脚 */

.footer {
    height: 415px;
    background-color: #fff;
}

.footer .w {
    padding-top: 35px;
}

.copyright {
    float: left;
}

.copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}

.copyright .app {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
    font-size: 16px;
}

.links {
    float: right;
}

.links dl {
    float: left;
    margin-left: 100px;
}

.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.links dl dd a {
    color: #333;
    font-size: 12px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header w">
        <!-- logo部分 -->
        <div class="logo"><img src="images\logo_03.png" alt=""></div>
        <!-- 导航栏部分 -->
        <nav class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </nav>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="请输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images\user.png" alt="">
            qq-lilei
        </div>
    </header>
    <!-- banner -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
                    <li><a href="#">前端开发<span> &gt;</span></a></li>
            </div>
            <!-- course 课程表模块 -->
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 精品推荐 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- box核心内容区域 -->
    <div class="box w">
        <div class="head">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <!-- 清除副盒子,下个盒子得位置会根据子盒子的高度放置 -->
            <ul class="clearfix">
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li class="hh"><img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
                <li class="hh"><img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <em>高级</em>
                    <span> • 1125人在学习</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 5. footer 模块制作 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载APP</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</body>

</html>

10. 清除内外边距

* {
    margin: 0;
    padding: 0;
}

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一样，布局千需要清除网页元素内外边距。

11.清除浮动,固定盒子

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

12 定位

Snipaste_2021-03-29_15-24-12.png

1.10定位叠放次序.png

1.11定位扩展.png

Snipaste_2021-03-29_15-26-21.png

土豆网案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
        .tudou:hover .mask {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

13 display显示和隐藏

Snipaste_2021-03-29_15-32-12.png

14 visbility显示和隐藏

Snipaste_2021-03-29_15-32-50.png

15 overflow 溢出

Snipaste_2021-03-29_15-34-00.png

16 css 三角

Snipaste_2021-03-29_15-41-16.png

avatar
文章
阅读
粉丝