文档章节

零基础学 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
博文 51
码字总数 20249
作品 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
我是如何零基础自学转行人工智能的(附十问十答)

每个字都是经验所得,都是站在一个零基础的人的角度写的,纯手打+网上优秀资源整合,希望大家能每个字都认真看。 接下来文章会侧重在以下几方面 1、零基础如何进行人工智能的自学(以找工作为...

经济与编程
08/01
0
0
34岁!100天!学会Java编程(Day11)——后续学习路线规划

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

魏小筠
2017/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HTTPS is easy

HTTPS is easy https://www.troyhunt.com/https-is-easy/ HTTPS is easy! In fact, it's so easy I decided to create 4 short videos around 5 minutes each to show people how to enable ......

openthings
22分钟前
0
0
bugList 2

用户端: 1. 上传文件时,当选择:彩色-A3-双面时,第二个图片有bug 应改为 和第一个图片的类型相同 2. 确认打印时,三个下拉选目前有bug 应改为:根据后台配置的商家,group by计算出不同城...

勇恒
25分钟前
2
0
keras cnn 网咯 mnist 分类

搭建貌似比tf是简单很多。。。。。 from keras.datasets import mnistfrom keras.utils import np_utilsfrom keras.models import Sequentialfrom keras.layers import Dense, Activat......

阿豪boy
28分钟前
0
0
解决 /var/run/nginx.pid failed

nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory) sudo nginx -c /etc/nginx/nginx.conf nginx -s reload...

驛路梨花醉美
29分钟前
0
0
nginx负载均衡-ssl原理-生成ssl密钥对-nginx配置ssl

nginx负载均衡: 1.创建配置文件 vim /usr/local/nginx/conf/vhost/load.conf #添加以下内容: upstream qq_com #名字自定义,借助此模块定义多个IP,后面...

ZHENG-JY
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部