欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS--基础语法解析

程序员文章站 2022-06-19 16:31:01
CSS--基础一、概念二、使用方式1、内嵌式的CSS样式表2、内部CSS样式表3、外部CSS样式表a)、定义.css的样式文件三、选择器1、标签选择器 h1 p2、id选择器3、类选择器4、组合选择器5、派生选择器(后代)四、CSS样式属性1、基本属性a)、colorb)、font-sizec)、font-familyd)、text-aligne)、widthf)、heightg)、cursorh)、display2、背景相关a)、 background-colorb)、background-image...

一、概念

CSS(级联样式表 Cascade Style Sheet)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    HTML标签,不能完成更好的显示效果,需要CSS样式表,进行处理

二、使用方式

1、内嵌式的CSS样式表
<element style=”样式属性1:1;样式属性2:2..../>
    存在样式冗余,开发的时候 不建议使用(RGB拾色器扩展)

CSS--基础语法解析

2、内部CSS样式表
--复用性差
<html>
  <head>
     <style type="text/css">
	    h1{
		   coror:#FFF;
		   backgraound-color:#000;
		  }
	 </style>
  </head>
  <body>
     <h1>test</h1>
  </body>
</html>
  
3、外部CSS样式表
a)、定义.css的样式文件

CSS--基础语法解析

b)、引入外部.css文件
<html>
  <head>
     <link rel="stylesheet" type="text/css" href="suns.css"/>
  </head>
  <body>
     <h1>test</h1>
  </body>
</html>

三、选择器

1、标签选择器 h1 p
<html>
  <head>
     <style type="text/css">
	    h1{
		   coror:#FFF;
		   backgraound-color:#000;
		  }
	 </style>
  </head>
  <body>
     <h1>test</h1>
  </body>
</html>
2、id选择器
<html>
  <head>
     <style type="text/css">
	   #s{
		   coror:#FFF;
		   backgraound-color:#000;
		  }
	 </style>
  </head>
  <body>
     <h1 id="s">test</h1>
  </body>
</html>
3、类选择器
<html>
  <head>
     <style type="text/css">
	   .c1{
		   coror:#FFF;
		   backgraound-color:#000;
		  }
	 </style>
  </head>
  <body>
     <h1 class="c1">test</h1>
  </body>
</html>
4、组合选择器
<html>
  <head>
     <style type="text/css">
	   h1,p{
		   coror:#FFF;
		   backgraound-color:#000;
		  }
	 </style>
  </head>
  <body>
     <h1>test1</h1>
     <p >test2</h1>
  </body>
</html>
5、派生选择器(后代)
<html>
  <head>
     <style type="text/css">
	   ol li{
		   coror:#FFF;
		   backgraound-color:#000;
		  }
	 </style>
  </head>
  <body>
      
    <ol>
       <li> a</li>
       <li>b</li>
       <li>c</li>
    </ol>
      
  </body>
</html>

四、CSS样式属性

1、基本属性
a)、color
字体前景颜色 
color=(“red”,”black”,”#RGB” )...
b)、font-size
文字大小 font-size='10px'
c)、font-family
字体:tahoma

d)、text-decoration

字体线:underline overline line-through(下、上横穿横线)
d)、text-align
对其方式:left right center
e)、width
标签宽 width="10px"
f)、height
标签高 height="10px"
g)、cursor
鼠标的设置
    cursor="pointer"(手)
    cursor="wait"   (等待)
h)、display
元素隐藏:
    display="none":   隐藏 不占用页面流
显示:
    display="block":  块级元素的 h1 li table p 
    display="inline": 行内元素的显示 <input></input>
2、背景相关
a)、 background-color
b)、background-image:url(“”)
--背景颜色、背景图片
<html>
  <head>
     <style type="text/css">
	    h1{
		   font-size:100px;
		   font-family:tahoma;
		   text-decoration:line-through;
		   background-color:#000;
		   color:#FFF;
		   width:300px;
		   height:300px;
		   cursor:wait;
		   display:block;
		  }
		 #btn{
		    background-image:url('btn.png');
			width:28px;
			height:27px;
            border:0 solid black;(边框)
		 }
	 </style>
  </head>
  <body>
     <h1>suns</h1>
	 xiaohei
	 <input id="btn" type="button" />
  </body>
</html>
  
3、列表相关
list-style-type
--控制列表的样式
    list-style-type:disc(光盘),none(无1、2、3 等)
<html>
  <head>
      <style type="text/css">
	      ol{
		    list-style-type:disc;
		  }
	  </style>
  </head>
  <body>
     <ol>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          <li>item4</li>
	 </ol> 
  </body>
</html>
4、 布局相关的内容
a)、2个与布局相关的标签
<div> 块 (块级元素)
    整张网页划分成若*分,每一个部分都是一块内容
    
<span> 部分 (行内元素)
    需要为文本加入样式,js操作
    
<html>
      <head>
          <style type="text/css">
             div{
               background-color:black;
               color:white;
               width:100px;
               height:100px
             }
             span{
               color:red;
             }
          </style>
      </head>
      <body>
          <div>test</div><div>test2</div>
          <span>test3</span>
      </body>
</html>
b)、Box盒子模型
1.边框相关的样式 border(默认不显示)
	 
2.内补白(内边距)padding
  外补白(外边距)margin

CSS--基础语法解析

CSS--基础语法解析

CSS--基础语法解析

<html>
  <head>
      <style type="text/css">
	     div{
		   width:100px;
		   height:100px;
		   border:solid 1px black;(可单独分开描述)
		   padding:20px 50px;
		   margin:40px auto;
		 }
		 
	  </style>
  </head>
  <body>
      <div>
	     test1
	  </div>
	  <div>
	   test2
	  </div>
  </body>
</html>

五、HTML中布局

a)、 table布局 (过时)
b)、Div+CSS方式 (主流)
特点:布局的内容 摆脱现有的页面流 浮在页面上,打破页面流(块级元素不在同一平面)
	 后面的div 覆盖前面的div。
i.绝对布局 (absolute)
    position:absolute
    top: 距浏览器上面边距
    left:距浏览器坐标的边距
    z-index:浮层 (两个div 3 5 谁大谁浮在最上面)
   
ii.流式布局 (float)主流
        float:left 摆脱当前页面流 从左往右浮上来
        clear:both 认可前面浮动布局占用页面的位置。(不能算外边距)
--绝对布局
<html>
  <head>
      <style type="text/css">
	       #s{
		      border:solid 1px black;
			  width:100px;
			  height:100px;
    
			  position:absolute;
			  top:50px;
			  left:200px;
			  background-color:green;
			  z-index:4;
		   }
		   #x{
		      border:solid 1px black;
			  width:300px;
			  height:300px;
			  position:absolute;
			  top:40px;
			  left:150px;
			  background-color:yellow;
			  z-index:3;
		   }
		 
	  </style>
  </head>
  <body>
      <div id="s">
	     test1
	  </div>
	  <div id="x">
	    test2
	  </div> 
  </body>
</html>

CSS--基础语法解析

--流式布局
<html>
  <head>
      <style type="text/css">
	       #s{
		      border:solid 1px black;
			  width:100px;
			  height:100px;
			  float:left; 
		   }
		   #x{
		      border:solid 1px black;
			  width:100px;
			  height:100px;
			  float:left;
			  margin-left:10px;
			}
		   #ss{
		      border:solid 1px black;
			  width:100px;
			  height:100px;
			  background-color:green;
			  clear:both;--(清除页面流带来的影响)
		   }
		 
	  </style>
  </head>
  <body>
      <div id="s">
	     test1
	  </div>
	  <div id="x">
	   	 test2
	  </div>
	  <div id="ss">
	     	test3
	  </div>
  </body>
</html>
实例:

CSS--基础语法解析

<html>
  <head>
      <style type="text/css">
	     #container{
		    margin:0 auto;
			width:600px;
		}
		#header{
		   height:50px;
		   background-color:rgb(28, 142, 218);
		   padding-top:20px;
           padding-left:20px;		   
		}
		#content{
		   height:400px; 
		   margin-top:10px;
		   margin-bottom:10px;
		}
		#footer{
		   height:30px;
		   background-color:rgb(68, 196, 19);   
		}
		#logo{
		   background-color:rgb(196, 19, 154);
		   width:50px;
		}
		#left{
		   width:165px;
		   float:left;
		   background-color:rgb(204, 176, 27);
		   margin-right:10px;
		   height:400px; 
		}
		#right{
		   width:425px;
		   float:left;
		   background-color:rgb(233, 84, 84);
		   height:400px; 
		}
	  </style>
  </head>
  <body>
      <div id="container" >
	    <div id="header">
		   <div id="logo"> 
		      header
		   </div>
		</div>
		
		<div id="content">
		   <div id="left">
		      left
		   </div>
		   <div id="right">
		       right
		   </div>
		</div>
		
		<div style="clear:both">
		</div>
		
		<div id="footer">
		   footer
	    </div>
		
	  </div>
  </body>
</html>
	}
	#right{
	   width:425px;
	   float:left;
	   background-color:rgb(233, 84, 84);
	   height:400px; 
	}
  </style>
	<div id="content">
	   <div id="left">
	      left
	   </div>
	   <div id="right">
	       right
	   </div>
	</div>
	
	<div style="clear:both">
	</div>
	
	<div id="footer">
	   footer
    </div>
	
  </div>
```

本文地址:https://blog.csdn.net/weixin_44809337/article/details/107501114

相关标签: 前端 css