04_CSS入门和高级技巧(2)
阅读原文时间:2023年07月10日阅读:1

HTML表格,table、tr、td(th);thead、tbody;caption。

一定要会根据图形,来写表格:

        <table border="1">
            <tr>
                <td>7</td>
                <td colspan="2">8</td>
            </tr>
            <tr>
                <td rowspan="2">9</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>1</td>
            </tr>
        </table>

HTML注释:<!--注释写在里面-->

            <!-- <tr>
                <td>0</td>
                <td>1</td>
            </tr> -->

字符实体(转义字符)

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&copy;  版权符号

废弃标签:b、u、i、del、strong、em

br标签是breaking打断的意思:<br>

<p>床前明月光,<br />疑是地上霜</p>

它是一个自封闭标签,自此我们已经遇见4个自封闭标签:

<meta name=”keywords” content=”” />
<img src=”1.jpg” />
<input type=”text” />
<br />

在2007~08年之前,所有的换行都是用<br />来完成的。而现在<br />已经被废弃,用p、div、h系列来进行换行:

<p>床前明月光,</p>
<p>疑是地上霜</p>

但是<br />也不是没用,就是有些时候,极特殊的用标签来打断语义不合适,没辙了,只能<br />,比如一个有换行的超级链接。

比如淘宝首页:

<p>
    <a href="">高级<br />搜索</a>
</p>

高级搜索如果拆分为两个p,不合适,所以就用br打断一下。

CSS: cascading style sheet层叠式样式表

舞台,写代码的地方:

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

语法:

<style type="text/css">
    h1{
        k:v;
        k:v;
        k:v;
        k:v;
    }
</style>

选择器

  • 基本选择器3种:标签选择器、id选择器、类选择器
  • 高级选择器4种:后代选择器、交集选择器、并集选择器、通配符

标签选择器:

p{
}

id选择器:

id页面唯一,只要是合法的命名,可以随便任取id。合法的命名:英语字母开头(AA和aa不同)、数字、下划线、横杠。

<p id=”pp”></p>

选择法是#

#warning{

}

class选择器

多个标签可以携带同一个class;同一个标签可以携带多个class,空格隔开。

<p class=”warning”></p>

选择符是``.。

.warning{
}

类的使用,要注意原子类,可以把一个标签多携带几个class,简化我们的页面制作,各取所需。

后代选择器

选择的是后代,而不是儿子。

div p

div 的后代 p,都被选择。

div.haha ul.xixi li.hehe p

有haha类的div的后代有xixi类的ul的后代有hehe类的li中的p。

交集选择器

div.haha

又是div,又是haha类。

并集选择器

用逗号隔开的两部分

div.haha ul li , div.xixi p{
}

等价于

div.haha ul li{
}
div.xixi p {
}

通配符选择器

选择所有元素,清除所有元素的默认margin、padding用。

*{
}

cascading style sheet, 我们对cascading这个词儿只要理解透了,css就理解透了。

实际上我们现在已经知道了cascading的第一层含义,就是同一个标签可以从多个选择器那里得到样式。样式是一层一层抹上去的。

1.继承性

继承性是css的最美的地方,它就简化了css的书写。

一些属性,如果给一个元素设置了,那么它的后代所有元素都有这个属性了,就是继承性。

哪些属性能够继承:

color
text-
font-
line-

特别的,要知道不能继承的属性:background-color、所有盒模型的属性(width、height、border、padding、margin)都是不继承的!

2.层叠性

层叠性就是处理冲突的能力,就比如一个标签p,用标签选择器设置文字颜色是红色,用id选择器设置文字颜色是蓝色;听谁的。听id的,标签选择器的属性就被杠掉了,术语叫做“层叠”掉了。

总结的一个图:

就是同一个标签携带多个类名的时候,如果携带的类名有冲突,那么听谁的?

结论:只和CSS顺序有关,以后出现的为准,与HTML标签中挂类名的顺序无关。

比如:

<p class="spec1 spec2">文字</p>

或者交换两个类名的顺序写成:

<p class="spec2 spec1">文字</p>

是对权重没有任何影响的。

1.应用场景

在共性中有某个元素有特性。

比如,现在想让所有的li都是一个颜色,但是就第一个li颜色不同:

<html>
<head>
    <style type="text/css">
        .nav ul li{
            color:blue;

        }

        .nav ul li.no1{
            color:red;

        }

    </style>
    <title></title>
</head>
<body>
<div class="nav">
    <ul>
        <li class="no1">网站栏目</li>
        <li>网站栏目</li>
        <li>网站栏目</li>
        <li>网站栏目</li>
        <li>网站栏目</li>
        <li>网站栏目</li>
        <li>网站栏目</li>
    </ul>
</div>
</body>
</html>

错误的写法:

<style type="text/css">
    .nav ul li{
        color:blue;
    }
    .no1{
        color:red;
     }

错误!不生效!因为这个权重干不过上面的.nav ul li

所以,以后一定要记住一个真理:如果想让一个特性层叠掉共性,那么这个特性的选择器的前半部分一定要和共性的相同

2.!important提升权重

我们希望页面中的所有原子类,都是权重非常大的,这样,一旦页面中的任何一个标签,携带了这个原子类,立即有样式产生,而不会被自己的样式所层叠。所以,这时候,就可以用!important来提升权重!

.warning{
    color:red !important;
}

important是英语重要的意思。注意写法!写在分号之前,如果有多个属性要提升权重,那么必须写多个:

.warning{
    color:red !important;
    font-weight: bold !important;
}

注意,页面严禁滥用!important提升权重,只能在原子类的情况使用

还要注意下面几个!important的权重提升方法:

!important不影响继承性,该是0还是0。一个标签是通过继承性影响的,权重是0,加上!important也是0,也不能与已经选中了的选择器抗衡。

!important不影响就近原则,远的那个,写上!important也没用,还是以近的那个为准!

现在我们已经完全揭示了“层叠性”的意思:

  • 同一个标签可以有多个选择器作用,给他增加样式;
  • 有继承性,祖先的标签的一些属性,可以继承给后代的标签;
  • 有层叠性,当遇见冲突的时候有着严密一套法律,规定谁生效谁被杠掉。

CSS就是用代码在画画,它像工程师一样精确,像艺术家一样优美。

从现在开始,我们就要学习CSS的属性了。大致分为几类:

  • 文字样式
  • 盒模型
  • 浮动
  • 定位
  • 背景
  • 表格和列表

我们大量的用到颜色,比如color、background-color、border:1px solid red;

之前我们都是用英语来描述颜色red、blue等等。

一共有三种方法:单词、rgb()、#十六进制

1.单词来表示

在HTML中能够找到这些单词表示的颜色名。不过我们一般就用常见的这么几个:

black、white、red、green、blue、yellow、pink、orange、purple、gold、gray、yellowgreen、greenyellow等等。

2.rgb()表示法

background-color: rgb(0,0,255);

光学显示器的三原色是红、绿、蓝,依靠他们三个的不同亮度,就能组成不一样的颜色。每种颜色的亮度数值是0~255,一共256个数字。

计算机的显示屏是由三元色的发光晶体组成的

注意它的语法,rgb()中间用两个逗号隔开三个数字。

红色:

background-color: rgb(255,0,0);

绿色:

background-color: rgb(0,255,0);

蓝色:

background-color: rgb(0,0,255);

黑色:

background-color: rgb(0,0,0);

光学显示器什么都关掉了,就是黑色。

白色:

background-color: rgb(255,255,255);

特别的,当三个数字都一样的时候,就是灰色:

background-color: rgb(111,111,111);

每个数位都能够表示256种颜色(0~255),那么三个数位能够表示多少颜色呢?乘法原理:

256* 256 * 256种颜色,16777216种颜色。

3.十六进制表示法

rgb表示法比较冗长,更常用的就是16进制表示法。

<style type="text/css">
    .no1{
        background-color: #000000;
    }
    .no2{
        background-color: #ff0000;
    }
    .no3{
        background-color: #00ff00;
    }
    .no4{
        background-color: #0000ff;
    }
</style>

十六进制表示法以#开头,后面跟随6位数字,分为3组,分别表示红、绿、蓝的数量。

#ff0000

我们现在要介绍一下十六进制:

我们人的手指10只手指,所以人类就是10进制,逢10进1。

【10进制中】0、1、2、3、4、5、6、7、8、9 一共10个数字

【16进制中】0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 一共16个数字。

也就是说:

16进制中的5,就是10进制中的5;

16进制中的9,就是10进制中的9;

16进制中的a,就是10进制中的10;

16进制中的b,就是10进制中的11;

16进制中的c,就是10进制中的12;

16进制中的d,就是10进制中的13;

16进制中的e,就是10进制中的14;

16进制中的f,就是10进制中的15;

16进制中的10,就是10进制中的16;

16进制中的11,就是10进制中的17;

……

位权的概念:

一个10进制的数字,比如38 , 数字3表示拥有3个10

38 = 3 * 10 + 8

一个16进制的数字,比如38 ,数字3表示拥有3个16

3 * 16 + 8 = 56

也就是说,16进制中的38就是10进制中的56。

所以现在给你一个16进制数字,你就能够立即算出对应的10进制数字是多少。

16进制的25 , 2 * 16+5=37 , 就是10进制中的37

16进制的42 , 4 * 16 + 2=66 , 就是10进制中的66

16进制的ab , 10 * 16 + 11 = 171 , 就是10进制中171

16进制的2b , 2 * 16 +11 = 43, 就是10进制中43

16进制的ff, 15 * 16 + 15 = 255 , 就是10进制中255

所以:

#42ab2b

等价于,

rgb(66,171,43)

所以:

1#000000黑色

#ffffff白色

#ff0000红色

#111111灰色

16进制写法可以简化,所有形如

#aabbcc;都可以简化为:#abc;

比如:

#000000等价于#000

#6688cc等价于#68c

#ff0000等价于#f00

所以,

2b2b2b

不能简化!

大小写都一样,比如#F00等价于#ff0000

至此我们就介绍完了CSS2.1层面的颜色表示法,现在我们表示红色:

red

rgb(255,0,0)

#ff0000

#f00

1.color

文字颜色,这个属性能够继承,能够用3种表示法来表示。

2.font-size

文字大小,它有单位的,现在只学习一个单位就是像素。

font-size:20px;

实际测量饱满汉字的真实高度却是18px。

这是因为我们的汉字在制造的时候,就不是顶天立地的:

老师,我到底要用多少号字?根据设计师的设计图。

但是如果设计图中,有一些字没有图层的,那么此时比较麻烦,绝对不要直接去量!因为汉字不是顶天立地的,必须自己写一个汉字,然后去比较。

各个浏览器的默认字号都不一样,有的是12px、有的是14px。所以设计图上的文字,都要写字号。

Chrome浏览器支持的最小字号是12px,低于12px字号将仍以12px显示,设计师如果给你一个设计稿文字太小,直接找老板告状。

3.line-height

line-height表示行高。sublime里面的快捷键是lnh

文字所在这一行的高度,称为行高。文字在行里垂直居中。

行高到底为多少?还是那个答案:看设计图!如果设计图没有图层,要写两个文字量量。

line-height可以以px为单位,也可以用百分比为单位。

如果用百分比为单位,那么就是当前字号的百分比。也就是说:

font-size:14px;
line-height:150%;

等价于

font-size:14px;
line-height:21px;


font-size:16px;
line-height:200%;

等价于

font-size:16px;
line-height:32px;

由于字号和行高非常重要,所以可以和写在一起称为font属性

font:14px/28px "宋体";

等价于:

font-size:14px;
line-height:28px;
font-family:"宋体";

4.font-family字体

font-family属性就是字体,family就是家庭的意思。所有的字体都要用英语引号引用起来。

字体不是随便设置哦,必须是用户电脑里有这个字体,你才能设置,否则用户看到的是宋体。

所以网页中,为了让所有的用户都有一致的体验,只能用宋体、微软雅黑。黑体、楷体有的公司也用,但是不常见。

font-family: "宋体";
font-family: "微软雅黑";

一般来说,如果设置为微软雅黑,那么就要设置一个备选字体,备选字体一般是宋体,用逗号隔开列出。

font-family: "微软雅黑","宋体";

有的服务器上面,为了追求css的加载速度,把字体名变为英语。 css中

font-family:”Microsoft Yahei”,”SimSun”;

等价于

font-family: "微软雅黑","宋体";

英语字体写在前面:

font-family: "Arial","Microsoft Yahei","SimSun";

5.font-weight加粗

bold就是粗体

font-weight:bold;

等价于

font-weight: 700;

不加粗,要写normal这个词

font-weight:normal;

等价于

font-weight:400;

面试爱考。

这是能继承的属性

6.font-style属性

如果想让文字倾斜,使用

font-style:italic;

不倾斜:

font-style: normal;

font-style:oblique;也是倾斜,和italic的区别:

7.text-decoration属性

字符装饰

下划线:

text-decoration:underline;

没有下划线:

text-decoration:none;

删除线:

text-decoration:line-through;

总结:

font-weight:bold;  加粗
font-style:italic;  倾斜
text-decoration:underline; 下划线

8.综合font属性

font属性是一个大综合属性:

font:italic bold 12px/20px arial,sans-serif;

等价于

font-style:italic;
font-weight:bold;
font-size:12px;
line-height:20px;
font-family:arial,sans-serif;

一般来说,我们不会这么综合,而是:

font:12px/200% “Microsoft Yahei”,”SimSun”;

其他的文本属性,比如text-indent、text-align没有那么难,所以遇见提一嘴就行了。

1.盒模型整体感知

盒模型就是width、height、padding、border、margin外边距这么几个属性。

width:内容的宽度

height:内容的高度

padding:内边距

border: 边框

第一个案例:

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: yellow;
        padding: 50px;
    }
</style>

加上border:

    <style type="text/css">
        .nav{
            width: 200px;
            height: 200px;
            background-color: yellow;
            padding: 50px;
            border:50px solid pink;
        }
    </style>

内容、padding、border、margin是四圈。

小测试:

div{
    width:100px;
    height:100px;
    padding:10px;
}

那么这个盒子真实占有的宽度就是120px。

一定一定要养成一个习惯,就是一个盒子的width属性,不是真实占有的宽度!!

真实占有的宽度 = width + 左边padding + 右边padding + 左边border宽度 + 右边的border宽度

2.padding

内容和边框之间的距离

padding:50px;

四个方向的padding就都设置为50了

如果想单独设置padding:

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

等价于:

padding:10px 20px 30px 40px;

顺序是上、右、下、左。

如果写三个数值:

padding:10px 20px 30px;

此时相当于:

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;  (和右一样)

如果写两个属性

padding:10px 20px;

等价于

padding-top:10px;
padding-right:20px;
padding-bottom:10px;(和上一样)
padding-left:20px;  (和右一样)