文档章节

零基础学 css

罗培海
 罗培海
发布于 2015/04/15 15:26
字数 808
阅读 37
收藏 0
点赞 0
评论 0
  • css嵌入方式 

     a.   html页面引入css文件方式:<link type=''text/css" rel="stylesheet" href="base.css"> (base.css 为根目录下)

          b. html页面嵌入式css<style type="text/css">。。。</style>

         c.html页面内联式css:<span style="color:red">Holle World</span>

  • css优先级的原则:离被设置元素越近优先级别越高(!important 除外);

  • 标签杂计:

    <br> 换行    &nbsp; 空格       <q></q>引用         <blockquote></blockquote> 缩紧样式(常用古诗文引用) <hr/> 水平横线              <address></address>地址信息      <textarea rows="50" cols="10"></textarea>文本框  rows行数  cols列数    <select> selected="selectde"选中    a:hover 伪类  <body style="font-family:"Microsoft Yahei""></body> 微软雅黑          font-weight:bole 字体加粗    

  • css 注释/*  */

  • css 子选择器:大于符号(>),用于选择指定标签元素的第一代子元素 例如:ul>li{color:red;font-size:20px}

  • css 后代选择器:元素下的后辈元素(全部子元素) 例如:ul li{color:red;font-size:20px}

  • css 通用选择器:*{color:red;}

  • css 伪类选择符 a:hover{color:red;font-size:20px}

  • css 分组选择符 a:hover,span{color:red}/* a:hover 与span 都为红色*/

  • css important 例子:

<style type="text/css">
p{
  color:red!important;
}
p{
   color:green;
}
</style>
<p>Hellow World</p><!-- 显示为红色 -->
  • css盒模型:元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

div{/*margin,padding、border的缩写方法是一致的 例如:margin:10px 10px border:10px 10px */
    margin:10px;
    border:1px soild #ccc;
    padding:20px;
    width:200px;
}/*div 实际宽度:10px+1px+20px+200px+20px+1px+10px=262px */

如图:

布局模型:布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。CSS包含3种基本的布局模型,用英文概括为:Flow(流动模型)、Layer(层模型) 和 Float(浮动模型)。

<style type="text/css">/*relative 和 absolute配套使用 */
div{
	border:1px solid red;
}
#div1{
	width:200px;
	height:200px;
	position:relative;
}
#div2{
	width:90%;
	height:50%;
	position:absolute;
	bottom:10px;
	border:1px solid green;
}
</style>
<div id="div1">
   <div id="div2"></div>
</div>

查看relative 与 absolute 实例

  • 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;} */
  • css 水平居中的问题

    a.如果被设置元素为文本图片行内元素时,水平居中是通过给父元素设置 text-align:center 来实现

    b.如果被设置元素为块级元素时,水平居中通过设置左右margin”值为“auto”来实现居中的

    c.如果被设置元素为不定宽度的块级元素(例如导航栏),水平居中通过改变块级元素的 dispaly 为 inline 类型,然后父元素使用 text-align:center 来实现居中效果

  查看div 行内元素居中和块级元素,不定宽块级居中问题

  • css 垂直问题

    a.使用插入 table (包括tbody、tr、td 默认vertical-align:middle)标签,同时设置 vertical-align:middle注意:css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效

  • b.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

div 垂直 实例


© 著作权归作者所有

共有 人打赏支持
罗培海
粉丝 3
博文 44
码字总数 18862
作品 0
福州
web前端开发小白需要怎样学习才能迅速掌握前端技术?

  今天来和大家讲讲零基础小白学习web前端开发,需要怎样学习才能迅速掌握前端技术?学习前端开发又需要用到哪些开发工具呢?这里首先分享一下我自己的经验,我自己目前是搞后端开发【也就是...

Java编程语言基础入门博客 ⋅ 2017/04/14 ⋅ 0

Web前端工程师的成长之路:前端开发零基础入门

HTML5与Flash之争,似乎早早就已分出了胜负,今年7月底,Adobe宣布将于2020年年底停止开发和发行Flash Player,同时建议内容开发者将Flash内容移植到HTML5,等于亲手宣判了Flash死刑。 随着H...

云大学小编 ⋅ 2017/12/04 ⋅ 0

零基础学Java的10个方法

版权声明:本文为北京尚学堂原创文章,未经允许不得转载。 零基础学Java只要方法得当,依然有机会学习好Java编程。 但作为初学者可以通过制定一些合理清晰的学习计划。 在帮你屡清楚思路的同...

SXTkaifa ⋅ 2016/11/18 ⋅ 0

34岁!100天!学会Java编程(Day11)——后续学习路线规划

python vs java 路线思考 看了些介绍python的文章,有些犹豫像我这样的初学者是否应当先学好简单一点的python再转java,还是把java这一条路趟到底再学习python的基础和一些优势领域的应用。想...

魏小筠 ⋅ 2017/11/09 ⋅ 0

前端开发人员必须了解的七大技能图谱之CSS

CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页...

web前端02 ⋅ 02/03 ⋅ 0

Java一般要学多久?如是我闻

其实学java一般要多久?因人而异,有些人资质好,头脑聪明几个月就能学会,有些人天生愚钝,理解能力差,不过勤能补拙,只是时间相对长点 要坚持住。不过java相对于C,C++java而言,java无疑简...

ToEnd ⋅ 2017/12/09 ⋅ 0

免费精品课大放送:Python、Java、MySQL、Linux……

阿里云大学,是阿里云官方创新人才培养平台,致力于打造从IT时代向DT时代转型过程中在云计算、大数据、人工智能、云安全等领域一所创新人才工场,打造从学、到练、到赛、到考、到就业与创业的...

云大学小编 ⋅ 2017/12/20 ⋅ 0

华章出版社推出国内首家程序员视频培训网

根据机械工业出版社消息,其子公司华章出版社推出了国内首家程序员视频培训网-华章培训网。 华章培训(www.hztraining.com)直属于北京华章图文信息有限公司。它是一个全方位的网络视频培训平...

老枪 ⋅ 2010/05/24 ⋅ 7

迄今为止见过最牛逼的程序员,300行代码打造圣诞欢乐树!

  今天小编我逛论坛,今天小编在网上看到一个关于圣诞祝福的特效,使用JavaScript做的,不愧是前端领域的顶尖人物,抱着膜拜的心情,小编我也下载了一份源码进行学习运行,暂时没有发现一点...

万能的大白 ⋅ 2017/12/24 ⋅ 0

w3cschool app全新上线微课的6大亮点,随时随地学编程!

近期,w3cschool官方app全新上线了微课这一大功能。 有不少的程序员使用微课学习编程后,表示有点相见恨晚。 image 根据大量w3cschool粉丝的微课使用体验,下面w3cschool重点介绍w3cschool a...

W3Cschool ⋅ 2017/11/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 13分钟前 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 13分钟前 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 33分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 53分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 今天 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 今天 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 今天 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部