一.基础知识
1.基本构成:选择符和声明,声明包括属性和值。
2.注释/*...*/
3.在html中插入形式(离被设置元素越近,优先级越高)
(1)内联式:直接写在现有的html标签中
<p style=“color:red;font-size:12px;...”>...</p>
(2)嵌入式(写在<head></head>之间)
<style type=“text/css”>
span
{
color:red;
}
</style>
(3)外部式:写入单独文件*.css
在head内使用link链接入html
<link href=“*.css” rel=“stylesheet” type=“text/css”> rel和type是固定写法
二.选择器
1.标签选择器(html中的标签)
标签{样式设置;}
✔可写成分组选择器
标签1,标签2{样式设置;}
2.类选择器
<span class=“类名1 类名2”>...</span>...
<span class=“类名1 类名2”>...</span>...
.类名1{样式设置;}
.类名2{样式设置;}
3.id选择器
<span id=“id名”>...</span>
#id名{样式设置}唯一性
4.子选择器(只包含第一代)
.类名>span{样式设置;}
5.包含(后代)选择器
.类名 span{样式设置;}
6.通用选择器(设置所有的标签样式)
*{样式设置;}
7.伪类选择器(给标签的某种状态添加样式)
标签.hover{样式设置;}鼠标划过时的样式
三.选择器权值
1.标签是1
2.类选择是10
3.id选择是100
例:
四.文字排版
1.body{font-family:"Microsoft Yahei";}给网页设置字体-微软雅黑
2.body{font-size:12px;color:red;}给网页设置字号和颜色
3.p span{font-weight:bold;}文字设置为粗体
4.p a{font-style:italic;}文字设置为斜体
5.p a{text-decoration:underline;}文字设置下划线
6. .oldPrice{text-decoration:line-through;}文字设置删除线
7.p{text-indent:2em;}段落缩进2个
8.p{line-height:2em;}行间距2倍行高
9.h1{letter-spacing:50px;}中文字,字母间距
h1{word-spacing:50px;}单词间距
10.h1{text-align:center;}段落居中
h1{text-align:left;}段落居左
h1{text-align:right;}段落居右
五.布局模型
1.流动模型(flow)默认
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
2.浮动模型(float)
div{float:left}
div块在一行按居左顺序显示
3.层模型(layer)
层模型有三种形式:
(1)绝对定位(position: absolute)
(2)相对定位(position: relative)
(3)固定定位(position: fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响
(4)相对于某个模块定位
六.代码缩写
1.盒模型缩写见html
2.颜色缩写
p{color:#000000} 缩写 p{color:#000}
p{color:#336699} 缩写p{color:#369}
3.字体缩写
注意:
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
七.值
1.颜色值
在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:
八.样式设置
(一).居中
1.行内元素
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码:
2.块状元素之定宽
定宽块状元素:块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:
3.块状元素之不定宽
(1)加入 table 标签
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
举例如下:
(2)设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置。
改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。
这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
(3)设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的。
我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。
4.垂直居中
(1)父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。
(2)父元素高度确定的多行文本
a)使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:
b)这种方法兼容性比较差,只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。
5.隐性改变diaplay类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
a) position : absolute
b) float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。
如下面的代码,小伙伴们都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。
九.样式
1.font-size:12px;字号
2.color:red;字体颜色
3.line-height:1.6em;行间距
4.font-weight:normal;去掉字体加粗
5.border:1px;边框1像素宽
6.solid:red;边框红色实心