提示
CSS样式使用优先级:内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。
权值
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:
p{color:red;}
.first{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
例如:p{color:red!important;}
设置大小
可用px也可用百分比(相对于父元素)
颜色值的3种设置方式
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}
单位(均为相对单位)
像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
em
这是相对于font-size的单位,假如元素font-size:16px,那1em=16px,如果本元素没有设置font-size或者font-size=1em,该em会继承父元素的font-size,一般情况下浏览器默认的font-size:16px.
百分比
p{font-size:12px;line-height:130%}设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
隐性改变的display类型
1. position : absolute
2. float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。
一、布局属性
display
1、block:元素显示在下一行,作为一个新段落。
2、list-item:元素显示在下一行,前面与列表元素标记。
3、inline:元素显示在当前段落内。
4、none:元素不显示。
margin和padding属性——用于添加元素周围的间距。
1、margin(边距)
说明:margin指的是在元素"外面"添加空隙,是”相对于“另外一个元素来进行添加空隙的。
2、padding(填充)
说明:padding指的是由元素”内部“向外部扩充空间,例如padding-left:20px,意思就是在当前元素的大小上向右增加20px大小。
##align和float属性------用于将元素相对其他内容放置。
1、align(对齐)
a)text-align(水平对齐)
b)vertical-align(垂直对齐)
c)text-indent(水平缩进)
举例:对图像设定垂直方向中间对齐,那么图像周围的文字就会垂直对齐它。也就是说当图像很大而只有一段文字的话,文字就会在图像的垂直方向的中间显示。
2、float(浮动)
说明:float只有left和right,当设置元素向一边浮动时,元素会尽可能的向设定边靠拢,除非遇到其它元素,否则会一直向浏览器边界靠拢。而且随着浏览器大小的改变,元素也会跟着浮动,当第一排不够时移向第二排,且无需管display,但是对滚动条的改变无效,想要实现对滚动条有效果请使用背景图片,并且设置background-attachment : scroll;以及用background-position-x(y)指定位置 。
min-width:可以设定最小宽度,当低于这个宽度的时候float无效。
二、格式化属性
文字
字体风格
1.font-family:字体集
2.font-size:字体大小
3.font-style:字体样式
4.font-weight:字体粗细
5.line-height:设置文本行的高度
使用一下技术管理文本流
1.float:决定文本如何沿元素绕排。(也就是说你设置了这个元素那么他周围的文字就得按设定的来绕排)
2.clear:禁止元素沿元素绕排。
3.overflow:在元素太小而不能包含所有文本时控制文本的溢出方式。
图像
图像属性
1.alt 图像替换文本,当图像未能加载成功显示的文本。
图像映射
说明:可以将一张图分割成很多份,然后给每一份设定要访问的网址。一般情况下不使用,都是将很多张图合成一张大的,然后每张图设定要访问的网址。
选择器
标签选择器
类选择器
ID选择器
子选择器
例如:ul>li{color:red} 这句话的意思是,ul列表中的li(第一代)文字全部设置为红色包含(后代)选择器
例如:ul li{color:red} 这句话的意思是,ul列表中的li文字全部设置为红色(就算li里面还有ul也会把这个ul里的li设置成红色)
伪类
说明:伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
例如<a>的伪类有如下:
a:link 描述未被访问过的超链接样式。
a:visited 描述访问过并且存在于浏览器内存的超链接样式。
a:hove 描述用户鼠标悬停下(单击之前)的超链接样式。
a:active 描述被点击但未被释放时超链接的样式。
示例代码:
<style type="text/css">
a:hover{
color:#CCCCCC
}
</style>
三、标签分类
总结
所有的标签都可以通过 display:block/inline/inline-block 来改变自身的特点
块状元素默认 display:block
内联元素默认 display:inline
内联块状元素默认 display:inline-block
简介
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
说明
块级元素
什么是块级元素?
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。
如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素
在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。
如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{
display:inline;
}
......
<div>我要变成内联元素</div>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
四、盒子模型
理解margin(内容到边框的区域)、padding(与其它盒子的间隔区域)、border(边框线的宽度)
以上三个区域有上、下、左、右四个方向可以控制
五、布局模型
1、流动模型(Flow)(浏览器默认模型)
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示,当超过浏览器宽度会自动向下一行移动。(内联元素可不像块状元素这么霸道独占一行)
2、浮动模型 (Float)
设置float属性可以让含该属性的所有元素(包括块状元素)都在同一行向你说指向的方向排列(left/right),
当所有元素的宽度大于浏览器宽度时会将元素移到下一行(在代码中越靠后的元素越先移到下一行)。
3、层模型(Layer)
1、绝对定位(position: absolute)
使用left、right、top、bottom属性相对于其“最接近的一个具有《定位属性》的《父包含块》“进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
具有定位属性的意思是父包含块必须含有(absolute、relative、fixed)这几个属性之一
2、相对定位(position: relative)
相对于自己原来应该在的位置产生设定的偏移(这样可以产生层叠效果)
例如:div应该独占一行的,当设置了relative属性在top上偏移50px,那么这个div就可以在原来这一行的位置上向下移动50px
3、固定定位(position: fixed)
相对于浏览器页面的绝对定位(也可以参数层叠效果)
六、居中
水平居中——行内元素(内联元素)
在它的父元素使用text-align:center;就能使该行内元素居中显示
水平居中——定宽块状元素(有固定的width值)
通过设置“左右margin”值为“auto”来实现居中的
水平居中——不定宽块状元素
1.加入 table 标签
2.设置 display: inline 方法:然后按照行内元素的居中方法来进行居中,进行不定宽元素的属性设置
3.给元素本身以及它的父元素设置 position:relative和float:left,然后在设置父元素left:50%,本元素50%.就可以显示居中了。(原理不懂的话,把代码写出来给元素加上边框就能理解差不多了,但是float:left没整明白)
垂直居中——父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。
垂直居中——父元素高度确定的多行文本(图片)
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差