当前位置： 移动技术网 > IT编程>脚本编程>Python > 前端基础之CSS

前端基础之CSS

2019年05月30日  | 移动技术网IT编程  | 我要评论

情迷但丁湾第四季,灵通资讯,刘华清简历

摘要

01.css（层叠样式表）的三种设置方法

  •  css又名层叠样式表，它的作用就是给html网页进一步装饰，前面我们学习html结构的时候其实就是学习了html的一个大的骨架结构，后面学习的表form表单展现的形式是很low的，需要进一步对齐修饰设置，让它变得更高大上起来，这就离不开css的知识。
    • 层叠样式表(英文全称：cascading style sheets)是一种用来表现html（标准通用标记语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
    • css 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
  • 语法结构：选择器 {属性： 属性值；属性： 属性值}
  • 注释形式：/*这是注释内容*/
  • 三种设置方法：
      • head里面style中写css：<style>p {color: red}</style>
      • head里面link引入css文件：<link rel="stylesheet" href="my_scc_02.css"> 
      • 在标签内直接指定style：<p style="color: red">hello world!</p>

我们在设置不同种类标签内容的样式的时候，需要知道我们修改的标签的位置，接下来看看如何精确定位设置样式的位置，才能设置其样式。

标签通常同的属性有：id和class类

  • 标签选择器：根据标签种类来设置该类标签样式
  • id选择器：每个标签都可以设置一个id在唯一标识它，所以我们可以通过这个id来定位到该标签位置，从而进行修改样式操作，id前面注意要加上#
  • 类选择器：在标签里面设置class="c1"，c1是一个类的设置样式，在style里定义的时候前面需要加点（.c1 {color：red}）
  • 通用选择器：类似这种* {color： blue}，*代表所有标签，意思就是所有都全部设置 
    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css学习测试</title>
    <style>
        p {color: gold}
        .c1 {color: mediumturquoise}
        #p1 {color: blue}
        * {color: red}
    </style>
</head>
<body>
<p>我要记住你的样子</p>
<div>像鱼记住水的拥抱</div>
<span>像云在天空中停靠</span>
<h3 class="c1">夜晚的来到</h3>
<p id="p1">也不会忘了阳光的温暖</p>
    </body>
    （涉及查找优先级的问题，在后面会谈及。）

（span套span，不符合html5规则）

  • 后代选择器==>div  span：div里面所有的span 
    <div>
    01我要忘了你的样子
    <br>
    <span>
        02像鱼忘了海的味道
        <br>
        <span>
            03放下所有梦和烦恼
        </span>
    </span>
</div>

  • 儿子选择器==>div>span：div里面儿子一层（第一层）所有的span 
    <style>
        div>span {color: deeppink}
    </style>

<div>主div
    <div>主div的儿子1
        <span>主div的孙子1</span>
    </div>
    <p>主div的儿子2
        <span>主div的孙子2</span>
    </p>
</div>

  • 毗邻选择器==>div+span：div下面挨着的span 
    <style>
        div+span {color: deeppink}
</style>

<div>主div
    <p>主div的儿子2
        <span>主div的孙子2</span>
    </p>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>

  • 弟弟选择器==>div~span：与div同一级且下面所有的标签 
        <style>
        div~span {color: deeppink}
    </style>

<div>主div
    <p>主div的儿子2
        <span>主div的孙子2</span>
    </p>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>

  •  在标签内自定义一个属性，用于找到该标签的作用。 
        <style>
        [xxx] {color: deeppink}
    </style>

<p xxx>自定义属性xxx</p>
<p xxx="1">自定义属性+值1</p>
<p xxx="2">自定义属性+值2</p>
<p id="xxx">我是打酱油的！</p>

        <style>
        [xxx='1'] {color: deeppink}
    </style>


<p xxx>自定义属性xxx</p>
<p xxx="1">自定义属性+值1</p>
<p xxx="2">自定义属性+值2</p>
<p id="xxx">我是打酱油的！</p>

        <style>
        [xxx='2'] {color: deeppink}
    </style>

<span xxx="2">我是span,我的属性里有xxx</span>
<p xxx>自定义属性xxx</p>
<p xxx="1">自定义属性+值1</p>
<p xxx="2">自定义属性+值2</p>
<p id="xxx">我是打酱油的！</p>

  • 分组： 
    <style>
    div,p,span {color: red}
</style>

<div>我是div</div>
<p>我是一个p</p>
<span>我是span</span>

  • 嵌套： 
    <style>
    div p,span {color: red}
</style>

<div>我是div
    <p>我是div里面的一个p</p>
    <span>我是div里面的span</span>
</div>
<p>我是一个p</p>
<span>我是span</span>

  • div p嵌套关系，然后div和span是组合关系，所以：

  •  a标签的四种状态： 
        <style>
        a {text-decoration: none}   /*去掉下划线*/
        a:link {color: green}       /*链接什么都不干的时候颜色*/
        a:hover {color: red}        /*鼠标放在链接上面不做任何动作时候变的颜色*/
        a:active {color: blue}      /*鼠标点击链接时候，链接的颜色*/
        a:visited {color: gray}     /*当这个链接已经点击过，将变成的颜色*/
    </style>

<p><a href="#我是下面" id="我是上面">点我跳到下面</a></p>
<p><a href="http://www.t66y.com" target="_blank">点我开启新的人生篇章(爬梯吧）</a></p>
<p><a href="http://www.baidu.com" target="_blank">百度一下</a></p>
<p><a href="#我是上面" id="我是下面">点我跳到上面</a></p>
  • 获取焦点：让输入框在选中时候，背景颜色变成自定义颜色 
        <style>
        input:focus {background-color: yellow}
    </style>

<form action="">
    <label for="a1">用户: <input type="text" id="a1" name="username"></label>
    <label for="a2">用户: <input type="password" id="a2" name="password"></label>
    <input type="submit">
</form>

  •  伪元素选择器：将某一标签的第一个，开头、结尾处设置样式。
  • first-letter 
        <style>
        p:first-letter {color: red;
                        font-size: 24px}
    </style>

<p>我闻西方大士，</p>
<p>为人了却凡心。</p>
<p>秋来明月照蓬门，</p>
<p>香满禅房幽径。</p>
<p>屈指灵山会后，</p>
<p>居然紫竹成林。</p>
<p>童男童女拜观音，</p>
<p>仆仆何嫌荣顿？</p>

  • before：

       <style>
        p:before {content: '△';
                  color: red;
                  font-size: 24px}
    </style>

<p>万物由道而生，循着道成长，而后又回归于道。</p>
<p>人可以毁灭，但不可以屈服。</p>
<p>你要克服的是你的虚荣心，是你的炫耀 欲，你要对付的是时时刻刻想出风头的小聪明。</p>

  • after:

        <style>
        p:after {content: '☆';
                  color: red;
                  font-size: 24px}
    </style>

<p>包租婆，怎么就没有水了呢</p>
<p>维护世界和平就靠你了,我这里有本秘籍,见与你有缘,就十块钱卖给你了.</p>

  •  相同选择器，不同的引入方式：就近原则（从上往下生效），看哪个style里标签更近。
  •  不同选择器，不同引入方式：行内样式>id选择器>类选择器>标签选择器

  •  块儿级标签的宽度和长度： 
         <style>
        div {width: 800px; height: 100px;background-color: mediumspringgreen}
    </style>

<div>樊登读书，改变你我</div>

  • 字体相关设置（大小、自重、颜色）： 
        <style>
        p {font-size: 24px;
           font-weight: lighter;
           color: #ff6700;
        /*color: rgb(0,0,255);*/
        /*color: rgba(0,0,255,0.2)}   最后的0.2是透明度（0-1之间）*/
    </style>

<p>面朝大海，春暖花开</p>

  • 文本属性：（通常给a标签用）

        <style>
        p {text-align: center;
        text-decoration: line-through}
    </style>

<p>浪花一朵朵</p>
<p>桃花朵朵开</p>

     

     

  • 　　
  • 去掉跳转文字的下划线： 
        <style>
        a {text-decoration: none}
    </style>

<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">谷歌一下</a>

  • 背景属性： 
        <style>
        .c1 {
        height: 200px;
        background: url("20190529[21-04].png") blue no-repeat center;
        }

        .c2 {height: 200px;background-color: tomato}
        .c3 {height: 200px;background-color: yellow}
        .c4 {height: 200px;background-color: greenyellow}

    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>

  • 边框： 
        <style>
        div {border: 1px dashed red}
    </style>

<div>我是一条鱼</div>

  • 画圆：

        <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
            border: 2px dashed black;
            border-radius: 50%;
        }
    </style>

<div></div>

（设置不显示，不会继续占用位置）

  •  display：none 
        <style>
        [xxx] {display: none}    /*设为none代表含xxx属性标签的内容都不显示，且不再占用原位置
    </style>


<div>开头1</div>
<div xxx>看我显示没有1</div>
<div xxx>看我显示没有1</div>
<div>结尾2</div>

  • display:inline    将块级标签变成行内标签 
        <style>
        div {
            height: 300px;
            width: 200px;
            background-color: aquamarine;
            display: inline;
        }
    </style>

<div>天天</div>
<div>年年</div>

  • display:block    将行内标签变成块级标签 
        <style>
        span {display: block}
    </style>

<span>美好的事情</span>
<span>即将到来</span>

  •  display ：inline-block  让span标签具有独占一行且可以设置长宽

        <style>
        span {
            width: 120px;
            height: 400px;
            background-color: bisque;
            border: 2px solid red;
            display: inline-block;
        }
    </style>

<span>第一个span</span>
<span>第二个span</span>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网