如鹏网学习笔记(八)CSS_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 如鹏网学习笔记(八)CSS

如鹏网学习笔记(八)CSS

 2017/8/20 0:08:40  半路和尚  程序员俱乐部  我要评论(0)
  • 摘要:CSS一、CSS简介1,CSS(CascadingStyleSheets)级联样式表,是一种计算机语言,用来控制HTML内容的显示效果2,CSS预先定义了众多的和显示效果有关的样式属性,比如color、font-size等。如果希望html内容显示某个效果,就应用对应的CSS样式属性即可3,CSS对样式的控制是非常精确和精细的二、CSS语法1,CSS语言的基本单位是样式声明:proppertyName:value;2,CSS语言的使用方式:1
  • 标签:笔记 学习 学习笔记

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 控制鼠标指针进入元素时的样式
























发表评论
用户名: 匿名