css 设置背景图一半_前端初学大纲03~（CSS 概述）

第四章 CSS 概述

第一节 CSS代码语法

• CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

• css代码通常存放在标签内

• css 样式由选择符和声明组成，而声明又由属性和值组成

• 选择符{属性:值}例：p{color:red;}

• 选择符：又称选择器，指明网页中要应用样式规则的元素

• 声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号:分隔。当有多条声明时，中间用英文分号;分隔，如：

p{
 font-size:12px;
 color:red;
}

第二节 CSS 放置位置

行内样式

• 直接书写在标签的style属性中

• 不建议使用

内联式样式表

• 写在标签中

外联样式表

• 将一个独立的.css文件引入到HTML文件中，使用标签写在标签中。 链接式会以网页文件主体装载前装载CSS文件。

• rel="stylesheet"定义类型为层叠样式表，一定要写

第三节 CSS的继承

• CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

• 不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear

• 可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

第五章 CSS 选择器

第一节 选择器的种类

标签选择器

通过标签的名字，修改css样式

div{
  width:200px;
  height:300px;
}

通配符选择器

• 选择页面中所有的元素

*{
  margin:0;
  padding:0;
}

属性选择器

后代选择器

• 选择某个父元素下面所有的元素

.box p{
  background-color:red;  
}

一级子元素选则器

• 选择某个父元素的直接子元素

• 后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素

.box>p{
  background-color:red;  
}

id选择器

通过id查找页面中唯一的标签，用 # 标示id

#wrap{
  width:200px;
  height:300px;
}

class选择器

通过特定的class（类）来查找页面中对应的标签，以 . class名称

.box{
  width:200px;
  height:300px;  
}

伪类选择器

• :hover鼠标移入某个元素

.box:hover{
  color:red;
}

• :before在某个元素的前面插入内容

div:before{
  content:"- 台词";
 background-color:yellow;
 color:red;
 font-weight:bold;
}

• :after在某个元素的后面插入内容

div:after{
  content:"- 台词";
 background-color:yellow;
 color:red;
 font-weight:bold;
}

群组选择器

• 可以对多个不同的选择器设置相同的样式

.box,.box1,.box2{
  width:200px;
  height:300px;
}

第二节 选择器的优先级

• 当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。

• 通过测算那个选择器的权重值最高，应用哪一个选择器的样式

• 权重计算方式

– 标签选择器：1

– class选择器：10

– id选择器：100

– 行内样式：1000

– !important 最高级别，提高样式权重，拥有最高级别

p{width:200px} /*权重 1*/
.box{width:200px} /*权重 10*/
.box p{width:200px} /*权重 11*/
#txt{width:200px} /*权重 100*/

• 如果两个选择器的权重值一样高，则应用距离对象最近的css样式

第六章 CSS样式（属性）

第一节 背景样式

背景颜色background-color

• background-color:red

• 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb，也可以是rgba

背景图片background-image

• background-image:url(bg01.jpg);

• 背景图片的大小可以和容器大小不一样

• 背景图片不会占位

• 如果容器大，背景图片小，背景图片会平铺 铺满整个容器

背景图片位置background-position

• background-position:10px 100px;

• 背景图片定位的值是两个单位，分别代表坐标x，y轴

• 背景图片定位的值可以是应为left，right，top，bottom，center

• 背景图片定位的值也可以是百分比或者像素

背景图片重复background-repeat

• background-repeat:no-repeat

• no-repeat 设置图像不重复，常用

• round 自动缩放直到适应并填充满整个容器

• space 以相同的间距平铺且填充满整个容器

背景图片定位background-attachment

• background-attachment:fixed

• 背景图像是否固定或者随着页面的其余部分滚动

• background-attachment的值可以是scroll（跟随滚动），fixed（固定）

background缩写

• background:#ff0000 url(bg01.jpg) no-repeat fixed center

•

第二节 字体样式

字体族font-family

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

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

字体大小font-size

• font-size:12px;

• 网页默认字体大小是16px

字体粗细font-weight

• font-weight:400;

• normal（默认）

• bold（加粗）

• bolder（相当于和标签）

• lighter （常规）

• 100 ~ 900 整百（400=normal，700=bold）

字体颜色color

• 颜色的英文单词color:red;

• 十六进制色：color: #FFFF00;

• RGB(红绿蓝)color:rgb(255,255,0)

• RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)

字体斜体font-style

• font-style:italic

• normal 文本正常显示

• italic 文本斜体显示

• oblique 文本倾斜显示

第三节 文本属性

行高line-height

• line-height:50px;

• 可以将父元素的高度撑起来

文本水平对齐方式text-align

• left 左对齐

• center 文字居中

• right 右对齐

文本所在行高的垂直对齐方式vertical-align

• baseline 默认

• sub 垂直对齐文本的下标，和_{标签一样的效果}

• super 垂直对齐文本的上标，和^{标签一样的效果}

• top 对象的顶端与所在容器的顶端对齐

• text-top 对象的顶端与所在行文字顶端对齐

• middle 元素对象基于基线垂直对齐

• bottom 对象的底端与所在行的文字底部对齐

• text-bottom 对象的底端与所在行文字的底端对齐

文本缩进text-indent

• text-indent:2em;

• 通常用在段落开始位置的首行缩进

字母之间的间距letter-spacing

单词之间间距word-spacing

文本的大小写text-transform

• capitalize 文本中的每个单词以大写字母开头。

• uppercase 定义仅有大写字母。

• lowercase 定义仅有小写字母。

文本的装饰text-decoration

• none 默认。

• underline 下划线。

• overline 上划线。

• line-through 中线。

自动换行word-wrap

• word-wrap: break-word;

第四节 基本样式

宽度width

• width:200px;

• 定义元素的宽度

高度height

• height:300px

• 元素默认没有高度

• 需要设置高度

• 可以不定义高度，让元素的内容将元素撑高

鼠标样式cursor

• 定义鼠标的样式cursor:pointer

– default默认

– pointer小手形状

– move移动形状

透明度opacity

• opacity:0.3

• 透明度的值可以使0~1之间的数字，0代表透明，1代表完全不透明

• 透明的元素，只是看不到了，但是还占据着文档流

可见性visibility

• visibility:hidden;

• visible 元素可见

• hidden 元素不可见

• collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

溢出隐藏 overflow

• 设置当对象的内容超过其指定高度及宽度时如何显示内容

• visible 默认值，内容不会被修剪，会呈现在元素框之外。

• hidden 内容会被修剪，并且其余内容是不可见的。

• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

边框颜色outline

• input文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框

• outline:1px solid #ccc;

• outline:none清除边框

第五节 样式重置

早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。

• 清除元素的margin和padding

• 去掉自带的列表符

• 去掉自带的下划线

*{ margin:0; padding:0; } /*清除页面所有标签自带的外间距和内填充*/
ul,ol{ list-style:none; } /*去掉自带的列表符*/
a{ text-decoration:none; } /*去掉自带的下划线*/
img,input{ border:none; } /*清除IE下自带的边框*/

第六节 盒模型样式

HTML元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。

一、块级元素

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

~

二、行内元素

1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。




三、行内块状元素

1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

select textarea button iframe

元素分类转换display

• block：将元素转换为块级元素

• inline：将元素装换为行级元素

• inline-block：将元素转换为内联块元素

• none: 将元素隐藏

描边border

• border:2px solid #f00;

• 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

• 线条的样式：

– dashed（虚线）| dotted（点线）| solid（实线）。

• css样式中允许只为一个方向的边框设置样式：

– 下描边border-bottom:1px solid red;

– 上描边border-top:1px solid red;

– 右描边border-right:1px solid red;

– 左描边border-left:1px solid red;

间距margin

• div{margin:20px 10px 15px 30px;}

• 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

• 也可以分开写：

div{
 margin-top:20px;
 margin-right:10px;
 margin-bottom:15px;
 margin-left:30px;
}

• 当margin给一个值时：指的是四个方向

• 当margin有两个值时：指的是上下 左右

• 当margin给三个值时：指的是上 左右 下

• 当margin给四个值时：值的是上 右 下 左

内填充padding

• padding:10px

• 元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。

• 如下代码：div{padding:20px 10px 15px 30px;}

• 顺序一定不要搞混。可以分开写上面代码：

div{
 padding-top:20px;
 padding-right:10px;
 padding-bottom:15px;
 padding-left:30px;
}

• 当padding给一个值时：指的是四个方向

• 当padding有两个值时：指的是上下 左右

• 当padding给三个值时：指的是上 左右 下

• 当padding给四个值时：值的是上 右 下 左

•

第七节 浮动float

浮动原理

• 浮动使元素脱离文档普通流，漂浮在普通流之上的。

• 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。

• 浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。

清除浮动带来的影响

• clear 清除浮动：

– none : 不清除（默认值）。

– left : 不允许左边有浮动对象

– right : 不允许右边有浮动对象

– both : 不允许两边有浮动对象

• 利用伪类实现清除浮动

.clearFix{
content="";
display:block;
width:0;
height:0;
clear:both;
}

第八节 定位position

定位功能可以让布局变的更加自由。

层模型--绝对定位（相对于父类）

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

• position:absolute;

div{
 width:200px;
 height:200px;
 border:2px red solid;
 position:absolute;
 left:100px;
 top:50px;
}
/*实现div元素相对于浏览器窗口向右移动100px，向下移动50px。*/

层模型--相对定位（相对于原位置）

如果想为元素设置层模型中的相对定位，需要设置position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

• position:relative;

#div1{
 width:200px;
 height:200px;
 border:2px red solid;
 position:relative;
 left:100px;
 top:50px;
}
/*相对于以前位置向下移动50px，向右移动100px;*/

层模型--固定定位（相对于网页窗口）

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。

• position:fixed

第二篇 html5和css3开发基础与应用

第一章 html5开发基础与应用

HTML5 和 HTML4 的区别

• DTD 的变化

• HTML5 的语法变化

– 某些元素可以省略结束标签 （

等）

– 没有结束标签的元素 (< area>
等）

– 连开头标签一起省略的元素 （ 等）

• 属性值可以不用引号括起来

• 标签不再区分大小写

• 某些标志性的属性可以省略属性值，通常为 boolean 类型

HTML5 的优势

• 解决跨浏览器，跨平台问题

目前95%的浏览器都支持 HTML5，其中包含移动端等设备上使用的浏览器。 对于开发者来说，各浏览器更好的支持 HTML5，前端程序员开发 HTML+CSS+JavaScript 页面将会更加的轻松。

• 增强了 web 的应用程序

最直观的地方就是以前都需要使用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页看视频成为了可能。

第二节 常用元素和属性

HTML5 保留元素

HTML5 是对以前的 HTML 发展产生出来的，因此，HTML5 保留了以前 HTML 绝大部分标签。

HTML5 废弃元素

废弃标签
说明
basefont big center font strike tt
用 CSS 处理可以更好地替代他们
frame frameset noframes
使用这些标签，破坏了可使用性和可访问性
acronym applet dir
不经常使用、会引起混乱、可被其他元素替代

HTML5 新增元素

在 HTML5 以前，HTML 页面只能用元素来作为结构元素，使得代码 阅读带来了极大的困扰性，故在 HTML5 中增加了大量的结构元素。

新增元素
说明



用于定义文档或节的页眉



用于定义文档或节的页脚



用于定义文档内的文章



用于定义文档中的一个区域（或节）



用于定义与当前页面或当前文章的内容几乎无关的附属信息



用于定义一段独立的引用，经常与说明(caption)

配合使用，通常用在主文中的图片，代码，表格等。



用于表示是与其相关联的引用的说明/标题，用于描述其父节点

元素里的其他数据。



用于对多个

~

元素进行组合



用于定义页面上的导航链接部分

用于定义高亮文本

用于显示被标注的内容是日期或时间（24小时制）

用于表示一个已知最大值和最小值的计数器

用于表示一个进度条