文档章节

零基础学 css

罗培海
 罗培海
发布于 2015/04/15 15:26
字数 808
阅读 40
收藏 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 垂直 实例


© 著作权归作者所有

共有 人打赏支持
罗培海
粉丝 4
博文 54
码字总数 22180
作品 0
福州
私信 提问
Web前端工程师的成长之路:前端开发零基础入门

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

云大学小编
2017/12/04
0
0
零基础学Java的10个方法

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

SXTkaifa
2016/11/18
11
0
web前端开发小白需要怎样学习才能迅速掌握前端技术?

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

Java编程语言基础入门博客
2017/04/14
0
0
34岁!100天!学会Java编程(Day11)——后续学习路线规划

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

魏小筠
2017/11/09
0
0
前端开发人员必须了解的七大技能图谱之CSS

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

web前端02
02/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu16.04下安装docker

[TOC] 本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队的理想选择。 1. 开始安装 1.1 由于...

豫华商
今天
10
0
使用XShell工具密钥认证登录Linux系统

如果你是一名Linux运维,那么Linux服务器的系统安全问题,可能是你要考虑的,而系统登录方式有两种,密码和密钥。哪一种更加安全呢? 无疑是后者! 这里我为大家分享用Xshell利器使用密钥的方...

dragon_tech
今天
8
0
day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
今天
12
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONA......

taadis
今天
2
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
489
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部