码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-08-17 18:08:26      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:原子类   doc   版本   伪元素   列表   浏览器   不能   文件   英语字母   

上节课知识的复习

插入图片,页面中能够插入的图片类型: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就行了:
技术图片

然后就在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)

标签:原子类   doc   版本   伪元素   列表   浏览器   不能   文件   英语字母   

原文地址:https://www.cnblogs.com/shy-kevin/p/11369385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!