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--基础语法解析

<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--基础语法解析

CSS--基础

一、概念

二、使用方式

1、内嵌式的CSS样式表

2、内部CSS样式表

3、外部CSS样式表

a)、定义.css的样式文件

b)、引入外部.css文件

三、选择器

1、标签选择器 h1 p

2、id选择器

3、类选择器

4、组合选择器

5、派生选择器(后代)

四、CSS样式属性

1、基本属性

a)、color

b)、font-size

c)、font-family

d)、text-align

e)、width

f)、height

g)、cursor

h)、display

2、背景相关

a)、 background-color

b)、background-image:url(“”)

3、列表相关

list-style-type

4、 布局相关的内容

a)、2个与布局相关的标签

b)、Box盒子模型

五、HTML中布局

a)、 table布局 （过时）

b)、Div+CSS方式 （主流）

实例：

Python语法入门(零基础)

HTML基础解析

C#基础知识 全面解析可空类型

Java基础语法之运算符

kotlin 官方学习教程之基础语法详解

Python基础语法之while循环

php语法基础知识（php详细安装步骤）

c++基础语法:虚继承

java 学习笔记(入门篇)_java的基础语法

Java 基础语法以及MyEclipse 10 新建Java项目教程

4、布局相关的内容

a)、 table布局（过时）

b)、Div+CSS方式（主流）

C#基础知识全面解析可空类型