CSS总结

最新推荐文章于 2024-10-17 09:19:08 发布

logslin

最新推荐文章于 2024-10-17 09:19:08 发布

阅读量405

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/logslin/article/details/114162008

版权

思维导图
CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
特点：
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式

如何在HTML中添加CSS

1：内嵌式引入（即将style标签嵌套在head标签中0
eg:

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{font-size:36px;}
	
	</style>
</head>

2：行内样式
eg:

<b style="font-size:56px;">你好 iframe。</b>

3：外链样式（即将css当成是一个文件，通过link标签引入到html中）
eg：

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

4：嵌入样式（即内嵌和外链一种综合性的使用，不太常用了解即可）
eg：

<style type="text/css">
  @import url("css/style.css");

</style>

以上四种方式优先级
行内样式>剩下的其它三种形式，样式的显示取决于距离

选择符

1：id选择器：当标签中出现id属性的那么可以使用id选择器
Id选择器通常应用于某些标签中独有的样式
eg：

 <head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 #main{
       background:#00ccaa;
       height: 800px;
       width: 1200px;
       margin: 100px auto;}
  </head>
  <body>     
<div id="main"></div>
</body>

2:.标签选择符：通过标签的名字来命名的对html中的所有该标签都起作用

 body{color:red;} p{color:red}

3:类选择器：当标签中出现class属性的时候那么可以使用类选择器
类选择器通常应用于某几个标签具有相同的样式
eg;

  <head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 .main{
       background:#00ccaa;
       height: 800px;
       width: 1200px;
       margin: 100px auto;}
  </head>
  <body>     
<div class="main"></div>
</body>

4:全选择器 :使用*号来表示对整个html中的所有标签都起作用

*{font-size:36px;color:black;}

5:包含选择符：嵌套中间用空格间隔包含选择符的标识是空格

#content p{
        	color:red;
        }

6:分组选择符 多个选择符同时具备同一种样式使用分组选择符标志 ,(逗号)

body,h1,div,p{
	     	margin:0;
	     	padding:0;
	     }

7：标签指定式选择符：中间不会存在任何符号

h1#content{
        	color:blue;
        }

伪类

伪类与选择器之间用冒号相连，选择器在前
未访问的链接 a:link{color:#ff0000}
已访问的链接 a:visited{color:#00ff00}
鼠标移动到链接上 a:hover{color:#ff00ff}
鼠标按下到链接上 a:active{color:#0000ff}

盒子模型

在这里插入图片描述
内边距 padding：用于填充内容内部
外边距 margin：用于描述浏览器边缘到内容的之间的距离
边框 border：1px solid black 像素值线型颜色

Margin（padding）：100px 200px 300px 400px 上、右、下、左
Margin-top margin-left margin-right margin-bottom
padding和边框也适用于4个方向

布局

浮动布局
浮动（float）是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。、
值:
none：不浮动
left：对象向左浮动，而后面的内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
前面的元素浮动效果后，会对后面的元素产生影响
浮动前：在这里插入图片描述
代码：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #ok{width: 9000px;
        height:90px;
        border:1px solid black;}
    .q{background-color: #c0c0c0;
       width: 300px;
       height: 30px;
    }    

     .a{background-color: #cffff0;
       width: 300px;
       height: 30px;
    }    

    .z{background-color: #c77770;
       width: 300px;
       height: 30px;
    }    

	</style>
</head>
<body>
<div id="ok">
	<div class="q"></div>
	<div class="a"></div>
	<div class="z"></div>
</div>

浮动：只对一个div
代码：

 #ok{width: 9000px;
        height:90px;
        border:1px solid black;}
    .q{background-color: #c0c0c0;
       width: 300px;
       height: 30px;
       float: left;
    }

浮动：对三个div
在这里插入图片描述
代码：

  border:1px solid black;}
.q{background-color: #c0c0c0;
   width: 300px;
   height: 30px;
   float: left;
}    

 .a{background-color: #cffff0;
   width: 300px;
   height: 30px;
   float: left;
}    

.z{background-color: #c77770;
   width: 300px;
   height: 30px;
   float: left;
}

清除浮动
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响
浮动的清理(clear)
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
当使用清楚浮动时（与上图浮动只有一个时对比）
在这里插入图片描述
代码：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #ok{width: 9000px;
        height:90px;
        border:1px solid black;}
    .q{background-color: #c0c0c0;
       width: 300px;
       height: 30px;
       float: left;
    }    

     .a{background-color: #cffff0;
       width: 300px;
       height: 30px;
       clear: left;
    }    

    .z{background-color: #c77770;
       width: 300px;
       height: 30px;
    }    

	</style>
</head>

内联元素和块状元素

块状元素 ：具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性： display:block;

内联元素：不具有宽度和高度的属性允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;

块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素
eg：在这里插入图片描述
代码：原本的q div失去了高度和宽度 a div和它同行表示

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #ok{width: 9000px;
        height:90px;
        border:1px solid black;}
    .q{background-color: #c0c0c0;
       width: 300px;
       height: 30px;
       display: inline;
    }    

     .a{background-color: #cffff0;
       width: 300px;
       height: 30px;
       margin-left: 300px;
    }    

    .z{background-color: #c77770;
       width: 300px;
       height: 30px;
    }    

	</style>
</head>
<body>
<div id="ok">
	<div class="q"></div>
	<div class="a"></div>
	<div class="z"></div>
</div>