CSS总结笔记+案例(上)

简介: CSS总结笔记+案例

前端开发 第二节CSS


CSS总结笔记:


3.CSS样式


css,专门用来“美化”标签。


  • 基础CSS,写简单页面&看懂&改。
  • 模块、调整和修改


3.1CSS应用方法


1.在标签上

- 高度和宽度样式:
<img src="xxx" style="height:100px;" />
- 颜色样式:
<div style="color:red;">中国联通</div>


2.在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class='c1'>用户登录</h1>
    <form method="post" action="/login">
        <div>
            用户名:<input type="text" name="username">
        </div>
        <div>
            密码:<input type="password" name="password">
        </div>
        <input type="submit">
    </form>
</body>
</html>


3.写到文件中

.c1{
    height:100px;
}
.c2{
    color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>
</body>
</html>


案例:Flask中的应用(登录注册)


CSS文件:

.xx{
    color: green;
}


login.html文件(在HTML头内写CSS):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .c1{
            color: red;
        }
        .c2{
            height: 50px;
        }
    </style>
</head>
<body>
    <h1 class="c1">用户登录</h1>
    <form method="post" action="/login">
        <div class="c2">
            用户名:<input type="text" name="username">
        </div>
        <div class="c2">
            密码:<input type="password" name="password">
        </div>
        <input type="submit">
    </form>
</body>
</html>


register.html文件(在外部引入CSS文件):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/commons.css">
</head>
<body>
<h1 class="xx">用户注册</h1>
<div>
    用户名:<input type="text">
</div>
<div>
    密码:<input type="password">
</div>
<div>
    性别:<input type="radio">男 <input type="radio">女
</div>
<div>
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>
<div>
    擅长的领域:
    <select multiple>
        <option>Python</option>
        <option>C++</option>
        <option>Java</option>
    </select>
</div>
<div>
    备注:<textarea></textarea>
</div>
<div>
    <input type="button" value="button按钮">
    <input type="submit" value="button按钮">
</div>
</body>
</html>


3.2CSS选择器


#c2{
    color: gold;
}
<div id="c2">美国</div>


  • 类选择器(class)
.c1{
    color: red;
}
<div class="c1">中国</div>


li{
    color: pink;
}
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>


  • 属性选择器
input[type='text']{
            border: 1px solid red;
        }
        .v1[xx="456"]{
            color: gold;
        }
<div class="v1" xx="123">a</div>
<div class="v1" xx="456">b</div>
<div class="v1" xx="999">c</div>


  • 后代选择器


无穷代:

.yy li{
  color: pink;
}
<div class="yy">
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>


一代:

.yy > a{
    color: blue;
}
<div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>


关于选择器:

使用频率多:类选择器、标签选择器、后代选择器
使用频率少:属性选择器、ID选择器


关于多个样式覆盖问题:


若样式重复,style最后一个样式为最终样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>


若不想覆盖(加入! important):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>


3.4样式


1.高度和宽度

.c1{
    height: 300px;
    width: 500px;
}


注意:宽度,支持百分比。


2.块级和行内标签


  • 块级
  • 行内
  • css样式(既有块级又有行内标签特点):标签 -> display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国移动</span>
    <span class="c1">中国联通</span>
    <span class="c1">中国电信</span>
</body>
</html>


块级和行内标签的转换:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display: inline-block">中国</div>
    <span style="display:block;">联通</span>
</body>
</html>


高频率:块级+块级&行内。


3.字体和颜色


  • color:颜色
  • font-size:大小
  • font-weight:加粗
  • font-family:字体格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            font-size: 18px;
            font-weight: 500;
            font-family: Microsoft YaHei UI;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>


4.文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;
            text-align: center; /* 水平方向居中 */
            line-height: 59px; /* 垂直方向居中*/
        }
    </style>
</head>
<body>
    <div class="c1">刘备</div>
</body>
</html>


5.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
    <span>左边</span>
    <span style="float: right">右边</span>
  </div>
</body>
</html>


div默认块级标签,若浮动起来自己有多宽占多宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 200px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
  <div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
  </div>
</body>
</html>


如果标签浮动起来,就会脱离文档流。


解决:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 200px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
  <div style="background-color: dodgerblue">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div style="clear: both"></div>
  </div>
</body>
</html>


6.内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold">刘备</div>
        <div>
            汉景帝第十九代玄孙
        </div>
    </div>
</body>
</html>


7.外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;background-color: dodgerblue"></div>
    <div style="background-color: red;height: 100px;margin-top: 10px;"></div>
</body>
</html>


案例:小米商城(导航条)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 38px;
            color: #b0b0b0;
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
            height: 38px;
        }
        .header .account{
            float: right;
            color: white;
            height: 38px;
            line-height: 38px;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="menu">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>云服务</a>
            <a>有品</a>
            <a>开放平台</a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
</body>
</html>


总结


  • body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除?
body{
  margin: 0;
}
  • 内容居中


文本居中,文本会在这个区域中居中。

<div style="width: 200px; text-align: center">刘备</div>


区域居中,自己要有宽度 + margin-left:auto;margin-right:auto

.container{
    width: 980px;
    margin: 0 auto;
}
<div class="container">xxx</div>


  • 父级没有高度或者宽度,被本级支撑起来。
  • 若存在浮动,一定记得加入


CSS总结笔记+案例(下):https://developer.aliyun.com/article/1427896

目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
7天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
16 1
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
16 1
|
1月前
|
前端开发
CSS3的几个变形案例……
CSS3的几个变形案例……
17 0
|
1月前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
5 0
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量