CSS基础

2018-11-25  本文已影响0人  夜阑w

一、引入CSS的方式

内联式、嵌入式和外链式

1.内联式

<p style="color:red">paragraph</p>

2.嵌入式

<style type="text/css">
    p {
      background-color: #00539F;
      font-size: 2em;
      text-align: center;
    } 
</style>

3.外链式

<link rel="stylesheet" type="text/css" href="style.css">

二、CSS选择器

简单选择器

1.通配选择器

通配选择器可以匹配所有元素。下面的代码可以去掉默认的margin。

* {
  margin: 0;
}

2.标签选择器

使用标签进行选择，选中所有的该标签，一般用于语义标签和组合选择器。

p {
  font-size:12px;
}

3.id选择器

为标签设置id="ID名称"，选择时使用#id选择器名称 {css样式代码;}

4.类选择器

为标签设置class="class名称"，选择时使用.class选择器名称 ｛css样式代码；｝

注意：class选择器与id选择器的区别：一个元素可以有多个class名称，一个class名称也可以被多个元素使用，但id选择器不可以，它是唯一的。另外id选择器的优先级要大于class选择器。

属性选择器

伪类选择器

伪元素

E:first-line {}：匹配E元素的第一行
E:first-letter {}：匹配E元素的第一个字母
E:before {}：在E元素之前插入生成的内容
E:after {}：在E元素之后插入生成的内容

组合选择器

直接组合EF

p.warning { color: orange; }

后代组合E F

article p{
  color:red;
}

亲子组合E > F

其他选择器

.introduction p:nth-of-type(1) {
    color: blue;
}

更多：（http://www.ruanyifeng.com/blog/2009/03/css_selectors.html）

三、层叠与继承

特异度级别

样式的的覆盖规则

关于继承

四、文本样式

h1 {
    /* 斜体 粗细 大小/行高 字体族 */
    font: italic bold 20px 'Times New Roman';
}

其他样式：

五、盒模型

六、CSS布局

注：可以使用百分比宽度进行布局。

使用inline-block

position

浮动（float）

常用的三栏布局方式

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    .middle {
      width: 100%;
      float: left;
    }
    .main {
      margin: 0 200px;
      height: 400px;
      background: pink;
    }
    .left {
      width: 200px;
      height: 200px;
      float: left;
      background: blue;
      margin-left: -100%;        
    }
    .right {
      width: 200px;
      height: 200px;
      float: left;
      background: yellow;
      margin-left: -200px;                      
    }
    * {
      font-family: 'Courier New', Courier, monospace;
      font-size: 20px;   
    }
  </style>
</head>

<body>
  <div class="middle">
    <div class="main">ffffff</div>
  </div>
  <div class="left">side1</div>
  <div class="right">side2</div>
</body>

</html>

七、常用的居中方式

水平居中

垂直居中

上一篇下一篇

猜你喜欢

热点阅读