CSS概述
CSS是 层叠样式表 (Cascading Style Sheets)
定义HTML的样式,即如何显示HTML标签(HTML是结构,CSS是样式)
样式是加在标签上的,没有标签样式就无从谈起
存在兼容性问题:浏览器内核分为IE内核和Webkit内核
w3cschool教程是非常好的教程,可去学习
将CSS添加到HTML中
* 内部样式表
在<head>中添加<style>标签,直接写入css样式
* 外部样式表
在<head>中添加<link>标签,引入外部css文件(外部css文件后缀就是css)
* 内联样式
在需要的标签中添加属性style,写入css样式
例:
内部样式表:
<head>
<style>
body {color:blue}
</style>
</head>
外部样式表:
<head>
<link rel="stylesheet" href="a.css">
</head>
a.css内容:body {color:blue}
内联样式:
<body style="color:blue">
样式层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
越往下拥有越高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
CSS语法
* CSS 语法由三部分构成：选择器、属性和值
selector {property: value}
如:
body {color: blue}
定义页面背景色为蓝色
多个属性中间用;隔开
选择器
* 标签选择器
标签名{属性:值;} 例:li{color:red;}
* class选择器
.class值{属性:值;} 例,class为a的标签: .a{color:red;}
* id选择器
#id值{属性:值;} 例,id为a的标签: #a{color:red;}
* 层次选择器
父选择器 子选择器{属性:值;} 例,li下的span: li span { color:red;}
* 伪类选择器
语法: 选择器:伪类{属性:值;}
常用伪类:
:link 未访问过的元素
:visited 已访问过的元素
:hover 当前鼠标悬停的元素
:active 元素被激活时,鼠标按住不放
:focus 获取焦点时
:first-child 指定标记的第一个元素
前四个伪类一般用于超链接,也可以用于别的元素,但ie6只支持超链接.后两个ie不支持
:link , :visited , :hover 三个如果两个以上同时出现,则必须按照前面的顺序,否则失效
* class和id属性
* 是所有标签共有的属性,如
<li class="a">
<li id="b">
* class和id的区别:
class的值可以重复,但是id的值不能重复
* 选择器可以配合使用,如
class为a的li li.a{color:red;}
class为a的li下面的span li.a span{color:red;}
被访问过的class为a的超链接 a.a:visited{color:red;}
* 同时给多个选择器添加相同的样式,可让多个选择器用逗号隔开,如
li,a,h1 { color:red;}
注释
/* 注释内容 */
常用单位
* 长度单位
px(像素)
* 百分比单位
%(百分比)
* 颜色单位
可以用颜色的名称,如red
#六位十六进制数 : 如 #ffffff 表示白色
#三位十六进制数 : 如 #036 和 #003366等效
属性列表
* 背景
background 多个背景属性的简写
background-attachment 背景图片是否固定
background-color 背景颜色
background-image 背景图片
background-position 背景图片开始位置
background-repeat 背景图片重复方式
background-size 背景图片大小
* 文本
font 多个字体属性的简写
font-family 字体系列
font-size 字体大小
font-style 字体样式(是否斜体)
font-weight 字体粗细
color 字体颜色
letter-spacing 字符间距
line-height 行高
text-align 水平对齐方式
text-decoration 文本装饰效果(下划线)
text-indent 文本首行缩进
text-transform 文本大小写
white-space 处理文本中的空白符和换行符
word-spacing 单词间距
word-break 非中日韩文本的换行规则
word-wrap 换行时可对单词进行拆分(与word-break有细微区别)
* 边框
border 多个边框属性的简写
border-bottom 下边框的多个属性的简写
border-color 边框颜色
border-style 边框样式
border-width 边框宽度
border-bottom-color 下边框颜色
* 区块
weight 宽度
height 高度
opacity 透明度(对于ie此属性不管用)
filter:alpha(opacity:数值) ie滤镜设置透明度
margin 外边距
margin-bottom 底部外边距
padding 内边距
padding-bottom 底部内边距
text-align 水平对齐方式
vertical-align 垂直对齐方式
visibility 元素是否可见
display 元素的显示类型(块状元素,行内元素,none)
overflow 内容溢出容器时的操作
cursor 鼠标样式(可使用自定义图片)
* 列表
list-style 多个列表属性的简写
list-style-image 列表项图片
list-style-position 列表项标记是否缩进
list-style-type 列表项标记类型(可设为无)
* 定位
float 浮动
clear 消除浮动
position 定位方式
left 距离左边的距离
top 距离顶部的距离
right 距离右边的距离
bottom 距离底部的距离
z-index 元素的层叠顺序
clip 裁剪绝对定位元素
属性详解
* 背景
background 多个背景属性的简写
各属性位置任意,用空格隔开
例: background:url(a.jpg) no-repeat;
background-attachment 背景图片是否固定
scroll 滚动
fixed 固定不动
background-color 背景颜色
background-image 背景图片
语法:background-img:url(路径)
background-position 背景图片开始位置
数值 例:background-image:20% 12px;
left,center,right bottom,middle,top
background-repeat 背景图片重复方式
repeat 水平垂直重复
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
background-size 背景图片大小
数值 例:background-size:50px 50px;
cover 是图片放到至完全覆盖区域,图片可能不能全部显示
contain 是图片缩放到恰好能全部显示
* 文本
font 多个字体属性的简写
指定顺序: weight variant style size family 用空格隔开
例: font:bolder italic 24px 宋体;
font-family 字体系列
例: font-family:黑体,宋体; 如果第一种没有则使用第二种
font-size 字体大小
font-style 字体样式(是否斜体)
normal 普通
italic 斜体
oblique 倾斜
font-weight 字体粗细
数值 100~900
normal 普通
bold 加粗
bolder 更粗
lighter 更细
color 字体颜色
letter-spacing 字符间距
line-height 行高
text-align 水平对齐方式
left 居左
center 居中
right 居右
justify 可调整
text-decoration 文本装饰效果(下划线)
none 无
overline 上划线
underline 下划线
line-through 删除线
text-indent 文本首行缩进
text-transform 文本大小写
none 无
uppercase 大写
lowercase 小写
capitalize 首字母大写
white-space 处理文本中的空白符和换行符
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
word-spacing 单词间距
word-break 非中日韩文本的换行规则
normal 普通
break-all 允许单词内换行
keep-all 空格或连字符换行
word-wrap 换行时可对单词进行拆分(与word-break有细微区别)
normal 普通
break-word 允许单词内或url内换行
* 边框
border 多个边框属性的简写
无顺序要求,各属性用空格隔开
例: border:1px solid red;
border-bottom 下边框的多个属性的简写
border-color 边框颜色
border-style 边框样式
none 无 groove 凹线
solid 实线 ridge 凸线
dashed 虚线 inset 内陷
dotted 点线 outset 外凸
double 双线
border-width 边框宽度
border-bottom-color 下边框颜色
* 区块
weight 宽度
height 高度
opacity 透明度(对应ie此属性不管用)
取值为小数
filter:alpha(opacity:数值) ie滤镜设置透明度
取值为1~100
margin 外边距
取值为 数字,百分比,auto(auto可用来居中)
margin-bottom 底部外边距
padding 内边距
padding-bottom 底部内边距
text-align 水平对齐方式
left 居左
center 居中
right 居右
justify 可调整
vertical-align 垂直对齐方式
top 顶部对齐
middle 居中对齐
bottom 底部对齐
数值
百分比
visibility 元素是否可见
visible 显示
hidden 隐藏(但还是占位置)
display 元素的显示类型(块状元素,行内元素,none)
none 隐藏(不占位置)
block 块状元素
inline 内联元素
inline-block 行内块元素(有块元素的特点但不换行)
overflow 内容溢出容器时的操作
hidden 隐藏
visible 显示在外
scroll 添加滚动条
auto 自动
cursor 鼠标样式(可使用自定义图片)
url 需使用的自定义光标的 URL。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
* 列表
list-style 多个列表属性的简写
无顺序要求,各属性用空格隔开
list-style-image 列表项图片
语法:list-style-image:url(路径);
list-style-position 列表项标记是否缩进
inside 内部
outside 外部
list-style-type 列表项标记类型(可设为无)
disc 实心圆 lower-roman 小写罗马数字
circle 空心圆 upper-roman 大写罗马数字
square 空心矩形 lower-alpha 小写希腊字母
none 无 upper-alpha 大写希腊字母
decimal 数字
* 定位
float 浮动
none 无
left 左浮动
right 右浮动
clear 消除浮动
none 无
left 左边不允许
right 右边不允许
both 两侧都不允许
position 定位方式
absolute 绝对定位
relative 相对定位
static 默认
fixed 固定定位
left 距离左边的距离
top 距离顶部的距离
right 距离右边的距离
bottom 距离底部的距离
z-index 元素的层叠顺序
值为数字,无单位,可为负数,越大越靠上
clip 裁剪绝对定位元素
例:clip:rect(0px 50px 200px 0px)
属性的值
如 margin 属性的值,可以是一个值,两个值,三个值,四个值
四个值: 上, 右, 下, 左
三个值: 上, 左右, 下
两个值: 上下, 左右
一个值: 上下左右
margin值除了数值还可以使auto,表示居中
CSS 框模型概述
元素从内而外分别是 内容,内边距(padding),边框(border),外边距(margin)
背景应用于由内容和内边距组成的区域。外边距是透明的
width 和 height 指的是内容区域的宽度和高度.增加内边距、边框和外边距会增加元素框的实际总尺寸。
外边距可以是负值
外边距合并:当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者(而不是和,所以发生了合并)
css布局
* 一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。
还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
* 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
* position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
官方解释
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
我的解释
静态定位:默认的定位方式,浏览器按顺序读取页面元素并按顺序将他们在窗口中定位,从上到下,从左到右显示
绝对定位:原点为最近一个绝对定位或相对定位的父类的左上角,根据left和top平移.脱离文档流,后面的元素填补空缺
相对定位:原点为元素原来应该在的位置的左上角,根据left和top平移.不脱离文档流,保留原来的位置.后面的元素还在原来的位置
固定定位:原点为视窗左上角,根据left和top平移.脱离文档流,后面的元素填补空缺
* 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动框脱离文档流,后面的元素填补空缺
浮动的元素自动变为块级元素,并且层级较高,如果下面有元素,则会覆盖在上面
如果包含框太窄，无法容纳水平排列的多个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
行框和清理
浮动元素通常可以缩短行框,使浮动元素和行框处于一行,造成围绕效果
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
* 层叠顺序
元素可能相互覆盖,可使用z-index属性设置元素的层叠顺序.
但是注意:z-index不对静态定位的元素生效.值为数字,无单位,可为负数,越大越靠上
经验之谈
调整元素的位置,最常用的就是利用元素的内边距和外边距.其次才是定位,定位比较费劲
虽然div+css代码比较节俭,但有时table布局更容易(比如表单).两种布局都要熟练掌握
css
最新推荐文章于 2024-01-15 00:00:00 发布
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
