css基础知识

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

2024-10-12 02:01:02 219人阅读

css简介

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

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

css样式的3种用法

在标签中使用style属性,如下：
```
<h1 style="color:red;">Hello,World</h1>
```
在头部的style标签中定义：
```
<style> p { color: blue; } </style>
```

在头部通过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>

继承和层叠

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

选择器冲突

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。

当这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。

若权重相同，则采用覆盖原理，写在后面的样式会覆盖前面的样式。如：

 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。

若选择器没有直接选中，则谁描述的详细谁获胜，如：

 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。

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

技术分享

块级元素和行内元素

行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
块级元素会独占一行。而行内元素却不能够独占一行，只能和其他的行内元素共用一行。
如果块级元素不设置宽度，那么块级元素会自动的占满父元素的全部宽度。
常用的块级元素有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。
行内元素和块级元素之间的转换
- 行转块-->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基础知识

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

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