南大软院大神养成计划--第二天学习CSS的基础归纳

原创 2015年11月17日 22:40:06

总算学完了基础,虽然以前学过,但还是认真看完了每一章,加深了各个基本元素的认知程度。

以前做网页作业总喜欢建立一个div标签在css里设置div{display:block; position:absolute}。为什么呢?因为设置为块元素,文件就可以随意拖动到网页任意位置,感觉好好玩,好方便,哈哈。

学完基础发现,完全可以通过CSS元素里padding、margin来改动文件在网页的位置。


(以下是今天归纳)


1、权值

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意:继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
同元素多个css样式相同权值按css样式的前后顺序来决定,后面CSS样式会被应用!
*有些特殊的情况需要为某些样式设置具有最高权值,可以使用!important来解决。
例如:p{color:red!important;}


2、元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>


3、块级元素特点:

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

4、内联元素特点:

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

5、内联块状元素特点:

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


6、css布局模型

在网页中,元素有三种布局模型:
(1)流动模型(Flow)
流动布局模型具有2个比较典型的特征:
第一点:块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。
实际上,块状元素都会以行的形式占据位置。
第二点:在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

(2)浮动模型 (Float)
因为块状元素默认独占一行,让2个块状元素并行的方法就是浮动。
如 div、p、table、img 等元素都可以被定义为浮动

(3)层模型(Layer)
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。
CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
①绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),
这条语句的作用将元素从文档流中拖出来,
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
(就是移动一个东西在网页的位置是居中,靠左 ,靠右...)
②相对定位(position: relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),
然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
③固定定位(position: fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,
或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
并且拖动滚动条时位置固定不变。(就是小说网站左右两边的广告,跟黏皮糖一样,你移动,它移动!)

7、盒模型代码简写


还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左
通常有下面三种缩写方法:
(1)如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px; 可缩写为:margin:10px;
(2)如果top(上)和bottom(下)值相同、left(左)和 right(右)的值相同,如下面代码:
margin:10px 20px 10px 20px; 可缩写为:margin:10px 20px;
(3)如果left(左)和right(右)的值相同,如下面代码:
margin:10px 20px 30px 20px; 可缩写为:margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。

8、颜色值缩写
关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例子1:p{color:#000000;}  可以缩写为:p{color: #000;}
例子2:p{color: #336699;} 可以缩写为:p{color: #369;}

9、字体缩写
网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
注意:
(1)使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
(2)在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{
    font:12px/1.5em  "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。

10、颜色值


个人通常用PS查看颜色十六进制码。

11、长度值
长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
(1)像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。
实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
(2)em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
下面注意一个特殊情况:
但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
(3)百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

南大软院大神养成计划--第一天学习HTML+CSS的基础归纳

其实前天晚上注册开始学的,大一网页算辅修课,玩了几下只,现在忘得差不多了,现在有机会把它捡起来了,哈哈!! 从头慢慢看过来,与去年相比,发现老师讲还不如在这个网站自学。老师开课直接跳过基础,发个PP...

南大软院大神养成计划——第二天

今天是南大软院大神养成计划实施的第二天,在这一天中,我学习了HTML+CSS基础教程,由于上过网页工程实训,所以对于这章内容,我更多是查漏补缺,看看自己哪里不会,然后补充知识,毕竟实训时间只有4天,讲...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

南大软院大神养成计划——第一天学习心得

今天是南大软院大神养成计划开始的第一天,在参加这次活动之前,我犹豫了很久到底要不要参加此次计划,因为我对成为一名web前端开发不是很感兴趣,我更感兴趣的是嵌入式开发,但是后面经过室友的鼓励,我还是选择...

南大软院大神养成计划 第一天

和很多人不一样,我在此之前是并没有过接触过任何web设计的编程语言的。可能就是因为这样,当今天看见imooc上的代码时,会有点不太适应。是的,我没想到过,居然可以在浏览器里写程序,这确是打破了我之前的...

南大软院大神养成计划——第九天

今天是南大软院大神养成计划实施的第九天,今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容,最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。 先讲讲“如何判断节点元素...

南大软院大神养成计划--day17

今天学习的是Servlet路径跳转。 1: 使用相对地址(小例子) : 这里面用的是相对路径访问HelloServlet。 这里面的servlet是工程的包名,HelloServlet是类名,这里注意...

南大软院大神养成计划——第十二天

今天是南大软院大神养成计划实施的第十二天,今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。 先说说鼠标事件,鼠标事件可以分为click,ov...

南大软院大神养成计划--第四天JavaScript

今天开始学JavaScript (以下是归纳) JavaScript document.write() 输出内容(相当C语言里的printf) var 变量名 ...

南大软院21天大神养成计划-第二天

南大软院21天大神养成计划-第二天

南大软院大神养成计划——第三天

今天是11月18号,离南大软院大神养成计划实施已经过去了三天,在这三天里,我仍然在复习基础教程。今天我学习的课程是“如何用CSS进行网页布局”和“网页布局基础”。两个课程都是讲解CSS的基础部分,内容...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)