美文网首页
Django 一些CSS常识

Django 一些CSS常识

作者: 早_wsm | 来源:发表于2020-11-03 09:19 被阅读0次

三种引用方式

css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式：

  • 标签属性上编写，适用范围：指定一个标签。【不推荐，多标签无法复用样式】

    <div style="color:green;">通过改变属性来改变样式</div>

  • head标签中定义，适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /*给所有的div设置样式*/
        div {
            color: rebeccapurple;
            size: A3 ;
        }
    </style>
</head>
<body>
<div>继承</div>
<div>style</div>
<div>一样风格</div>
</body>
</html>

  • 在css文件中定义，适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】

    • 创建css文件，如：common.css

      div {
    color: green;
}

    • 创建html文件，如：index.html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div>通过链接</div>
    <div>复用样式</div>
</body>
</html>

写单页面时把样式写在head头部；写多页面时，把样式写入css文件，然后再在要应用的html页面引入css即可

选择器

1. 标签选择器

根据标签改变样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /*使用id选择器*/
        #id1 {
            color: rebeccapurple;
            size: A3 ;
        }
        /*使用class选择器*/
        .aaa {
            color: red;
        }
        /*使用标签选择器*/
        p {
            color: #c0a16b;
        }
    </style>
</head>
<body>
<div>继承</div>
<div>style</div>
<div id="id1">一样风格</div>
<span class="aaa">同样的class</span>
<p>使用标签改变样式</p>
</body>
</html>
2. ID选择器

根据ID改变样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        #id1 {
            color: rebeccapurple;
            size: A3 ;
        }
    </style>
</head>
<body>
<div>继承</div>
<div>style</div>
<div id="id1">一样风格</div>
<span id="id1">同样的id</span>
</body>
</html>
3. 属性选择器

根据属性改变样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        #id1 {
            color: rebeccapurple;
            size: A3 ;
        }
        .aaa {
            color: red;
        }
        p {
            color: #c0a16b;
        }
        .shu[na=xxx] {
            color: #5bc0de;
            size: A5;
        }
    </style>
</head>
<body>
<div>继承</div>
<div>style</div>
<div id="id1">一样风格</div>
<span class="aaa">同样的class</span><br>
<span class="shu" name="xxx">属性选择</span><br>
<span class="shu" na="xxx">同样的类不一样的属性</span>
<p>使用标签改变样式</p>
</body>
</html>
4. class选择器

body中找到所有class属性值匹配的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /*使用id选择器*/
        #id1 {
            color: rebeccapurple;
            size: A3 ;
        }
        /*使用class选择器*/
        .aaa {
            color: red;
        }
        /*使用标签选择器*/
        p {
            color: #c0a16b;
        }
    </style>
</head>
<body>
<div>继承</div>
<div>style</div>
<div id="id1">一样风格</div>
<span class="aaa">同样的class</span>
<p>使用标签改变样式</p>
</body>
</html>
5. 子类继承式选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        .head ul .hat {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">此处为正常显示样式</a>
    <div class="head">
        <a class="hat">此内容继承了head类选择器</a>
        <ul>
            <li>此处也做了继承,显示的样式和head样式相同</li>
            <li>
                <a class="hat">继承处</a>
            </li>
            <li>
                <a>继承处</a>
            </li>
        </ul>
    </div>
    <div class="head">
        <a href="#">此处为head类</a>
    </div>
</body>
</html>

CSS样式

height 高度 & width 宽度
  • 像素，根据像素设置。
  • 百分比，根据百分比设置。

注意：行内标签无法设置高度和宽度，如果想要设置必须转换为块级标签才能应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        .a1 {
            height: 60px;
            width: auto;
            background-color: #5bc0de;
        }

        .a2 {
            height: 60px;
            width: 50%;
            background-color: #ac2925;
        }

        .a3 {
            height: 60px;
            width: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="a1">标签1</div>
<div class="a3">标签2</div>
<div class="a2">标签3</div>
</body>
</html>
display 显示

可通过dispaly改变标签显示方式,控制展示状态

  • display:block，变为块级标签。
  • display:inline;，变为行内标签。
  • display:inline-block，变为行块内标签（行内和块级特性结合）。
  • display:none，把标签隐藏。（设置display:none隐藏标签，移除之后显示标签）
float 浮动

注意:使用浮动后,一定记得清楚浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
</head>
<body>
    <h1>正确示例</h1>
    <h2>向左浮动</h2>
    <div style="background-color: pink;">
        <div style="float:left;color: green;">天堂</div>
        <div style="float: left;color: red;">地狱</div>
        <!-- 清除浮动，与使用了float属性的标签放在同一级 -->
        <div style="clear:both;"></div>
    </div>
    <h2>向右浮动</h2>
    <div>
        <div style="float:right;width: 100px;background-color: green;">天堂</div>
        <div style="float: right;width: 100px;background-color: red;">地狱</div>
        <div style="clear: both;"></div>
    </div>
    <h2>一个向左一个向右</h2>
    <div>
        <div style="float:left;width: 100px;background-color: green;">天堂</div>
        <div style="float: right;width: 100px;background-color: red;">地狱</div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>
font 字体 & 颜色
  • 字体格式
  • 字体大小
  • 字体加粗
  • 字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        .c1{
            font-family: "Times New Roman",Georgia,Serif;
        }
        .c2{
            font-family: Arial,Verdana,Sans-serif;
        }
    </style>
</head>
<body>
    <h1>字体格式</h1>
    <div class="c1">改变字体</div>
    <div class="c2">使用类选择器改变字体</div>
    <h1>字体大小</h1>
    <div style="font-size: 13px;">改变字体大小</div>
    <div style="font-size: 16px;">改变字体大小</div>

    <h1>字体加粗</h1>
    <div style="font-weight: 100;">其实就是通过参数修改字体宽度</div>

    <div style="font-weight: 800">加粗字体</div>
    <h1>字体颜色</h1>
    <div style="color: red;">字体颜色</div>
    <div style="color:#f0ad4e">乏善可陈</div>
</body>
</html>
文字对齐方式
  • 水平方向：左、中、右
  • 垂直方向：上、中、下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        .demo1{
           width: 400px;
        }
        .demo2{
            width: 400px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>水平方向</h1>
    <div class="demo1" style="background-color: pink;text-align: left;">左对齐</div>
    <div class="demo1" style="background-color: darkseagreen;text-align: center;">居中</div>
    <div class="demo1" style="background-color: goldenrod; text-align: right;">右对齐</div>
    <h1>垂直方向</h1>
    <div class="demo2" style="background-color: pink;">引用demo2行高显示</div>
    <div class="demo2" style="background-color: darkseagreen;line-height: 100px;">调整高为100,刚好呈现居中</div>
    <div class="demo2" style="background-color: goldenrod;position: relative; ">
        <span style="position: absolute;bottom: 0;">使用相对行高为0,看起来下沉效果</span>
    </div>
</body>
</html>
padding 内边距
/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;
/* padding:上 右 下 左; */
padding:10px 0 2px; 4px;
/* padding:上下  右左; */
padding:7px 5px;
/* padding:上下右左; */
padding:8px;

padding内边距作用是 为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
</head>
<body>
<h1>无内边距</h1>
<div style="height: 200px;border: 1px solid #dddddd">
    <div style="background-color: darkseagreen;">听妈妈的话</div>
    <div>
        小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
    </div>
</div>
<h1>内边距示例1</h1>
<div style="height: 200px;border: 1px solid #dddddd">
    <div style="background-color: gold;padding: 10px;">听爸爸的话</div>
    <div style="padding: 8px;">
        小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
    </div>
</div>
<h1>内边距示例2</h1>
<div style="height: 200px;border: 1px solid #dddddd;padding: 10px;">
    <div style="background-color: gold;">听爸爸的话</div>
    <div>
        小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
    </div>
</div>
</body>
</html>
margin 外边距

外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。

  • margin-left:8px;
  • margin-right:2px;
  • margin-top:4px;
  • margin-bottom:18px;
  • margin: auto;
案例:小米导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        a {
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            padding: 10px;
            color: #f5f6f4;
            text-decoration:none;
        }
          body {
            margin: 0;
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        }
           .header {
            height: 40px;
            line-height: 40px;
            background-color: #333;
            color: #b0b0b0;
            font-size: 12px;
        }
        .container {
            width: 1190px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
    <div style="float: left;padding-right:30px;">
        <a href="#">小米商城</a>
        <a href="#">云服务</a>
        <a href="#">ioT</a>
        <a href="#">MIUI</a>
    </div>
    <div style="float: right;margin-left: 20px;">
        <a href="#">登录</a>
        <a href="#">注册</a>
        <a href="#">消息通知</a>
        <a href="#">购物车(0)</a>
    </div>
    <div style="clear: both;"></div>
    </div>
</div>

</body>
</html>
image-20200910101652673
border 边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div{
            height: 40px;
            width: 300px;

        }
    </style>
</head>
<body>
<div style="border: 1px solid #333333;"></div>
    <div style="border: 1px solid #333333;"></div>
    <div style="border: 2px solid #333333;"></div>
    <div style="border: 1px dotted red;"></div>
    <div style="border: 1px dotted goldenrod;"></div>
    <div style="border: 3px dotted goldenrod;border-right: 0"></div>

</body>
</html>
background 背景
  • background-color，设置背景颜色
  • backgroud-imgage，设置背景图片
  • background-repeat，背景图片如何重复
  • background-postion，背景图片位置
cursor 光标

cursor指鼠标放在标签上之后显示的形状。

  • cursor: pointer手
  • cursor: help带问号
  • cursor: move移动标
position 定位

固定标签使用

opacity 透明度

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。

hover 伪类

hover伪类作用：当鼠标放在标签上时，可以能够设置一些样式。

相关文章

网友评论

      本文标题：Django 一些CSS常识

      本文链接：https://www.haomeiwen.com/subject/djjmvktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Django 一些CSS常识|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！