文档章节

零基础学 css

罗培海
 罗培海
发布于 2015/04/15 15:26
字数 808
阅读 38
收藏 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
博文 53
码字总数 21312
作品 0
福州
web前端开发小白需要怎样学习才能迅速掌握前端技术?

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

Java编程语言基础入门博客
2017/04/14
0
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
前端开发人员必须了解的七大技能图谱之CSS

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

web前端02
02/03
0
0
34岁!100天!学会Java编程(Day11)——后续学习路线规划

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

魏小筠
2017/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
34分钟前
2
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
13
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部