CSS笔记

最新推荐文章于 2022-03-11 10:55:40 发布

FreeSoar1

最新推荐文章于 2022-03-11 10:55:40 发布

阅读量186

点赞数

分类专栏： html+css 文章标签： CSS

本文链接：https://blog.csdn.net/u011846249/article/details/84958572

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、样式结构
样式名：样式值；
例如：

background-color:red; 设定选中元素背景颜色为红色
color: red;  设定选中元素内部文字颜色为红色
font-family: '宋体'；  设置文字字体为宋体

CSS常用样式分类：
1、设定看到元素显示外观的样式。
（文字颜色、背景、盒子模型）
2、对元素进行布局的样式。（摆放元素位置的样式）

行内元素：
  <a href="##">超链接</a>
   <img src="">
   <input type="" name="">
   <span></span>

块级元素：
  <div id="right">  	
   </div>
   <p> </p>
   <ul>
   	<li></li>
   </ul>

float:浮动：定义元素在哪个方向浮动，改变页面中对象的前后流动顺序
left:   元素向左浮动
right: 元素向右浮动
none: 默认值，元素不浮动
inherit：规定应该从父元素继承float属性的值

#left{
        	height: 100px;
        	width: 100px;
        	background-color: blue;
        	float: left;
        }

        #right{
        	height: 100px;
        	width: 100px;
        	background-color: red;
        	float: left;
        }

        .clearfloat{
        	/*clear: left;*/

        	clear: both;
        }
        
        #footer{
        	height: 50px;
        	background-color: black;
        }
	
	</style>
</head>
<body>
   <div id="left">
   	  
   </div>

   <div id="right">
   	
   </div>

   <div class="clearfloat">
   	
   </div>
     
   <div id="footer">
   	
   </div>

   <a href="##">超链接</a>

</body>

如何调整DIV元素之间的距离：
盒子：
一个容器
内部装入各类物品（内容）
要展示的物品（内容）较多时，盒子与盒子嵌套或堆叠起来，共同展示
盒子模型：
web中的盒子：一个矩形区域，内容包裹在盒子中。盒子的堆叠与嵌套形成整个页面的内容排布。
盒子在web中的作用：
内容的容器
通过盒子与盒子的嵌套、堆叠，控制页面内容的展示位置（布局）

padding：内边距
margin :  外边距
margin: 0 auto;
border：边框
border: 2px solid black;

定位：position

/*absolute、 relative 、fixed*/

position ：absolute的元素会相对于其设置了position 样式的父级元素进行定位，逐级去找，直到body;

position:absolute;
        /* 定位样式 left bottom right top*/
        right:20px;
        top: 200px;
	
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。
 position: fixed;
       	 right: 20px;
       	 top:400px;
relative	
生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

文字、文本样式：

  文字大小（font-size）      文字字体 （font-family）
  文字加粗（font-weight）  文字颜色（color）
  文本缩进（text-indent）   文本居中（text-align）
  文本划线（text-decoration）  line-height(行高）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本样式</title>
	<style type="text/css">
		p{
			font-size: 20px;
			font-family: "楷体";
			/*颜色设置3种形式 关键字、 rgb()、十六进制样式（#000000）*/
			color: red;
		/*	font-weight: lighter; bold border  100-900*/
		   	font-weight:bold;
		   	text-indent: 2em;
		   	text-align: center;
		   	line-height: 40px;
		}

		#link{
			background-color: red;
			display: block;
			height: 50px;
			width: 200px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
   <p>
   	我们先来了解一下手机充电时电量使用的情况，当手机正在充电时，来自充电器的电流会分成两部分，绝大一部分会供给电池，从而帮助电池完成蓄电；另一部分则供给手机主板，满足手机完成其他工作的需要。如果此时边充电边使用，那么供给手机主板的电流就会加大，相应地，供给电池蓄电的电流就会减少。
   </p>

   <a href="##" id="link"> 文本竖直居中</a>
</body>
</html>

背景样式：

背景颜色（background-color） 背景图片（background-image）
背景位置（background-position）  背景大小（background-size）
背景重复（background-repeat） 列表类型（list-style-type）
列表符位置（list-style-position）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景</title>
	<style type="text/css">
		#bg{
			width:970px; ;
			height: 60px;
			background-repeat: no-repeat;
			background-image: url(images/bg.jpg) /*不占据实际空间*/
		}

		#listul{
			list-style-type: circle;
			/*list-style-position: outside;*/
			list-style-position: inside;
		}

	</style>
</head>
<body>
   <div id="bg">
   	 <!--   <img src="images/bg.jpg">   占据实际空间 -->

   </div>

   <ul id="listul">
   	  <li>列表项1</li>
   	  <li>列表项2</li>
   	  <li>列表项3</li>
   	  <li>列表项4</li>
   </ul>
</body>
</html>

FreeSoar1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

一、样式结构样式名：样式值；例如：background-color:red; 设定选中元素背景颜色为红色color: red; 设定选中元素内部文字颜色为红色font-family: '宋体'；设置文字字体为宋体CSS常用样式分类：1、设定看到元素显示外观的样式。（文字颜色、背景、盒子模型）2、对元素进行布局的样式。（摆放元素位置的样式）...
复制链接

扫一扫