零基础学 css
零基础学 css
罗培海 发表于3年前
零基础学 css
  • 发表于 3年前
  • 阅读 34
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 菜鸟学 css 杂记
  • 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
博文 40
码字总数 15344
×
罗培海
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: