CSS基础知识

时间 2019-11-13

标签 css 基础知识栏目 CSS 繁體版

原文原文链接

1.CSS的编写格式

键值对形式的，冒号左边是属性名，右边属性名称css

2.CSS的3种书写形式

//1.行内样式
    <div> <!-- span也是容器，可是小容器-->
        <span>123</span>
        <span style="color: red; background-color: blue">红蓝色</span>
    </div>

//2.内页样式
   <style type="text/css">
        span{
            color: green;
        }
   </style>
   
//3.外部样式
先新建一个空的file，后缀为css
//test.css：
span{
    color: green;
}

    <!--- rel表示关系，stylesheet样式表 href表示文件名-->
    <link rel="stylesheet" href="test.css">

3.标签选择器

1>.标签选择器html

2>.类标签选择器chrome

3>.id标签选择器浏览器

4>.群组选择器字体

5>.选择器组合spa

6>.后代选择器firefox

7>.子标签选择器code

8>.相邻兄弟选择器orm

9>.属性选择器htm

10>.伪类

        1.标签选择器
        p{
            color: red;
        }

        2.class标签选择器  前面加点. 能够批量
        .first{
            color:red;
        }
   
        3.id标签选择器 前面加#.只能用1个id标签
        #second{
            color: blue;
        }

        4.群组选择器
        .first,#second,h1{
            color: green;
        }

        5.选择器组合 div格式下的first类标签
        div.first{

        }
        div#second{

        }

        6.后代选择器 空格 div的全部子级
        div span{

        }

        7.子标签选择器 下一个子级
        .first>span{
             border:1px
             solid red;   注意的是border后没有；
         }
         请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，
         或者你能够理解为做用于子元素的第一代后代。然后代选择器是做用于全部子后代元素。
         后代选择器经过空格来进行选择，而子选择器是经过“>”进行选择。
         总结：>做用于元素的第一代后代，空格做用于元素的全部后代。 

        8.相邻兄弟选择器 div相邻的标签
        div + h1{

        }

        9.属性选择器 name是属性
        div[name]{
        }
        div[name][age]{

        }
        div[name="jack"]{
        } 

        10.通用选择器  
        * {color:red;}
        
        11.伪类选择器
        它容许给html不存在的标签（标签的某种状态）设置样式，
        好比说咱们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
        a:hover{color:red;}

4.类和ID选择器的区别

id标签只能够一个，class标签能够多个
可使用类选择器词列表方法为一个元素同时设置多个样式

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，咱们班上了一节公开课...</p>

#id不能够

4.标签优先级

        /*通配符  优先级是0*/
        *{

        }

        /* 标签选择器  优先级是1*/
        div{
        }

        /* 类标签选择器 优先级是10*/
        .first{
        }

        /*选择器组合 优先级是11*/
        div.first{
        }

        /* id标签选择器 优先级是100*/
        #second{
        }

        /* 群组选择器 优先级是100+1+1*/
        .first,#second,h1{
        }
        
        /* important 优先级最大*/
        * {
            color: yellow !important;
        }

5.属性

6.文字排版

1.字体
body{font-family:"Microsoft Yahei";}

2.字号、颜色
body{font-size:12px;color:#666}
body{font-size:20px;color:red;}

3.文字的样式:粗体、斜体、下划线、删除线
p span{font-weight:bold;}粗体：body 斜体：italic
span{text-decoration:underline;}下划线:underline 删除线：line-through

4.缩进
经常使用语段落前2个空
p{text-indent:2em;}

5.行间距
p{line-height:1.5em;} 1.5倍

6.字间距
letter-spacing:50px; 字母与字母之间的间距
word-spacing:50px;   单词与单词之间的间距

7.对齐
text-align:center;text-align:left;text-align:right;

7.元素分类

1.分类
在CSS中，html中的标签元素大致被分为三种不一样的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

经常使用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

经常使用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

经常使用的内联块状元素有：

<img>、<input>

2.元素转换
内联元素转换为块状元素，从而使a元素具备块状元素特色。
a{display:block;}
将块状元素div转换为内联元素，从而使 div 元素具备内联元素特色。
div{ display:inline;}


3.块状元素
一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
二、元素的高度、宽度、行高以及顶和底边距均可设置。
三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。

4.内联元素
一、和其余元素都在一行上；
二、元素的高度、宽度及顶部和底部边距不可设置；
三、元素的宽度就是它包含的文字或图片的宽度，不可改变。

5内联块状元素（inline-block）
就是同时具有内联元素、块状元素的特色，

8.盒模型

1.边框 
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
缩写：
div{border:2px  solid  red;}

单独边框
div{border-bottom:1px solid red;}

1）、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2）、border-color（边框颜色）中的颜色可设置为十六进制颜色

2.盒模型长宽度指的是填充长宽度


3.元素与其它元素之间的距离可使用边界（margin）来设置

9.脱离标准流的方法有

float属性(浮动模型)

        div{
            background-color: red;
            width: 100px;
            text-align: center;
        }
        .first {
            float: right;
        }
        .second{
            float: right;
        }
    </style>
</head>
<body>

<div class="first">123</div>
<div class="second">456</div>

2.position属性（层模型）

绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)

    <style type="text/css">
     1.相对定位
     而后相对于之前的位置移动，移动的方向和幅度由left、right、top、bottom属性肯定，偏移前的位置保留不动。
     ps:相对于之前的位置
        div{
            background-color: red;
            width: 150px;
            height: 150px;
            margin-top: 100px;
            margin-left: 100px;
            position: relative; /*相对的*/

        }
    
     2.绝对定位
        使用left、right、top、bottom属性相对于其最接近的一个具备定位属性的父包含块进行绝对定位。
        若是没有父包含块，默认为body
        span{
            background-color: blue;
            position: absolute;/*绝对的*/
            left: 50px;
            top: 50px;
        }
        
     3.固定定位
     与absolute定位类型相似，但它的相对移动的坐标是视图（屏幕内的网页窗口）自己。
     因为视图自己是固定的，它不会随浏览器窗口的滚动条滚动而变化
       #div1{
          width:200px;
          height:200px;
          border:2px red solid;
          position:fixed;
          left:100px;
          top:50px;
      }
</head>
<body>
</style>
<div>
    <span>123</span>
</div>

    4.相对于其它元素进行定位
     使用position:absolute能够实现被设置元素相对于浏览器（body）设置定位之后，
     你们有没有想过可不能够相对于其它元素进行定位呢？能够的只要父相子绝

    #box3{
       width:200px;
       height:200px;
       position:relative;       
   }
   #box4{
      width:99%;
      position:absolute;	
      bottom:0px;
   }

    <h1>下面是任务部分</h1>
    <div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">当我仍是三年级的学生时是一个害羞的小女生。</div>
    </div>

10.代码缩写

1.盒模型代码简写
1）顺时针，上 右 下 左
margin:10px 10px 10px 10px;
2）都相同时候能够缩写：
margin:10px
3）若是top和bottom值相同、left和 right的值相同：
margin:10px 20px;
4）若是left和right的值相同
margin:10px 20px 30px 20px;
可缩写为：margin:10px 20px 30px;

2.颜色值缩写
关于颜色的css样式也是能够缩写的，当你设置的颜色是16进制的色彩值时，若是每两位的值相同，能够缩写一半。
p{color: #336699;} 缩写：p{color: #369;}

3.字体缩写
字体css样式代码也有他本身的缩写方式，下面是给网页设置字体的代码：
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
缩写：
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
一、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其余的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
二、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

11.颜色值

一、英文命令颜色
p{color:red;}
二、RGB颜色
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
三、十六进制颜色
p{color:#00ffff;}

12.长度值

一、像素

二、em
就是本元素给定字体的 font-size 值，若是元素的 font-size 为 14px ，那么 1em = 14px；
p{font-size:12px;text-indent:2em;}
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
p{font-size:14px}
span{font-size:0.8em;}

三、百分比
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px
p{font-size:12px;line-height:130%}

13.各类居中

1.水平居中设置-行内元素
若是被设置元素为文本、图片等行内元素时，水平居中是经过给父元素设置 text-align:center 来实现的

2.块状居中设置
1）定宽块状元素：块状元素的宽度width为固定值
div{
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
2）不定宽度的块状元素：
 a.加入 table 标签
 b.设置 display: inline 方法：与第一种相似，显示类型设为 行内元素，进行不定宽元素的属性设置
 c.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

3.垂直居中
1）父元素高度肯定的单行文本
设置父元素的 height 和 line-height 高度一致来实现的。
2)父元素高度肯定的多行文本
 a.使用插入table(包括tbody、tr、td)标签，同时设置 vertical-align：middle。
   还能够设置display：table-cell强制改变父元素的渲染方式，并显示的设置vertical-align:middle令子元素垂直居中
ps: td 标签默认状况下就默认设置了 vertical-align 为 middle，因此咱们不须要显式地设置了。
   <table><tbody><tr><td class="wrap">
     <div>
      <p>看我是否能够居中。</p>
      <p>看我是否能够居中。</p>
      <p>看我是否能够居中。</p>
      <p>看我是否能够居中。</p>
      <p>看我是否能够居中。</p>
    </div>
  </td></tr></tbody></table>
 b.在 chrome、firefox 及 IE8 以上的浏览器下能够设置块级元素的 display 为 table-cell（设置为表格单元显示）
，激活 vertical-align 属性，
  <style>
     .container{
        height:300px;
        background:#ccc;
        display:table-cell;
        vertical-align:middle;
       }
     </style>
 c.元素（不论以前是什么类型元素，display:none 除外）设置如下 2 个句之一：
 1. position : absolute 
 2. float : left 或 float:right 
    .container a{
       position:absolute;
	   width:50%;
       margin:200px 50%;
   }