首页 > 代码库 > css基础知识

css基础知识

css简介

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

要深刻理解层叠样式表,样式表说明css是负责美化网页的;而层叠表示网页可以定义多层样式,样式可以被覆盖而不会被干掉。

css样式的3种用法

  1. 在标签中使用style属性,如下:

    <h1 style="color:red;">Hello,World</h1>
  2. 在头部的style标签中定义:

    <style> p { color: blue; } </style>
  3. 在头部通过link标签引用外部css文件,如:

    <link rel="stylesheet" href=http://www.mamicode.com/"01.css">

css的3种基础选择器

1.html选择器

用法:在style属性中直接利用标签进行设置,如下:

p { color: red; }

需要注意的点:

通过html标签名来选择元素

① 所有的html标签都可以当做选择器

② 无论标签藏多深都会被选中

③ 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。

2 . class选择器 用法:对标签的class名进行设定。

.class{ color:blue; }

需要注意的点:

① 任何的标签都可以使用class属性(class属性也是一个全局属性)

② class属性名可以重复使用

③ 一个class属性中,可以有多个class属性值。

3. id选择器

用法:利用标签的id属性进行设定:

#id{ color:blue; }

需要注意的点:

① 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。 大小写敏感 ,id的名字中可以有数字字母下划线,但是要以字母开头。 驼峰命名法分为小驼峰命名和大驼峰命名 。 testHeader是小驼峰,TestHeader是大驼峰,或test-header也行

② id名不能够重复

综合选择器

后代选择器

如:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         /*后代选择器,选中所有的后代的span标签*/
 8         .d1 span {
 9             color: blue;
10         }
11     </style>
12 </head>
13 <body>
14     <div class="d1">
15         <span>我是儿子span</span>
16         <div class="son">
17             <span>我是孙子span</span>
18             <div class="d2">
19                 <spa

选中div标签中有特定名字的div标签

 

并集选择器

例:

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Document</title>
 5     <style>
 6         .d1,p,em {
 7             color: red;
 8         }
 9     </style>
10 </head>
11 <body>
12     <div class="d1">我是div标签</div>
13     <em>我是em标签</em>
14     <p>我是p标签</p>
15 </body>
16 </html>

选定需要设置相同样式的所有标签

 

子元素选择器

例:

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Document</title>
 5     <style>
 6         #fa>em {
 7             color: red;
 8         }
 9     </style>
10 </head>
11 <body>
12     <div id="fa">
13         <em>我是二级em</em>
14         <div class="son">
15             <em>我是三级em</em>
16             <div>
17                 <em>我是四级em</em>
18             </div>
19         </div>
20     </div>
21 </body>
22 </html>

 

序列选择器

例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     meta charset="UTF-8">
 5     title>Document</title>
 6     <style>
 7         ul li:first-child {
 8             color: red;
 9         }
10         ul li:last-child {
11             color: blue;
12         }
13     </style>
14 </head>
15 <body>
16     <ul>
17         <li>li1</li>
18         <li>li2</li>
19         <li>li3</li>
20         <li>li4</li>
21         <li>li5</li>
22     </ul

 

相邻兄弟选择器和普通兄弟选择器

例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     /*相邻兄弟选择器*/
 8         div + p {
 9             color: red;
10         }
11     /*普通兄弟选择器*/
12         div ~ p {
13             color: red;
14         }
15     </style>
16 </head>
17 <body>
18     <div>我是div</div>
19     <p>我是p标签</p>
20     <p>我是第二个p标签</p>
21 </body>
22 </html>

 

继承和层叠

  1. .继承:父元素的某些css属性会被子元素无条件的继承过去。 关于文字的css属性都可以进行继承,如color,text-,line-,font-等
  2. 层叠:层叠解决的是css冲突的问题。 比较权重来解决层叠问题。 !important 能够把"单独属性"的权重变为无限大。 尽量少用。

选择器冲突

  1. html选择器,class选择器,id选择器的权重是id>class>html。因此单个的这3中选择器发生冲突时以id属性定义的样式为准。如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7     /*谁更精确就听谁的*/
     8         div {
     9             color: blue;
    10         }
    11         #test {
    12             color: green;
    13         }
    14         .d1 {
    15             color: red;
    16         }
    17     </style>
    18 </head>
    19 <body>
    20     <div class="d1" id="test">我是div标签</div>
    21 </body>
    22 </html>

    此时显现的颜色为green。

  2. 当这3种选择器的数量不一样,则将id,class,html这3种选择器的数量依次进行比较,权重大者获胜。如:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7     /*id  class html选择器的权重比较*/
     8         #box1 .hezi2 p {  /* 1   1   1*/
     9             color: red;
    10         }
    11         div div #box3 p {  /*1  0  3*/ 
    12             color: green;
    13         }
    14         div.hezi1 div.hezi2 div.hezi3 p { /*0 3 4 */ 
    15             color: blue;
    16         }
    17     </

    经过权重比较后,文字颜色为red。

  3. 若权重相同,则采用覆盖原理,写在后面的样式会覆盖前面的样式。 如:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7         /*两种样式的权重一样,后面的会覆盖前面的*/
     8         #box1 .hezi2 p {
     9             color: red;
    10         }
    11         #box2 .hezi3 p {
    12             color: blue;
    13         }
    14     </style>
    15 </head>
    16 <body>
    17     <div class="hezi1" id="box1">
    18         <div class="hezi2" id="box2">
    19             <div class="

    此时文字颜色为blue。

  4. 若选择器没有直接选中,则谁描述的详细谁获胜,如:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7         #hezi3 {
     8             color: blue;
     9         }
    10         #hezi1 #hezi2 {
    11             color: red;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16     <div class="box" id="hezi1">
    17         <div class="box" id="hezi2">
    18             <div class="box" id="hezi3">
    19                 <p>猜猜我是什么颜

    此时虽然#hezi1 #hezi2的权重大于#hezi3,但#hezi3描述的更详细。因此文本颜色为blue。

综上:选择器的选择问题可以用下图表示:

技术分享

块级元素和行内元素

  1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
  2. 块级元素会独占一行。而行内元素却不能够独占一行,只能和其他的行内元素共用一行。
  3. 如果块级元素不设置宽度,那么块级元素会自动的占满父元素的全部宽度。
  4. 常用的块级元素有div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl。常用的行内元素有span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code。
  5. 行内元素和块级元素之间的转换
    • 行转块-->block
    • 块转行-->inline
    • 行内块元素-->inlin-block

如下代码:

 1 <!DOCTYPE html>
 2         <html lang="en">
 3         <head>
 4             <meta charset="UTF-8">
 5             <title>Document</title>
 6             <style>
 7                 .d0 {
 8                     width: 300px;
 9                     height: 300px;
10                     background-color: red; /*背景颜色*/
11                     display: inline; /*把块级元素变成了行内元素*/ 
12                 }
13                 .s1 {
14                     width: 300px;
15                     height: 300px;
16                     background-color: blue;
17                     display: block;/*将行内元素变成块级元素*/
18                 }
19 
20                 em {
21                     width: 300px;
22                     height: 300px;
23                     background-color: green;
24                     display: inline-block; /*行内块元素*/
25                 }
26 
27                 .d1 {
28                     width: 300px;
29                     height: 300px;
30                     background-color: red;
31                     display: inline-block;
32                     /*float: left;浮动*/
33                 }
34                 .d2 {
35                     width: 300px;
36                     height: 300px;
37                     background-color: blue;
38                     display: inline-block;
39                     /*float: left;*/
40                 }
41                 body {
42                     background-color: #000;
43                 }
44             </style>
45         </head>
46         <body>
47             <div class="d0">Hello,Div</div>
48             <span class="s1">hello,Span</span>
49             <em>hello,Em</em>  
50              <a href=http://www.mamicode.com/"##">百度</a>
51             <hr>
52             <div class="d1"></div> 
53             <div class="d2"></div>
54 
55         </body>
56         </html>

 

css基础知识