MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 如鹏网学习笔记(8)CSS

如鹏网学习笔记(8)CSS

www.MyException.Cn  网友分享于:2013-08-22  浏览:0次
如鹏网学习笔记(八)CSS

CSS

一、CSS简介

  1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果

  2,CSS预先定义了众多的和显示效果有关的样式属性,比如color、font-size等。如果希望html内容显示某个效果,就应用对应的CSS样式属性即可

  3,CSS对样式的控制是非常精确和精细的

二、CSS语法

  1,CSS语言的基本单位是样式声明:proppertyName:value;

  2,CSS语言的使用方式:
    1,把CSS样式声明作为HTML标签的style属性值

    2,使用CSS选择器

三、文本样式

  用来控制文本的显示效果,常用样式属性:

  color(文本的颜色):颜色值(颜色名、RGB / RGBA 颜色、十六进制颜色..)(见备注)
  text-indent(文本缩进): 长度值(长度单位:px、%、em、in、cm、mm..)
  text-align(文本对齐方式): 枚举值(left、right、center..)
  word-spacing(单词间隔):长度值
  letter-spacing(字符间隔):长度值
  text-decoration(文本修饰):枚举值(none、underline、overline、line-through..)

四、字体样式

  font-family 设置字体名称
  font-size 设置字体的尺寸
  font-style 设置字体风格
  font-weight 设置字粗细

  font 可以把上面的样式属性合并起来写(值是有序的,使用空格分隔)
  (font-weight font-size font-family)

五、CSS的特点

  1,有的样式属性子标签可以从父标签那里继承过来,有的则不能

  2,一个标签可以同时应用若干个样式属性

  3,一个标签的最终显示效果,是由若干个样式属性层叠(叠加)到一起形成的

六、CSS选择器

  1,如果不适用元素style属性值的方式,CSS要想控制元素的样式,就要先定位、找到想要控制的元素

  2,CSS使用选择器语法来定位元素,选择器有多种类型,并且选择器之间可以通过多种形式组合在一起使用,
    CSS选择器灵活、精准、而且强大

  3,选择器类型:
    标签选择器、id选择器、类选择器、属性选择器、伪类选择器

  4,选择器可以书写在Html的<style>标签里面,语法格式为:
    <style type="text/css">
      选择器1{样式声明列表}
      选择器1{样式声明列表}
    </style>

七、属性选择器

  1,通过元素的属性进行定位

    [attr]选择有attr属性的标签
    [attr=val] 选择以attr属性值为val的标签
    [attr^=val] 选择以attr属性值以val开头的标签
    [attr$=val] 选择以attr属性值以val结尾的标签
    [attr*=val] 选择以attr属性值中包含val的标签

八、伪类选择器

    用来定位处于特定状态下的元素

    :link 没有被点击过的超链接
    :visited 被点击过的超链接
    :hover 鼠标经过的超链接
    :focus 获得焦点的标签
    :first-child 第一个子标签
    :last-child 最后一个子标签
    :empty 没有内容的标签
    :enabled 可以操作的标签
    :disabled 不可操作的标签
    :checked 处于选择状态的标签

九、复合选择器

  选择器可以进行多种形式的组合:
  selector1空格selector2 在1选中的元素中,使用2筛选其后代元素(2不要使用伪类选择器)
  selector1>selector2 在1选中的元素中,使用2筛选其子元素
  selector1~selector2 在1选中的元素中,使用2筛选其后续兄弟元素
  selector1+selector2 在1选中的元素中,使用2筛选其后续紧邻的兄弟元素
  selector1,selector2 各个选择器的并集
  selector1(没有空格)selector2 各个选择器的交集(复合后可识别才可以这样使用)


十、CSS控制边框效果

  很多HTML元素都有边框,如img、table、td、div、input等

  border-style 边框样式,枚举值

  border-width 边框宽度,长度值

  border-color 边框颜色,颜色值

  可以合并上面三个样式属性 border:solid 2px red;

  还可以分别控制上下左右边框的样式,如border-top-color样式属性

  table元素使用border-collaps:collaps;可以合并单元格边框


十一、CSS控制元素背景样式

  很多HTML元素都可以设置背景样式(背景色、背景图片),如body、div等

  background-color: red;背景色,颜色值

  background-image: url("bg1.jpg"); 背景图片

  background-repeat: 背景图片平铺方式,枚举值

  background-attachment:背景图片是否随内容滚动,枚举值

  background-position-x:center; 背景图片水平方向位置,枚举值


  同样,背景样式也可以写在一起background: url("bg1.jpg") repeat ;

十二、盒子模型

  为了更好的控制页面样式,CSS定义了盒子模型。一个HTML元素就是一个盒子

  盒子的元素:
    margin 外边距
    border 边框
    padding 内边距
    内容



  1,一个盒子在页面中占据的范围大小由外边距、内边距、内容的总面积决定

  2,内边距和外边距只能指定宽度样式

  3,盒子的背景会对内边距和内容起作用

  4,外边距、边框、内边距可对上下左右不分分别进行样式控制

  5,设置盒子高度或宽度时只对内容起作用


十三、盒子的定位

  1,通过对每个盒子的外边距、边框、内边距、内容、位置的精确控制,CSS可以实现复杂而精准的页面布局

  2,需要掌握下面几个概念

    块级元素:这类元素默认有换行效果,典型的如div

    行内元素:这类元素默认没有换行效果,典型的如span

    文档流:HTML元素在页面上显示时,根据在源码中出现的次序,按照从上到下、从左到右、块级元素独占一行、行内元素不换行的规则
        依次排列。文档流中的元素会对后续元素的位置产生影响

    盒子定位:
      相对定位:
        元素在显示时,相对自己本来的位置向下或者向右偏移指定数值,
        但元素本身并不脱离文档流,也就说后面的元素还认为此元素在原来的位置,
        所以会排列在此元素原本位置的后面(但会造成覆盖)

        position: relative;
        top: 50px;
        left: 50px;

      绝对定位:
        以最近的已经定位的祖先元素为基准进行偏移(如果没有这样的祖先元素则以浏览器窗口为基准),
        元素本身脱离文档流,也就说后面元素认为此元素不存在,所以会占据此元素原来的位置
        (但会造成覆盖,脱离文档流后就不具有块级元素独占一行的性质了)

        position: absolute;
        top: 50px;
        left: 50px;

      固定定位:
        和绝对定位类似也会脱离文档流,但总是以浏览器窗口为基准,而且位置不会随着滚动条移动
        position: fixed;
        top: 50px;
        left: 50px;

      浮动:
        如果一个盒子向左浮动(float: left;):这个元素会成为行内元素;
        它后面的块级元素会失去一半的独占一行的特性,即左边紧靠在浮动元素后面,右边延伸到行尾
        向右浮动和向左浮动效果类似
        可以使用clear: both;清除浮动效果对后面盒子的影响




十四、z-index层级样式属性

    由于元素定位后会产生元素的叠加覆盖情况,为了灵活控制叠加部分的显示,CSS提供了z-index层级样式属性


    z-index只能取整数,默认为0,可正可负
    z-index值大的元素会覆盖值小的元素
    z-index只对进行了定位的元素有效


十五、如何获得元素在页面中的坐标

    HTML所有的元素都具有下面这5个只读属性

    offsetLeft 元素边框距页面左边界的距离
    offsetTop 元素边框距上边界的距离
    offsetWidth 元素的宽度(左右边框的跨度)
    offsetHeight 元素高度(上下边框的跨度)
    offsetParent 返回已经定位的祖先元素,如果没有则返回body元素或者null



十六、使用CSS的五种方式

  1,行内样式:写在元素的style属性里

  2,内嵌样式:写在<style>元素内

  3,导入样式:在<style>元素内,开头使用@import url(index.css);方式引入,这种方式实际上算是内嵌样式

  4,链接样式:使用<link>元素引入css文件,如<link type="text/css" rel="stylesheet" href="c1.css"/>

  5,默认样式:集合每一种html标签都有默认的css样式


  当某个样式属性出现多次时,就需要使用优先级规则解决产生的矛盾:
    1,不同引入方式的优先级:行内>内嵌、导入和链接>默认方式
    2,同一种引入方式或相同优先级的引用方式中,后出现的会覆盖先出现的

十七、其他常用样式属性
  display 控制元素的可见性

  cursor 控制鼠标指针进入元素时的样式
























文章评论

漫画:程序员的工作
漫画:程序员的工作
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
为什么程序员都是夜猫子
为什么程序员都是夜猫子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员的鄙视链
程序员的鄙视链
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员必看的十大电影
程序员必看的十大电影
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
每天工作4小时的程序员
每天工作4小时的程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员和编码员之间的区别
程序员和编码员之间的区别
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员都该阅读的书
程序员都该阅读的书
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
那些争议最大的编程观点
那些争议最大的编程观点
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个调试和排错的小建议
10个调试和排错的小建议
代码女神横空出世
代码女神横空出世
Java程序员必看电影
Java程序员必看电影
中美印日四国程序员比较
中美印日四国程序员比较
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
我的丈夫是个程序员
我的丈夫是个程序员
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
一个程序员的时间管理
一个程序员的时间管理
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
 程序员的样子
程序员的样子
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
老程序员的下场
老程序员的下场
程序员应该关注的一些事儿
程序员应该关注的一些事儿
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
如何成为一名黑客
如何成为一名黑客
我是如何打败拖延症的
我是如何打败拖延症的
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有