Django 一些CSS常识

三种引用方式

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伪类作用:当鼠标放在标签上时,可以能够设置一些样式。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249