Web前端基础(2)CSS 基础知识

CSS 基础知识

一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

css样式语法结构

CSS声明总是以分号 ; 结束,声明组以大括号 {} 括起来。

样式分类

插入样式表的方法有三种:

  • 外部样式表 (External style sheet)

    <head>
    	<link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    

    浏览器会从文件 mystyle.css 中读到样式声明

  • 内部样式表 (Internal style sheet)

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

<head>
    <style>
        hr { color : sienna; }
        p { margin-left : 20px; }
        body { background-image : url("images/back40.gif"); }
    </style>
</head>
  • 内联样式 (Inline style)

内联样式不建议使用

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

一些常见属性

<style type="text/css">
	.testcolor{
		color:red;
		/*这是个注释*/
	}
<style type="text/css">

<span class="testcolor">测试字符颜色</span>

/*注意css和html的注释**/
  • 字符颜色 color:red;

  • 字号大小 font-size:40px;

  • 背景颜色 background-color:blue;

  • 加粗 font-weight:bold;

  • 不加粗 font-weight:normal;

  • 斜体 font-style:italic;

  • 不斜体 font-style:normal;

  • 下划线 text-decoration:underline;

  • 没有下划线 text-decoration:normal;

基础选择器

标签选择器

div{ }

id选择器

#id{ }

类选择器

.classname{ }

同一个标签可能同时属于多个类,用空格隔开。

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

还有一个常有思路写出所有公共类供全局使用。

  1. 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
  2. 每一个类要尽可能小,有 公共 的概念,能够让更多的标签使用。
  3. 要尽可能的使用 class,外部框体和特殊地方才用 id 选择器。

后迭代选择器

向后迭代,不只是儿子,孙子,子子孙孙都可以。

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

<div>
	<p>测试文本1<p>
</div>
<div class="div1">
	<p>测试文本2<p>
</div>

测试文本1

测试文本2

上面只会对文本2有效果。

交集选择器

一般是以标签选择器开头,class 选择器结尾。

h3.special{
	color:red;
}

并集选择器

用逗号分隔

h3,li{
	color:red;
}

通配符

通配符 * :效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

* {
	color:red;
}

CSS的继承性和层叠性

继承性

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

哪些属性能继承?

color、 text-开头的、line-开头的、font-开头的

所以,如果我们的页面的文字,都是灰色,都是 14px。那么就可以利用继承性:

body{
	color:gray;
	font-size:14px;
}

层叠性

层叠性原则:

  1. 先看有没有选中,如果选中了,那么以(id 数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
  2. 如果没有选中,那么权重是 0。如果大家都是 0,就近原则

如果同一个标签,携带了多个类名,有冲突怎么显示?

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

<p class="spec1 spec2">我是什么颜色?</p>
<p class="spec2 spec1">我是什么颜色?</p>

我是什么颜色?

我是什么颜色?

可以看到都是红色,所以和在标签中的挂类名的书序无关,只和 css 的顺序有关

!important标记

当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。

<style type="text/css">
    p{
    	color:red !important;
    }
    #para1{
    	color:blue;
    }
    .spec{
    	color:green;
    }
</style>

使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

盒模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。

<style type="text/css">
	div.t1{
        width:200px;
        height:200px;
        border:1px solid red;
        padding: 50px;
	}
</style>
<div class="t1">测试文本</div>
测试文本

这个盒子 width:200px; height:200px; 但是真实占有的宽高是 302*302。 这是因为还要加上 padding、border。

chrome浏览器盒子模型

宽度和真实占有宽度,不是一个概念!!

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

padding 分方向设置

padding : 30px 20px 40px 100px;  /*(上、右、下、左)*/

用小属性层叠大属性

padding : 20px;
padding-left : 30px;

chrome浏览器盒子模型

下面的写法错误

padding-left: 30px;
padding: 20px;

border的其他属性解释:

  • border-width:10px; → 边框宽度
  • border-style:solid; → 线型
  • border-color:red; → 颜色。

    border:10px solid red;
    

标准文档流现象

我们的 web 页面和 photoshop 等设计软件有本质的区别:web 页面的制作,是个 ,必须从上而下,像 织毛衣

标准文档流的几个特点和现象:

  1. 空白折叠现象

HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

  1. 高矮不齐,底边对齐

高矮不齐底边对齐演示

  1. 自动换行,一行写不满,换行写。

块级元素和行内元素

在 HTML 中,我们已经将标签分过类,当时分为了:文本级、容器级。

文本级: p、span、a、b、i、u、em 容器级: div、h系列、li、dt、d

所有的文本级标签,都是行内元素,除了 p,p 是个文本级,但是是个块级元素。 所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换: display:inline;, display:block;

块级元素

  • 霸占一行,不能与其他任何元素并列
  • 能接受宽、高
  • 如果不设置宽度,那么宽度将默认变为父亲的100%。

行内元素

  • 与其他行内元素并排
  • 不能设置宽、高。默认的宽度,就是文字的宽度。

脱离标准流

标准流里面限制非常多,标签的性质恶心。比如,我们现在就要并排、并且就要设置宽高。所以,移民!脱离标准流!

css 中一共有三种手段,使一个元素脱离标准文档流:浮动、绝对定位、固定定位。

浮动

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

实现浮动

浮动分为左浮动和右浮动

img{
    float:left;
}
img{
    float:right;
}

浮动的特点

  1. 浮动的元素脱离标准流。(能够并排了,并且能够设置宽高了。无论它原来是个div还是个span)。
  2. 浮动的元素互相靠帖。
  3. 浮动的元素有“字围”效果。

字围效果示例

浮动的清除

有时候我们需要清除行内元素浮动的特性以适应某种要求。

浮动效果

例如上面的文本如果我们清除其浮动效果则图片会规则排列成两行:

.text_line
{
    clear:both;
}

浮动清除效果

清除浮动的方法

例如:现在有两个 div,div 身上没有任何属性。每个 div 中都有 li,这些 li 都是浮动的。

<style text="text/css">
    ul{
        float:left;
        margin:0px;
        padding:0px;
    }
    ul li{
        color:white;
        float:left;
        background-color:#FF923D;
    }
</style>

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>

<div>
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧
1. 给浮动的元素的祖先元素添加高度

给浮动的元素的祖先元素添加高度

可以看到 div 的高度是 0px, 因为 div 内的元素是浮动的,所以 div 不能被撑出高度。

<style text="text/css">
    div{
    	height:40px;
    }
</style>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧
网页制作中,高度 height 很少出现。为什么?因为能被内容撑高!工作中用的很少。

2. clear:both;

这种方法有一个非常大的、致命的问题,margin 失效了。

3. 隔墙法 这种方法可以在两个div中间添加一个块元素,和上面图片的例子很相似。

<style text="text/css">
	...
	
    #heightdiv{
		clear:both;
		height:10px;
    }
</style>

<div>
    <ul>
        ...
    </ul>
</div>
/*隔墙*/
<div id="heightdiv" ></div>
<div>
    <ul>
       ...
    </ul>
</div>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

4. 内墙法

<style text="text/css">
	...
	
	.heightdiv{
		height:40px;
	}
</style>

<div>
    <ul>
        ...
    </ul>
    /*内墙*/
	<div class="heightdiv" ></div>
</div>
<div>
    <ul>
       ...
    </ul>
    /*内墙*/
	<div class="heightdiv" ></div>
</div>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

5. overflow : hidden;

overflow 就是 “溢出” 的意思, hidden 就是 “隐藏” 的意思。表示 “溢出隐藏”。所有溢出边框的内容,都要隐藏掉。

块标签元素溢出现象

本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。

一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。

例如上面给两个 div 加上 overflow:hidde;

<style text="text/css">
    div{
    	overflow:hidden;
    }
</style>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧