【CSS】简汇-CSDN博客

本文链接：https://blog.csdn.net/SevenGirl2017/article/details/82811197

控制页面

行内样式

直接对HTML的标记使用style属性，然后将CSS代码直接写在其中

	<p style = "color:#FF0000; font-size:20px; ">行内样式显示</p>

内嵌式

将CSS写在与之间，并且用标记进行声明

	<head>
	<style type ="text/css">
		P{
			Color:#FF00FF;
			Font-weitht:bold;
			Font-size:25px;
		}
	</style>
	</head>
	<body>
		<p> 紫色紫色、粗体、25px的效果</p>
	</body>

链接式

它将HTML页面本身与CSS样式风格分离为两个会多个文件，实现了页面框架HTML代码与美工CSS代码的完美分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。
对于同一个CSS文件可以连接到多个HTML文件中是，甚至可以连接到整个网站的所有页面中，使得网站整体风格统一、协调，后期维护工作也可大大减少。

<link href ="1.css" type="text/css" rel="stylesheet">  //其中，1.css则是创建出的CSS样式表

选择器

所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。

标记选择器

类别选择器

ID选择器

继承

在这里插入图片描述

文字

字体

font-family:黑体，宋体，sans-serif；  /*先找黑体，没有则找宋体，再没有则匹配默认字体*/

大小

font-size: 12pt

颜色

color:blue
color:#00f 
Color:rgb(0,0,255)
Color:rgb(0%,0%,100%)

粗细

font-weight:100;

斜体

font-style:italic

下划线

 text-decoration:underline;

顶划线

text-decoration:overline;

删除线

 text-decoration:line-throuth;

闪烁

 text-decoration:blink;

英文字母

单词首字母大写 text-transform:capitalize;
全部大写 text-transform:uppercase;
全部小写 text-transform:lowercase;

段落

水平对齐

text-align:left;  /*左对齐*/
text-align:right;  /*右对齐*/
text-align:center;  /*居中对齐*/
text-align:justify;  /*两端对齐*/

垂直方式

vertical-align:top;  /*顶端对齐*/
vertical-align:bottom;  /*底端对齐*/
vertical-align:middle;  /*中间对齐*/

行间距

line-height:8pt;  /* 绝对值数，一般小于字体大小*/

字间距

 letter-spacing:-2pt;   /*绝对数值，负数*/

首字放大

 font-size:60px

首字下沉

 float:left

与右边间隔

 padding-right:5px;

图片

样式

边框

<img src="picture.jpg" class="test1"  border="0">

缩放

 img.test1{
			Width:50%;  /*相对宽度*/
			Heitht:110px; /*绝对高度*/
		}

页面

页面背景色

background-color:#5b8a00;

超链接

动态

<a href="http://baidu.com"> 百度一下</a>

按钮

<a href="#"> 首页</a>

DIV

div 与 span

div：块级元素，前后有换行
span：行内元素，前后不会换行，可包含在div中

盒子模型

内容：content
边框：border
间隙：padding
间隔：margin

元素定位

Float:设置浮动

属性：left、right、noneJ(默认)

Position:指定块的位置

	属性：static(默认，保持不变)、absolute(绝对位置)、fixed（绝对位置，随滚动条而动）

z-index空间位置

	用于调整定位时重叠块的上下位置。其值为整数，可正可负