美文网首页
03_CSS入门和高级技巧(1)

03_CSS入门和高级技巧(1)

作者: 王裕杰 | 来源:发表于2019-03-07 17:40 被阅读0次

    上节课知识的复习

    插入图片,页面中能够插入的图片类型:jpg、jpeg、bmp、png、gif;不能的psd、fw。

    语法:

    <img src=”路径” alt=”替代文字” />
    
    

    相对路径、绝对路径:
    相对路径就是从html页面出发,找到图片:

    <img src=”a/b/1.jpg” />
    
    

    等价于

    <img src=”./a/b/1.jpg” />
    

    图片位于html文件较浅的文件夹中:

    <img src=”../../../1.jpg” />
    

    绝对路径:直接的门牌号。以http://开头,或者以/开头的都是绝对路径。

    <img src=”http://www.163.com/images/logo.png” />
    

    自己的服务器根目录:

    <img src=”/images/logo.png” />
    
    
    根目录的应用

    超级链接
    a标签,语法:

    <a href=”地址” title=”悬停文字” target=”_blank”>链接的文字</a>
    

    超级链接还能做页面锚点

    <a name=”info”></a>
    

    此时就能用1.html#info来直接看见这个内容

    表单
    form标签里面,这个标签我们在Ajax课程上详细介绍。
    input类型:

    text、password、radio、checkbox、submit、button、reset
    
    

    下拉框:

    select、option
    

    多行文本框:

    textarea
    
    

    单选框如果想互斥,必须要有相同的name属性。如果想点击文字,就能勾选,就要有label

    <input type=”radio” name=”sex” id=”male” />
    <label for=”male”>男</label>
    
    

    无序列表、有序列表、定义列表
    注意嵌套的写法,ul的儿子只能是li,ul的孙子是谁无所谓:

    <ul>
       <li>
           <h3></h3>
           <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
           </ul>
       </li>
       <li></li>
       <li></li>
       <li></li>
    </ul>
    
    

    表格

    1.表格的基本使用

    表格的基本使用
    <table border="1">
           <tr>
              <td>第1行,第1个小格。</td>
              <td>第1行,第2个小格。</td>
              <td>第1行,第3个小格。</td>
              <td>第1行,第4个小格。</td>
           </tr>
           <tr>
              <td>第2行,第1个小格。</td>
              <td>第2行,第2个小格。</td>
              <td>第2行,第3个小格。</td>
              <td>第2行,第4个小格。</td>
           </tr>
           <tr>
              <td>第3行,第1个小格。</td>
              <td>第3行,第2个小格。</td>
              <td>第3行,第3个小格。</td>
              <td>第3行,第4个小格。</td>
           </tr>
        </table>
    

    如果有表头的语义,那么应该书写th替换td。也就是说td和th都是小格格。

    2.表格单元格的合并

    单元格的合并,单元格的合并属性,colspan、rowspan。一定要写在td或者th上,tr是没有这两个属性的。

    colspan我们叫做列跨度,rowspan行跨度。这两个属性,都是小格格(td)的属性,而不是“行”的属性

    一个完整的表格,是有caption、thead、tbody三个部件的:

    thead就是表格头部体的意思,tbody就是表格内容体的意思,caption就是表格标题

    <table>
       <caption>我是标题</caption>
       <thead>
           <tr>
              <th></th>
              <th></th>
              <th></th>
           </tr>
           <tr>
              <th></th>
              <th></th>
              <th></th>
           </tr>
       </thead>
       <tbody>
           <tr>
              <td></td>
              <td></td>
              <td></td>
           </tr>
           <tr>
              <td></td>
              <td></td>
              <td></td>
           </tr>
       </tbody>
    </table>
    

    div 和 span 标签

    1.div 标签

    div是division分割的意思,在页面上表示容器,将相同语义的一组元素放在同一个div里面。

    div是典型的容器级标签,可以包裹任何东西。

    语义上来说,所有相同语义、相关的语义的元素,都要放到一个div里面。

    <div>
           <h3>中国主要城市</h3>
           <ul>
              <li>北京</li>
              <li>哈尔滨</li>
              <li>吉林</li>
              <li>长春</li>
           </ul>
       </div>
    
       <div>
           <h3>中国著名男演员</h3>
           <ul>
              <li>郭德纲</li>
              <li>刘德华</li>
              <li>邓超</li>
              <li>胡歌</li>
           </ul>
    
        </div>
    

    div标签,浏览器没有任何的默认样式。

    div这个东西能够把层次分的很清楚。
    div负责描述页面的结构,css负责描述页面的样式。

    2.span

    span表示跨度,就是文本级的div。

    就是把一些语义相近、功能相同的文本标签,都包裹在一起。注意,直觉上觉得span比a大,比p小。

    span也没有任何的默认样式。span单独使用没有什么意义,都是配合样式表使用的。

       <p>
           今天是CSS的第1天,每天一定要按时<span>完成作业</span>,要按时吃饭睡觉,要<span>多吃蔬菜</span>少喝酒,上课不要迟到。
        </p>
    

    HTML杂项

    1.注释

    任何的语言都有注释,注释是不会当做程序执行的,是给程序员自己看的。

    HTML中,注释的语法:

    <!--这是网页的头部-->
    

    换行是合法

       <!--
           这是网页的内容
           制作人邵山欢
        -->
    

    很明显,写一些注释,对代码的清晰度、可读性有很大的提升。

    sublime中,按ctrl+/ , 能够快速输入一个注释。

    为了方便调试代码,经常会把一些代码注释掉,集中精力看其余的代码。

    2.字符实体

    也叫作转义字符。

       <div>
           好高兴啊,今天老师教会我们&lt;h1>是主标题的意思,我真开心呀!
    
        </div>
    

    也就是说,在写HTML页面的时候,经常会有误会,比如<就正常出现。那么为了防止HTML页面认为这是一个标签,所以就应该写成转义字符。

    所有的转义字符,都是这样的格式:&字母;

    &lt; 就是< , lt就是英语less than小于
    &gt; 就是> , gt就是英语greater than大于
    &copy; 就是© 版权符号
    &nbsp; 就是空格

    有一个非常重要的转义字符,就是nbsp。 non-breaking space,无换行空格。
    看代码:

       <ul>
           <li>邓  超</li>
           <li>孙  俪</li>
           <li>王宝强</li>
        </ul>
    

    两个空格,折叠成了一个空格

    所以要用 来表示一个中文的空格:

       <ul>
           <li>邓&nbsp;超</li>
           <li>孙&nbsp;俪</li>
           <li>王宝强</li>
        </ul>
    
    

    废弃标签介绍

    你会发现,现在的HTML标签只负责语义、结构。不负责样式的。但是在2008之前,HTML也是负责样式的。

    但是HTML中,有一些标签,具有浓郁的样式色彩。就是这个标签,不是负责语义的,而是负责样式的,2008年开始,坚决的废弃掉了这些标签,用CSS来替代他们的功能。

    这些标签:

    <b></b>
    <u></u>
    <i></i>
    <del></del>
    
    

    丝毫看不出语义,只有样式,所以是被废弃了!

    这些标签,我们还有点用,当做CSS钩子,什么是钩子,以后再说!

    还有一些标签,是擦边球,就是自己也有一些语义,但是也有一些样式色彩,这些标签是可以合理使用的:

    <p><strong>我是一个文字</strong></p>
    <p><em>我是一个文字</em></p>
     
    

    em是emphasize的意思,也是强调的意思。

    strong、em要比b、i好。

    HTML在现在的社会,就是负责页面语义和结构的,所以标签极大的简化。页面上常用的标签实际上就几个:

    容器:div、ul(li)、ol、dl、table

    放文字的: h系列、p、span、a

    文本流:img、input

    当做css钩子:b、u、i

    最后最后强调一下,HTML放什么标签,不是看什么样子,要看语义!

    CSS整体感知

    1.简介

    前端开发3层

    • HTML:结构层 语义、结构
    • CSS:样式层 样式
    • JS: 行为层 交互、行为、动画

    CSS的全程是cascading style sheet , 层叠式样式表,“样式表”比较好理解,“层叠式”比较难理解。

    CSS的维护者也是w3c,最新版本是CSS3,但是浏览器没有那么的兼容,所以我们学习的是CSS2.1

    2.整体感知

    css分为两个部分,选择谁、设置什么样式。

        <style type="text/css">
            h1{
                color: red;
                background-color:blue;
                font-size: 84px;
                font-size: initial;
            }
    
            p{
                color: green;
                font-size: 04px;
                text-shadow: 8px 8px 8px black;
                font-family: "微软雅黑";
                transform: rotate(94deg);
                width: 944px;
    
            }
        </style>
    

    上面的h1、p就是选择器。表示选择哪些HTML标签给他们加样式,就是说你要给谁加样式。

    然后大括号里面,就是k:v;的结构,把所有的样式列出来,拥有的样式就写上,没有的样式不写,有多少写多少:

    选择器{
        k:v;
        k:v;
        k:v;
        k:v;
        k:v;
    }
    
    选择器{
        k:v;
        k:v;
        k:v;
        k:v;
        k:v;
    }
    
    

    3.style标签——css的舞台

    所有的css样式,都要写在style标签中。

    style标签写在<head>里面。

        <style type="text/css">
        </style
    

    style就是样式的意思,表示这个标签里面写的是样式。
    type是类型;
    text/css表示纯文本的css。

    傻瓜版的sublime能快速输入,只需要输入<sty 按tab就行了:

    <sty快捷键

    然后就在style标签里面,书写样式:

        <style type="text/css">
            h1{
                color: red;
                background-color:blue;
                font-size: 84px;
                font-size: initial;
            }
        </style>
    

    4.css对换行不敏感、缩进不敏感

            h1{color: red; background-color:blue; font-size: 84px; font-size: initial;
            }
    

    等价于:

            h1{
                color: red;
                background-color:blue;
                font-size: 84px;
                font-size: initial;
            }
    

    写成一行,css代码尺寸小了,这是最后压缩的事情,写的时候,还是一行一行写。

    5.分号

    每个选择器最后一项的属性值可以没有分号,其他都要有。

            h1{
                color: red;
                background-color:blue;
                font-size: 84px;
                font-size: initial
            }
    

    我们一般也会把最后一项写上分号。

    6.先学几个属性

    文字颜色:color:red;

    color就是文字颜色的意思,后面的值我们使用英语描述。我们后面的课程将告诉你,还能用rgb、十六进制来描述颜色,现在先不着急。

    sublime中快捷键是c tab

    背景颜色:background-color:blue;
    background就是背景的意思,中间有个短横和color连接。我们css中多个词组都是短横分开的。

    sublime中快捷键是bgc tab

    字号:font-size:40px;
    font就是字体,size就是尺寸。px是英语pixel像素的意思。

    边框:border:1px solid green;

    border就是边框的意思,它的值很有意思,是三个部分,用空格隔开。

    这三个部分,可以顺序交换。

    • 1px 就是粗细,可以任意调整;
    • solid就是实线,如果是虚线写dashed;
    • green就是颜色,可以任意设置。

    基本选择器

    选择器就是怎么选择元素的。

    1.标签选择器

    标签选择器是最最简单的选择器,就是选择页面上所有的同种标签。

    要注意的是,选择的是页面上的所有这个标签,而不是一个。

        <style type="text/css">
            p{
                color: green;
            }
        </style>
    

    body就是页面,如果要设置整个页面的背景颜色,要设置body。

            body{
                background-color: yellow;
            }
    

    标签选择器有点不好用,要选择就都选择了。所以主要的用途就是设置一些标签的默认情况。

    2.id选择器

    就是对某一个(注意就一个)元素,进行特别的样式设定的时候用。就是给元素一个特别的名字,然后通过这个名字来选择它。

    就是给元素加上id属性,然后在选择器用#开头进行选择。

    <p id="description">HTML在现在的社会,就是负责页面语义和结构的,所以标签极大的简化。页面上常用的标签实际上就几个:</p>
    

    选择的时候写:

        <style type="text/css">
            #description{
                color: red;
            }
        </style>
    

    首先,任何元素都可以设置id属性,合法的id属性是英语字母开头(大小写敏感,也就是说aa和AA是两个不同的合法id)、可以有数字、下划线、短横。

    同一个页面中,id绝对不能相同。哪怕是不同的元素,id也不能相同,我们必须保证,id在页面上是唯一的

    下面这个例子是错误的,初学者常见的错误:

    <p id="para">我是一个段落</p>
    <h3 id="para">我是一个h3</h3>
    

    页面上已经有元素的id是para了,所以不能有元素仍然叫para。即使之前叫做para的是一个p,后面叫做para的是一个h3,也不行!是不合法的!

    你会发现,我们可以综合利用标签选择器、id选择器一起做效果。比如,我们让所有的p的字号都是20px,让其中某一个的颜色是红色。这就是层叠式样式表的第一层含义,同一个标签可以有多个选择器选择它

    选择器

    3.类选择器

    id有点不好用,因为是唯一的,如果页面上有两个、三个元素,想设置为同样的样式,id就无能为力了。

    所以就是用类选择器,就是给某一类元素,设置相同的类名,然后通过这个类名来选择

    class叫做类名。

        <p class="warning">我是段落1</p>
        <p class="warning">我是段落2</p>
    

    选择的时候,用点:

        <style type="text/css">
            .warning{
                color: red;
            }
        </style>
    

    类名的命名和id是一样的,英语字母开头(aa和AA是不一样的类名)、数字、下划线、短横。

    可以有多个标签携带同一个类名:

        <h1 class="warning">CSS入门和高级技巧</h1>
        <p class="warning">我是段落1</p>
        <p class="warning">我是段落2</p>
    

    同一个标签,可以携带多个类名,用空格隔开

    <p class="warning p1">我是段落1</p>
    

    这个p标签同时携带了两个类,所以.warning选择器和.p1选择器能同时选择上他们。

            .p1{
                color: green;
            }
           .warning{
                color: red;
            }
    

    注意,使用空格隔开,不是两个class

    <p class=”warning” class=”xian”>我是一个错误的示范</p>
    

    原子类的意思: 比如来制作这个效果:


    原子类

    用原子类是最方便的,所谓的原子类,就是一些简单的属性做成一个类,然后元素自行选择:

        <style type="text/css">
            .hong{
                color: red;
            }
            .da{
                font-size: 04px;
            }
            .xian{
                text-decoration: underline;
            }
        </style>
    

    各取所需:

        <p class="hong da">我是段落</p>
        <p class="hong xian">我是段落</p>
        <p class="da xian">我是段落</p>
    

    类名的使用的时候,尽量用有语义的单词来表示:warning、important、ad、main

    不要用一些具体的单词:red、hong、left-part、right-part

    写页面到底用id还是class呢?答案非常肯定:class。哪怕页面上只有某一个要改样式,那么我尽量给这一个元素一个单独的class,也不给他id。

    这是因为id是js常用的标签,如果你在css就把id用掉了,js程序就有耦合性的问题。

    class上样式,id上行为。

    高级选择器

    1.后代选择器

    后代选择器用空格表示:

        <div class="news">
            <p>我是段落</p>
            <p>我是段落</p>
            <p>我是段落</p>
        </div>
    

    选择这些p,可以用后代选择器:

        <style type="text/css">
            .news{
                color: red;
            }
        </style>
    

    我们现在要详细介绍一下:
    选择的是后代的元素,不一定是儿子,如果是孙子、曾孙子、重孙子……都行

    <div class="div1">
           <div class="div2">
               <div class="div3">
                  <p>我是一个小p</p>
               </div>
           </div>
        </div>
    

    选择的是div1这个div中的后代p:

        <style type="text/css">
            .div2 p{
                color: green;
            }
        </style>
    

    可以多重描述祖先顺序,但是顺序必须真实存在

        <style type="text/css">
            .div1 .div2 .div3 p{
                color: green;
            }
        </style>
    

    现在反应要快,看见空格了,就是后代。

    2.交集选择器

    选择又是p标签,同时又有haha类的元素:


    交集选择器

    p.haha
    一般来说,语法是:标签名.类名

    别的交集选择器也合法,但是没人这么写:
    #box.haha

    注意
    div.boxdiv .box的区别

    3.并集选择器

    逗号表示并集,“都”

        <style type="text/css">
           p,div{
               color:red;
           }
        </style>
    

    等价于:

    p.haha{
               color:red;
           }
           div.xixi{
               color:red;
           }
    

    4.通配符*

    选择所有元素,用*

        <style type="text/css">
            *{
                color: red;
            }
        </style>
    

    继承性和层叠性

    1.继承性

    css规定,有一些属性,给某一个元素设置了,它的后代元素都同样拥有它的这个属性了

    继承性

    哪些属性能够继承呢?

    color
    text-系列 : 比如text-decoration:underline;
    font-系列: 比如font-size:30px;
    line-系列

    background-color不能继承!border不能继承!等等

    能够把一些初始的、基本的、普遍的设置,写在body里面。

        <style type="text/css">
            body{
                font-size: 70px;
            }
        </style>
    

    “层叠式”样式表,cascading的第二层含义,就是继承性。

    2.层叠性

    层叠性是什么?就是处理冲突的能力。就是当多个选择器都选择上了同一个标签,听谁的

    同一个标签:

    <p class="haha" id="para">我是段落</p>
    

    现在有三个选择器都能够选择上它:

        <style type="text/css">
           p{
               color:red;
           }
    
           #para{
               color:green;
           }
    
           .haha{
               color:blue;
           }
        </style>
    

    听谁的?此时,就是所谓的层叠性发挥作用了,CSS有着一套非常严密的法律,此时听id的。


    层叠性

    选择器的一个基本权重: id的权重 > 类选择器 > 标签选择器

    比较复杂的权重计算:


    权重计算

    10个便签,也干不过1个类。


    权重计算

    只有选中到文字所在的标签,才能计算权重!!如果是继承而来的,权重是0!


    权重计算

    如果权重相同怎么办?

    • 如果是都选择上了,以style列表中后出现的选择器为准
    • 都是通过继承而来的呢:就近原则,谁描述的近,听谁的。

    作业

    1.标签列表

    作业
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .yule{
                color: pink;
            }
    
            .read{
                color: yellow;
            }
    
            .zhengzhi{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>
                    <span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>
                <li>
                    <span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>
                <li>
                    <span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>
                <li>
                    <span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>                       
    
            </ul>
    
            <ul>
                <li>
                    <span class="zhengzhi">政治新闻政治新闻政治新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>
                <li>
                    <span class="zhengzhi">政治新闻政治新闻政治新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>
                <li>
                    <span class="zhengzhi">政治新闻政治新闻政治新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>                       
                <li>
                    <span class="zhengzhi">政治新闻政治新闻政治新闻</span>
                    <span class="read">[阅读:15]</span>
                </li>
            </ul>
        </div>
    </body>
    </html>
    
    

    2.怎么确定权重

    权重计算

    权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1,比如:

    body #content .data img:hover
    

    最终的权重值是0122;#content是一个id选择器加了100,.data是一个class类选择器加了10,:hover伪类选择器加了10, body和img是元素加了1 。

    相关文章

      网友评论

          本文标题:03_CSS入门和高级技巧(1)

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