版权声明:本文为博主原创文章,未经博主允许不得转载。 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空间位置
用于调整定位时重叠块的上下位置。其值为整数,可正可负