CSS属性

作者: 夷陵小祖 | 来源:发表于2016-09-25 16:00 被阅读9次

link标签的rel属性

外部样式表

rel属性值:

1.stylesheet:定义样式表
2.alternate stylesheet :候选样式表(少用)

CSS的单位

a.绝对单位  2.54cm = 25.4mm = 72pt = 6pc (派卡)
b.相对单位 px , %

字体的属性

图片来自W3C
p{
  font-size:30px;    

  font-family:华文彩云,幼圆,宋体; 
  //当不支持华文彩云时就用幼圆,类推,都不支持就默认。中间用逗号隔开

  font-weight:bold/bolder;  //这两个效果区别不大

  font-style:italic;  //斜体

  font-variant:small-caps;  //小写变大写

  font: 30px 华文彩云 bold italic //也可以写一起
}

文本属性

图片来自W3C
p{
  letter-spacing:0.5cm;

   word-spacing:1cm;

  text-align:center;   //容器中 

  text-decoration:underline / line-through / overline 
  //上中下划线

  text-transform:uppercase / lowercase / capitalize
  // 大写/小写/每个单词首字母大/小写
}

背景属性

图片来自W3C
body{
  background-image:url(照片位置)  

  background-repeat:no-repeat /repeat-x /repeat-x 
  // 不重复 / 只在横向平铺 / 只在纵向平铺

  background-position:right / center / right bottom / 
  right center / center center /right top

  background-attachment:scroll / fixed
  //移动滚动条图片位置不变 / 移动滚动条是图片也    
  随之滚动
  //背景滚动方式

  background-color:#xxxxxx
}

列表属性

ol{
  list-style-image:url(image/ic_launcher-web.jpg);
  margin-left:100
}

(重要)盒子模型

属性包括:
内容(content)
填充(padding)
边框(border)
边界(margin)

盒子模型
以下来自百科解释:
内容(CONTENT)就是盒子里装的东西;

填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;

边框(BORDER)就是盒子本身了;

边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。

在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。

填充只有宽度属性,可以理解为生活中盒子每个HTML标记都可看作一个盒子;

height:内容高度
width:内容宽度

IE盒子模型

IE盒子模型
上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了padding 和 border 和。
标准化W3S模型
在顶部加 doctype 声明,即可在所有浏览器中都显示“标准 w3c 盒子模型”。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

相关文章

  • css样式入门书目录

    css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...

  • HTML标签类型

    修改标签的显示类型 CSS属性 CSS属性-可继承属性 CSS属性-不可继承属性 CSS常用属性代码附录:

  • Day03_CSS属性组成和作用

    学习目标 1、css属性和属性值的定义2、css文本属性3、css列表属性4、css背景属性5、css边框属性6、...

  • 03-CSS核心属性

    学习目标 1、css浮动属性详解2、css文本属性3、css列表属性4、css背景属性5、css边框属性 一、cs...

  • 2018-09-19 css核心属性

    DAY4:CSS核心属性 学习目标 1、css浮动属性详解 2、css文本属性 3、css列表属性 4、css背景...

  • css定位

    CSS position属性 CSS display属性 CSS float属性 (引用:https://www...

  • 整理常用CSS

    字体属性:(font) CSS文字属性: CSS边框空白 CSS符号属性: CSS背景样式: 指定背景位置 CSS...

  • jQuery内容整理——CSS

    .css()访问匹配元素的样式写法:.css({'属性','属性值'})|.css({属性:'属性值'}) .o...

  • CSS属性参考手册

    CSS3 动画属性(Animation) CSS 背景属性(Background) CSS 边框属性(Border...

  • HTMLCSS学习笔记(四)-- CSS属性

    CSS属性 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性属性值:属性值包括法定...

网友评论

      本文标题:CSS属性

      本文链接:https://www.haomeiwen.com/subject/dnxfyttx.html