CSS基本知识点(01)

2018-06-24 01:45:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、样式表

  内联样式表:
  style=""
  内部样式表:
  <style type="text/css"></style>
  外部样式表:
  <link rel="stylesheet" type="text/css" href="">

  优先级:内联样式表 > 内部样式表 > 外部样式表 > 浏览器缺省设置

2、选择器
  selector {property: value;property: value;......}

  1、标签选择器:
    h1 {}

  2、id选择器:
    #red {color:red;}
    <p id="red"></p>

    div#red{}

  3、类选择器:
    .center {text-align:center;}
    <h1 class="center"></h1>
    <p class="center"></p>
    (01)
    div.red{}
    (02)
    .important {font-weight:bold;}
    .warning {font-style:italic;}
    .important.warning {background:silver;}

    <p class="important warning">This paragraph is a very important warning.</p>

  4、 属性选择器:
    [title]
    {
      color:red;
    }
    <h2 title="Hello County">Hello World</h2>
    (02)
    a[href][title] {color:red;}

    1、属性和值选择器:
    [title=w3school]
    {
      color:red;
    }
    <h2 title="w3school">Hello World</h2>

    2、属性和值选择器(多个值):
    [title~=w3school]
    {
      color:red;
    }
    <h2 title="w3school">Hello World</h2>
    <h2 title="hello w3school">Hello World</h2>

    3、表单选择器:
    input[type="text"]
    {
      width:150px;
    }

  5、多样

    1、派生选择器:
      li strong {} :li标签下所有的strong元素

      注:div#red{} td.center{} 跟 div #red{} td .center{} 是有区别的。

    2、子元素选择器:
      h1 > strong {} :只能是li标签子元素下的strong,其他strong不行

    3、相邻兄弟选择器:
      h1 + p {} :选择紧接在 h1 元素后出现的p,h1 和 p 元素拥有共同的父元素

    4、分组选择器:
      h1,h2,h3,...{} :这几个h标签共用一些属性

    5、伪类
      selector : pseudo-class {property: value}
      注:后面详细介绍

3、CSS背景

  属性                     描述
  background              简写属性,作用是将背景属性设置在一个声明中。
  background-attachment     背景图像是否固定或者随着页面的其余部分滚动。
  background-color          设置元素的背景颜色。
  background-image        把图像设置为背景。
  background-position        设置背景图像的起始位置。
  background-repeat        设置背景图像是否及如何重复。

4、 CSS文本

  属性           描述
  color          设置文本颜色
  direction         设置文本方向。
  line-height         设置行高。
  letter-spacing      设置字符间距。
  text-align        对齐元素中的文本。
  text-decoration    向文本添加修饰。
  text-indent         缩进元素中文本的首行。
  text-transform      控制元素中的字母。
  unicode-bidi        设置文本方向。
  white-space        设置元素中空白的处理方式。
  word-spacing       设置字间距。

5、CSS字体

  属性        描述
  font        简写属性。作用是把所有针对字体的属性设置在一个声明中。
  font-family        设置字体系列。
  font-size      设置字体的尺寸。
  font-style       设置字体风格。
  font-variant      以小型大写字体或者正常字体显示文本。
  font-weight      设置字体的粗细。

6、CSS链接

  a:link - 普通的、未被访问的链接
  a:visited - 用户已访问的链接
  a:hover - 鼠标指针位于链接的上方
  a:active - 链接被点击的时刻

  当为链接的不同状态设置样式时,请按照以下次序规则:
  a:hover 必须位于 a:link 和 a:visited 之后
  a:active 必须位于 a:hover 之后

  text-decoration 属性大多用于去掉链接中的下划线

7、CSS列表属性(list)

  属性          描述
  list-style        简写属性。用于把所有用于列表的属性设置于一个声明中。
  list-style-image     将图象设置为列表项标志。
  list-style-position     设置列表中列表项标志的位置。
  list-style-type     设置列表项标志的类型。

8、CSS表格属性(Table)

  属性          描述
  border
  border-collapse       设置是否把表格边框合并为单一的边框。
  border-spacing        设置分隔单元格边框的距离。
  caption-side        设置表格标题的位置。
  empty-cells         设置是否显示表格中的空单元格。
  table-layout        设置显示单元、行和列的算法。

9、盒子模型

  margin:外边距
  外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  padding:内边距
  border:边框
  border-style、border-color、border-width
  内容

10、CSS定位(position)

  1、相对定位(relative)
    1、占用文档流
    2、是基于原来文档流中的位置
    3、以边框为基准
  2、绝对定位(absolute)
    1、脱离文档流
    2、是以浏览器窗口为基本位置
    3、以边框为基准
  3、fixed
    相对于窗口的定位
  4、浮动(float)
    1、脱离文档流
    2、会把内容挤掉
    clear:
    清除前面的元素浮动对后面元素的影响
  5、relative和absolute混用
    1、元素作为容器时,设置为relative,其内部元素如果是absolute,内部元素以容器为基准

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Easyui 官网网址

下一篇:不受控制的 position:fixed