CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

PamBlog

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量181

点赞数

分类专栏： java 文章标签： CSS样式

本文链接：https://blog.youkuaiyun.com/shaoyedeboke/article/details/87935654

版权

java 专栏收录该内容

4 篇文章

订阅专栏

1、css简介

css 层叠样式表层叠：一层一层的样式表：很多属性和属性值

为了使页面变得更加的美观，将网页内容与显示样式进行分离，提高了显示功能

2、css和html的结合方式（四种结合方式）

（1）、在每个html标签上面都有一个属性style，把css和html结合在一起

<div style="background-color:red;color:green">范德萨就非得就是咯回家肯定撒很疯狂拉升</div>
//background-color：背景颜色    color：字体颜色

（2）、使用html的一个标签实现<style>标签，写在head里面

// <style type="text/css">
//       css代码;
// </style>

 <head>
      <style type="text/css">
		    div{
				background-color:blue;
				color:red;
		       }
      </style>
 </head>
  <body>
	<div>dsafhdhfhfds</div>
  </body>

（3）、在style标签里面使用语句（在某些浏览器下不起作用）

首先，创建一个css文件

/*
		div.css
*/

div{
		background-color:red;color:yellow;
   }

 <head>
		<style type="text/css">
				@import url(div.css);    //引入文件
		</style>
 </head>
 <body>
		<div>时间就睡觉啊啊接啊</div>
 </body>

（4）、使用头标签 link ，引入外部 css文件

首先，创建一个css文件

/*
		div.css
*/

div{
		background-color:red;color:black;
   }

<html >
 <head>
  <title>Document</title>

  	<link rel="stylesheet" type="text/css" href="div.css"/>   //link头标签使用

 </head>
 <body>
 		<div>dsadjjdjajdjk</div>
 </body>

优先级：（一般情况）

由上到下，由外到内，优先级由低到高。

后加载的优先级高

//优先级

<html >
 <head>
  <title>Document</title>

  <style type="text/css">
		div{
				background-color:blue;
				color:red;
		   }
  </style>

 </head>
 <body>

	<div style="background-color:red;color:green">范德萨就非得就是咯回家肯定撒很疯狂拉升</div>
	<div>dsafhdhfhfds</div>

 </body>

3、选择器

格式选择器名称 {属性名 : 属性值 ; 属性名 : 属性值 ; ........}

（1）、标签选择器：使用标签名作为选择器的名称

<html>
 <head>
  <title>Document</title>
	<style type="text/css">
            //标签名
		  div{
				background-color:red;
				color:black;
			}

	</style>
 </head>
 <body>

 	<div>dshadghajgfhfs</div>
  
 </body>

（2）、class选择器：每个html标签都有一个属性 class

<html>
 <head>
  <title>Document</title>
	<style type="text/css">

		  div.shao{   //class名
				background-color:red;
				color:black;
			
}
	</style>
 </head>
 <body>

 	<div  class="shao">dshadghajgfhfs</div>    //class名
  
 </body>

（3）、id选择器：每个html标签上都有一个属性：id

<html >
 <head>
  <title>Document</title>
	<style type="text/css">

		  div#shao{       //引用id属性
				background-color:red;
				color:black;
			}
	</style>
 </head>
 <body>

 	<div  id="shao">dshadghajgfhfs</div>    //设置id属性  
 </body>

（2）和（3）：可以全部body实现（2）加“ .”、）（3）加 “ # ”

<html>
 <head>
 <title>Document</title>
	<style type="text/css">

		  #shao{     //去掉div
				background-color:red;
				color:black;
			}
	</style>
 </head>
 <body>

 	<div  id="shao">dshadghajgfhfs</div>
	<div  id="shao">dshadghajgfhfs</div>
 	<div  id="shao">dshadghajgfhfs</div>
  
 </body>

选择器的优先级：

style > id选择器 > class选择器 > 标签选择器

4、css的扩展选择器

（1）、关联选择器

<html >
 <head>
  <title>Document</title>
	<style type="text/css">

		div p{   //设置div标签里面的p标签的样式，嵌套标签里面的样式，中间要有空格
			background-color:red;
			color:green;
		}

	</style>
 </head>
 <body>
 	<div><p>dasdbsabdjfbjkabf</p></div>
	<p>dasdbsabdjfbjkabf</p>
 </body>

（2）、组合选择器

<html>
 <head>
  <title>Document</title>
	<style type="text/css">
		div,p{    //把div和p标签设置成相同的样式，把不同的标签设置成相同的样式  中间加逗号
			background-color:red;
			color:green;
		}
	</style>
 </head>
 <body>
 	<div>dasdbsabdjfbjkabf</div>
	<p>dasdbsabdjfbjkabf</p>
 </body>

（3)、伪元素选择器

css里面提供了一些定义好的样式，可以拿来直接使用

（比如：超链接的状态

原始状态：link 鼠标放上去的状态：hover 点击：active 点击之后：visited

）

<html>
 <head>
  <title>Document</title>
	<style type="text/css">
		a:link{    //原始状态
			background-color:red;
		}
		a:hover{   //鼠标放上去的状态
			background-color:green;
		}
		a:active{    //点击
			background-color:yellow;
		}
		a:visited{     //点击之后
			background-color:blue;
		}
	</style>
 </head>
 <body>
	
	<a href="#">超链接</a>

 </body>

5、css的盒子模型

在进行布局前需要把数据封装在一块一块的区域内（div）

（1）、边框

border： 2px solid blue； //统一设置

上： border-top //逐一设置

下：border-bottom

左：border-left

右：border-right

 <head>
  <title>Document</title>
	<style type="text/css">
		div{      /*统一设置*/
			width: 200px;
			height: 100px;
			border: 2px solid blue;
		}
		#div12{      //逐一设置
				border-right: 2px dashed yellow;
			}
	</style>
 </head>
 <body>
	<div id="div11">aaaaaaaaaaaaaaaa</div>
	<div id="div12">bbbbbbbbbbbbbbbb</div>
	<div id="div13">cccccccccccccccc</div>
 </body>

（2）、内边距

padding：统一设置上：padding-top
下：padding-bottom
左：padding-left
右：padding-right

 <head>
             <title>Document</title>
                 <style type="text/css">
                   div{      /*统一设置*/
                   width: 200px;
                   height: 100px;

                   border: 2px solid blue;
                   }
        #div12{
                padding：20px;  /*统一设置*/
        }

        #div13{                /*单独设置*/
                padding-left：30px;
        }
    </style>
    </head>
   <body>
    <div id="div11">aaaaaaaaaaaaaaaa</div>
    <div id="div12">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
    <div id="div13">cccccccccccccccc</div>

（3）、外边距： margin 统一设置
上：margin-top
下：margin-bottom
左：margin-left
右：margin-right

 <head>
  <title>Document</title>
    <style type="text/css">
        div{      /*统一设置*/

            border: 2px solid blue;
       #div12{
                margin: 30px;
            }
       #div13{
                   margin-left: 30px;
            }
    </style>
 </head>
 <body>
    <div id="div11">aaaaaaaaaaaaaaaa</div>
    <div id="div12">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
    <div id="div13">cccccccccccccccc</div>
 </body>

6、css布局的漂浮
float：属性值：
left：文本流向对象的右边
right：文本流向对象的左边

<head>
  <title>Document</title>
  <style type2019/3/11="text/css">
        div {
            width: 200px;
            height: 150px;

            border: 2px solid blue;
        }
        #div12 {
                float : left;
            }
  </style>
 </head>
 <body>
      <div id="div11">aaaaaaaaaaaaaaaa</div>
    <div id="div12">bbbbbbbbbbbbbbbb</div>
    <div id="div13">cccccccccccccccc</div>
 </body>

7、css的布局的定位

position：属性值：

-absolute：将对象从文档中拖出可以是top、bottom等属性进行定位

-relaative：不会把对象从文档中拖出可以是top、bottom等属性进行定位

<head>
  <style type="text/css">
		div {
			width: 200px;
			height: 150px;
			border: 2px solid blue;
			}
		
		#div001 {
			background-color: red;
			position: relative;   //position：absolute
			top: 80px;
			left: 100px;
			}

		#div002 {
			background-color: green;
			}

		#div003 {
			background-color: orange;
			width: 200px;
			height: 300px;
			position: absolute;  //position：relative
			top: 100px;
			left: 200px;

			}

  </style>
 </head>
 <body>

 <div id="div001">AAAAAAAAAAAAAAAA</div>

 <div id="div002">BBBBBBBBBBBBBBBB</div>

 <div id="div003">CCCCCCCCCCCCCCCC</div>
  
 </body>