WEB前端-CSS入门

人必有痴,而后有成。(林语堂)

Created by NianQin

本讲目标

  • 理解CSS概念
  • 能熟练运用HTML+CSS编写页面

什么是CSS

  • CSS(Cascading Style Sheet)是由W3C(万维网联盟)的CSS工作组创建和维护的。它是一种不需要编译,可直接由浏览器执行的标记性语言,用于控制Web页面的外观。通过使用CSS样式控制页面各元素的属性显示,可将页面的内容与表现形式进行分离。

CSS历史

  • CSS1 作为一项W3C推荐,CSS1发布于1996年12月17日。
  • 1999年1月11日,此推荐被重新修订
  • CSS2作为一项W3C推荐,CSS2发布于1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。
  • CSS3 计划将CSS划分为更小的模块。

CSS的优势

  • 避免使用不必要的HTML元素
  • 缩短更新和维护的时间
  • 做出HTML实现不了的特效

CSS规则


							body {
								color: blue;
							}
						

CSS规则

  • 选择器(selector): 所谓选择器就是规则中用于选择文档中要应用样式中的那些元素。该元素可以是HTML的某个标签,也可以是页面中指定的class(类)或者id属性限定的标记。
  • 声明:声明包含在一堆大括号“{}”内,用于告诉浏览器如何渲染页面中与选择器相匹配的对象。声明内部由属性及其属性值组成,并用冒号隔开,以分号结束,声明的形式可以是一个或者多个属性的组合。
  • 属性(property):属性是由官方CSS规范约定的,而不是自定义的,除个别浏览器私有属性以外。
  • 属性值(value):属性值放置在属性名和冒号后面,具体内容跟随属性的类别而呈现不同形式,一般包括数值,单位以及关键字。

CSS注释

  • 结构性注释
  • 
    							/*****************
    							* RESET STYLES
    							******************/
    						
  • 提示性注释
  • 
    							.new-list li span {
    							  float: left: /* 左浮动 */
    							  width: 80px;
    							}
    						

样式表加载

  • 内嵌样式----直接在页面的标签里添加
  • 
    								
    测试信息
  • 内部样式表----在head部分加入
  • 
    								
    							

样式表加载

  • 链入外部样式表----在head部分加入
  • 
    							
    						
  • 导入外部样式表----在head部分加入
  • 
    							
    						

    样式表优先级

    • 内部样式 > 内部样式表 > 导入外部样式表
    • 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后,最后定义的优先级最高

    Link和@import区别

    Link

    Link:使用link链接的css是客户端浏览器你的网页时先将外部的CSS文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页跟我们预期的效果一样,即使一个页面link多个css文件,网速再慢也是一样的效果;

    Link和@import区别

    @import:而使用@import导入的css就不同了,客户端在浏览网页时是先将html的结构呈现出来,再把外部的css文件加载到网页当中,当然最终的效果和前者是一样的,只是当网速较慢时会出现没有CSS统一布局的html网页,这样就会给阅读者不好的感觉。这也是现在大部分的CSS都采用链接方式的最主要的原因。

    CSS选择器

    通配符选择器

    在编写代码时,用 “*” 表示通配符选择器,其作用是定义页面所有元素的样式。

    
    							* {
    								margin: 0;
    								padding: 0;
    							}
    						

    类选择器

    类选择器通过直接引用元素中类属性的值而产生效果,这个应用前面总是有一个句点”.“,这个句点用来标识一个类选择器,类名可以随意命名,但最好根据元素的用途来定义一个有意义的名称。

    
    							.red-font {
    								color: red;
    							}
    						
    
    							
    红色字体

    ID选择器

    ID选择器与类选择器极其相似,类选择器是以”.“开头,而ID选择器是以”#“开头。对于一个HTML文档来说,其中的每一个标签都可以使用id=""的形式进行一个名称指派,但需要注意,在一个HTML文件中id是具有唯一性是不可以重复的。

    
    								#red-font {
    									color: red;
    								}
    							
    
    								
    红色字体

    标签选择器

    HTML标签当做选择器的名称。所有所指派的HTML标签都改变自己的属性。

    
    								h1 {
    									color: red;
    								}
    							
    
    								

    文本内容

    包含选择器

    如果用户相对某个对象中的子对象进行样式指派,包含选择器就能发挥了作用。包含选择器又称为后代选择器,因为改选择器是作用于某个元素中的子元素的,且不仅限于两层标签元素。

    
    								h1 span {
    									color: red;
    								}
    							
    
    								

    文本内容

    群组选择器

    群组选择器使用逗号对选择器进行分隔,这样书写的代码在于同样的样式只需要书写一次,减少代码量,有利于改善CSS的代码结构。

    
    							html, body {
    								width: 100%;
    								height: 100%;
    							}
    						

    伪类

    伪类可以让用户在使用页面的过程中增加更多的交互效果。例如应用最为广泛的链接标签a的集中状态(未访问链接状态,已访问链接状态,鼠标指针悬停在链接上的状态以及被激活的链接状态),具体代码如下所示。

    
    							a:link { color: #FF0000; } /* 未访问链接状态,只对超级链接有效果 */
    							a:visited { color: #00FF00; } /* 已访问链接状态,只对超级链接有效果 */
    							a:hover { color: #FF00FF; } /* 鼠标指针悬停在链接上的状态 */
    							a:active { color: #0000FF; } /* 被激活的链接状态 */
    						

    CSS选择器

    更多

    CSS颜色

    • background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
    • 
      							p { background-color: gray; } /* 这条规则把元素的颜色设置为灰色 */
      							body { background-color: #b0c4de; } /* 设置页面的背景色 */
      						
    • CSS中,颜色值通常以以下方式定义
      • 十六进制 - 如: #FF0000
      • RGB - 如: rgb(255, 0, 0)
      • 颜色名称 - 如: red

    背景图像

    • background-color 背景颜色
    • background-image 背景图片
    • background-repeat 背景重复
    • background-attachment 背景滚动
    • background-position 背景定位
    
    							body {
    								background-color: #0bc4de;
    								background-image: url('bird.png');
    								background-repeat: no-repeat;
    								background-attachment: fixed;
    								background-position: right top;
    							}
    						

    CSS文本

    • color: 文本颜色
    • text-align: 文本对齐
    • text-decoration: 文本修饰(下划线)
    • text-indent: 文本缩进
    
    							{ color: blue; } /* 文本颜色,使用颜色关键字 */
    							{ color: #00ff00; } /* 16进制颜色 */
    							{ color: rgb(255, 0, 0); } /* rgb颜色 */
    							{ text-align: center; } /* 居中对齐 */
    							{ text-align: right; } /* 右对齐 */
    							{ text-align: justify; } /* 两端对齐 */
    							{ text-decoration: none; } /* 无文字效果 */
    							{ text-decoration: underline; } /* 下划线, overline 上划线 /
    							{ text-decoration: line-through; } /* 文字删除线 */
    							{ text-indent: 50px; } /* 文本缩进 50像素 */
    						

    CSS字体

    • font-family: 字体
    • font-style: 文字效果 斜体
    • font-size: 文字大小
    • text-indent: 文本缩进
    • font-weight: 文字粗细
    
    							{ font-family: "Times New Roman", Times, serif; } /* 设置多个字体 */
    							{ font-style: normal; } /* 正常显示文本 */
    							{	font-style: italic; } /* 斜体 */
    							{	font-size: 40px; } /* 文字为40像素 */
    						

    CSS列表

    
    						{ list-style-type: xxxx; } /* 该属性可以改变ul ol的样式 */
    					

    CSS边框

    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。

    
    							{
    								border-style: solid; /* 边框样式,实心*/
    								border-width: 1px; /* 边框宽度 */
    								border-color: black; /* 边框颜色 */
    								border: 1px solid black; /* 设置1像素实边 黑色 */
    							} 
    						

    有趣的边框

    DIV 和 SPAN 区别

    块元素与行内元素

    块元素又名块级元素(block element)和对应的行内元素(inline element),都是html4.01规范中的概念

    block元素的特点

    • 总是在新行上开始
    • 高度,行高以及外边距和内边距都可控制
    • 宽度缺省是它的容器的100%,除非设定一个宽度
    • 它可以容纳行内元素和其他块元素

    inline元素的特点

    • 和其他元素都在一行上
    • 宽高、行高及外边距不可改变
    • 宽度就是它的文字宽度,不可改变
    • 一般情况下,行内元素只能容纳文本或者其他行内元素

    常见块级元素

    • div 常用块级元素,也是css布局的主要标签
    • ol 有序列表
    • ul 无需列表
    • table 表格
    • p 段落
    • dl 定义列表
    • form 交互表单
    • h1 - h6 标题
    • hr 水平分隔线
    • 更多...

    常见行内元素

    • span
    • button 按钮
    • input 输入框
    • select 下拉框
    • textarea 多行文本
    • a 链接
    • i 图标
    • strong 强调
    • sub, sup 上标,下标
    • 更多...

    CSS的盒子

    CSS的盒子模型

    • 盒子模型是CSS的基石之一,它指定元素显示以及(在某种程度上)如何相互交互
    • 页面上的每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容、填充、边框和边距组成
    • 网页就是由许多个盒子通过不同的排列方式(上下排列,并列排列,嵌套排列)堆积而成

    盒子模型示意图

    • 每个HTML元素都可以看作是一个装了东西的盒子
    • 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(magin)
    • 默认情况下盒子的边框是无,背景色是透明,所以我们再默认情况下看不到盒子

    盒子模型示意图

    盒子模型

    元素盒子大小的计算

    盒子模型

    总宽度 = 200 + 20 + 20 + 1 + 1 + 10 + 10

    边框border属性

    盒子模型的magin和padding属性比较简单,只能设置宽度值,最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。

    • 分别是border-width(宽度)
    • border-color(颜色)
    • border-style(样式)该属性可以将边框设置为
      实线(solid)、虚线(dashed)、点划线(dotted)、双线(double)

    盒子模型的特性

    • 外边距margin可为负,填充padding不可为负
    • 边框border默认值为0,即不显示
    • 行内元素,如a标签,定义上下边界不影响行高
    • 边框是实的,我们可以看到实实在在的边框,而填充和边界是虚的,我们只能看到他们对元素的影响
    • 盒子模型中能设置两类颜色,即边框颜色和背景颜色
    • 盒子模型可设置三类距离,即边界距离margin,填充距离padding和边框值border

    属性值的简写形式

    
    							h1 { margin: 10px; }
    							h1 { margin: 10px 15px; }
    							h1 { margin: 10px 10px 15px; }
    							h1 { margin: 10px 0 15px 5px; }
    							h1 { margin: 10px 0 15px 5px; }
    						

    属性值的简写形式

    方法是按照规定的属性,给出1个、2个、3个或者4个属性值,它们的含义将有所区别,具体如下

    • 如果给出1个属性值,表示上下左右边框的值
    • 如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性
    • 如果给出3个属性值,前置表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性
    • 如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针顺序

    各种元素盒子属性默认值

    • 大部分html元素的盒子属性(margin,padding)默认值都为0
    • 有少数html元素的(margin,padding)浏览器默认值不为0,例如:body,p,ul,li,form标记等,因此我们有时有必要先设置他们的这些属性为0
    • input元素的边框属性默认不为0,我们可以设置为0达到美化表单中输入框和按钮的目的

    display属性

    标准流

    HTML元素在标准状况下的定位方式

    • 行内元素在同一行横向排列
    • 块级元素占满整个一行,在页面中竖向排列
    • 元素不会移动到其他地方去,对于其他的元素盒子也是嵌套的关系

    行内元素的盒子

    • 行内元素的盒子永远只能在浏览器中得到一行高度的空间(行高由line-height属性决定,如果没设置该属性,则是内容的默认高度),如果给它设置上下border,margin, padding等值,导致其盒子的高度超过行高,那么它的盒子上下部分将和其他元素的盒子重叠。
    • 因此,不推荐对行内元素直接设置盒子属性,一般先设置行内元素以块元素显示,再设置他的盒子属性。

    display属性

    • 通过display属性可控制元素是以行内元素显示还是以块级元素显示,或不显示
    • display:block | inline | none | list-item | inline-block
    • inline-block行内块元素

    inline-block行内块元素

    • inline-block属性值,既是行元素,但又有块元素的属性
    • 如果想又具有行元素一排的属性,也具有块元素可以设置宽高的特性,我们可以设置display属性

    隐藏元素display: none

    • 当某个元素被设置成了隐藏元素之后,浏览器会完全忽略掉这个元素,该元素将不会被显示,也不会占据文档中的位置
    • 比较visibilty: hidden
    • 制作下拉菜单、tab面板等有时就需要用display:none把菜单或面板隐藏起来

    浮动与清除浮动

    盒子的三种定位形式

    • 在标准流下的定位
    • 在浮动属性下的定位
    • 在定位属性下的定位

    除非设置浮动属性或定位属性,否则所有盒子都是在标准流中定位。顾名思义,标准流中元素盒子的位置由元素在HTML中的位置决定。

    盒子的浮动

    • 在标准流中,块级元素的盒子都是上下排列,行内元素的盒子都是左右排列,如果仅仅按照标准流的方式进行排列,就只有这几种可能性,限制太大。CSS的制定者也想到了这样排列限制的问题,因此又给出了浮动和定位方式进行盒子的排列,从而使排版的灵活性大大提高。
    • 例如:有时希望相邻块级元素的盒子左右排列(所有盒子浮动)或者希望一个盒子被另一个盒子中的内容所环绕(一个盒子浮动)做出图文排列的效果,这是最简单的办法就是运用浮动(float)属性使盒子在浮动方式下定位
    • 在标准流中,一个块级元素在水平方向会自动伸展,在它的父元素占满整个一行;而在竖直方向和其他元素依次排列,不能并排。使用“浮动”方式后,这种排列方式就会发生改变
    • CSS中有一个float属性,默认值为none,也即是标准流通常的情况,如果将float属性的值设置为left或right,元素机会向其父元素的左侧或右侧靠紧,同时盒子的宽度不再伸展,而是收缩,在没有设置宽度时,会根据盒子里面的内容来确定宽度。

    浮动的清除

    clear是清除浮动属性,它的取值有left,right,both和none(默认值),如果设置盒子的清除浮动属性clear值为left或right,表示该盒子的左边或右边不允许有浮动的对象。值设置为both则表示两边都不允许有浮动的对象,因此该盒子将会在浏览器中另起一行显示。

    未清除浮动

    清除浮动

    图层定位

    CSS定位

    • CSS定位(positioning)属性允许你对元素进行定位
    • CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分和另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

    CSS position属性

    使用position属性,我们可以选择4中不同类型的定位

    • staitc元素,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中
    • relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留

    CSS position属性

    • absolute元素将从文档流完成删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常六中生成的何种类型的框。
    • fixed元素框的表现类似将position设置为absolute,不过其包含块是视窗本身

    CSS3属性介绍

    背景图片设定

    • background
    • CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果
    • background-size规定背景图片的尺寸
    • cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。但背景图像中的某些部分也许无法显示在背景定位区域中。
    • contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

    背景颜色

    • 十六进制色: #ff0000
    • RGB颜色 rgb(255, 0, 0)
    • RGBA颜色 rgba(255, 0, 0, 0.5)
    • HSL颜色 hsl(120, 65%, 75%)
    • HSLA颜色 hsla(120, 65%, 75%, 0.3)

    RGBA颜色值是RGB颜色值的扩展,带有一个alpha通道,它规定了对象的不透明度。alpha参数是结余0(完全透明)到1(完全不透明)的数据

    图像的透明

    • CSS opacity属性是W3C CSS推荐标准的一部分
    • filter:alpha(opacity=XX)是IE的滤镜
    • Can I Use

    渐变

    • 渐变可以创建类似于彩虹的效果,低版本的浏览器不支持,开发者使用图片来实现,CSS3则轻松实现
    • background: linear-gradient(#ffffff, #000000)
    • Can I Use
    • 渐变色生成器
    • 渐变色网站

    圆角

    阴影

    The end

    Thanks